/* Salvuspet - Storyboard Edition 🎨 */

:root {
    --primary: #2dd4bf;
    --paper: #ffffff;
    --ink: #334155;
    --border: 3px;
    --border-lg: 6px;
}

body {
    font-family: 'Fredoka', sans-serif;
    background-color: #f8fafc;
}

.story-panel {
    background: var(--paper);
    border: var(--border) solid var(--ink);
    box-shadow: 6px 6px 0px 0px var(--ink);
    border-radius: 16px;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.story-panel:hover {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0px 0px var(--ink);
}

.btn-story {
    border: var(--border) solid var(--ink);
    box-shadow: 3px 3px 0px 0px var(--ink);
    transition: all 0.1s;
    font-weight: 700;
}

.btn-story:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px 0px var(--ink);
}

.nav-sketch { border-bottom: var(--border-lg) solid var(--ink); }
.border-b-6 { border-bottom-width: var(--border-lg); }
.border-r-6 { border-right-width: var(--border-lg); }
.border-t-6 { border-top-width: var(--border-lg); }
.border-3 { border-width: 3px; }

.bg-grid {
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 20px 20px;
}

.badge-step {
    background: var(--ink);
    color: white;
    padding: 2px 12px;
    border-radius: 99px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

@keyframes popIn {
    0% { transform: scale(0.95) translateY(10px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px) rotate(-1deg); }
    75% { transform: translateX(5px) rotate(1deg); }
}

.animate-pop-in { animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.shake { animation: shake 0.2s ease-in-out infinite; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 10px; }

/* Pulse animation for simulated progress */
.upload-pulse {
    animation: upload-pulse 1.5s infinite;
}

@keyframes upload-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}