animations.css

/* ═══════════════════════════════════════════════════════════════════
   ORV SCENARIO SIMULATOR — ANIMATIONS.CSS
   Elder Scrolls / Oblivion Edition — Ambient Gold & Dramatic Reveals
   ═══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   1. SCREEN SHAKE — damage / impact
   ───────────────────────────────────────────────────────────────── */
@keyframes shake {
    0%   { transform: translate(0, 0); }
    10%  { transform: translate(-5px, 2px); }
    20%  { transform: translate(4px, -3px); }
    30%  { transform: translate(-3px, 4px); }
    40%  { transform: translate(5px, -2px); }
    50%  { transform: translate(-2px, -4px); }
    60%  { transform: translate(3px, 2px); }
    70%  { transform: translate(-4px, -2px); }
    80%  { transform: translate(2px, 3px); }
    90%  { transform: translate(-1px, -1px); }
    100% { transform: translate(0, 0); }
}
.shake { animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }


/* ─────────────────────────────────────────────────────────────────
   2. DAMAGE FLASH — blood red
   ───────────────────────────────────────────────────────────────── */
@keyframes damageFlash {
    0%   { opacity: 0.7; background: rgba(139, 26, 26, 0.3); }
    50%  { opacity: 0.4; background: rgba(139, 26, 26, 0.15); }
    100% { opacity: 0;   background: rgba(139, 26, 26, 0); }
}
.damage-flash { animation: damageFlash 0.5s ease-out forwards; }


/* ─────────────────────────────────────────────────────────────────
   3. AMBIENT GOLD PULSE — torch/candle glow on panels
   ───────────────────────────────────────────────────────────────── */
@keyframes goldBreath {
    0%, 100% {
        box-shadow: 0 0 8px rgba(201,168,76,0.15), inset 0 0 20px rgba(0,0,0,0.6);
    }
    50% {
        box-shadow: 0 0 20px rgba(201,168,76,0.25), inset 0 0 20px rgba(0,0,0,0.6);
    }
}
.gold-breathe { animation: goldBreath 4s ease-in-out infinite; }


/* ─────────────────────────────────────────────────────────────────
   4. METER PULSE — meta exposure rise (blood variant)
   ───────────────────────────────────────────────────────────────── */
@keyframes meterPulse {
    0%   { box-shadow: 0 0 5px rgba(139,26,26,0.2); }
    50%  { box-shadow: 0 0 18px rgba(139,26,26,0.5), 0 0 32px rgba(139,26,26,0.2); }
    100% { box-shadow: 0 0 5px rgba(139,26,26,0.2); }
}
.meter-pulse { animation: meterPulse 1.2s ease-in-out; }


/* ─────────────────────────────────────────────────────────────────
   5. DANGER PULSE — meta > 75% (urgent blood warning)
   ───────────────────────────────────────────────────────────────── */
@keyframes dangerPulse {
    0%   { border-color: rgba(139,26,26,0.3); box-shadow: 0 0 8px rgba(139,26,26,0.1); }
    50%  { border-color: rgba(204,51,51,0.6); box-shadow: 0 0 24px rgba(139,26,26,0.4); }
    100% { border-color: rgba(139,26,26,0.3); box-shadow: 0 0 8px rgba(139,26,26,0.1); }
}
.meter-danger { animation: dangerPulse 1.5s ease-in-out infinite; }


/* ─────────────────────────────────────────────────────────────────
   6. COIN FALL — gold dust particles
   ───────────────────────────────────────────────────────────────── */
@keyframes coinFall {
    0% {
        transform: translateY(-20px) rotate(0deg) scale(1);
        opacity: 1;
    }
    40% {
        transform: translateY(40vh) translateX(12px) rotate(180deg) scale(0.8);
        opacity: 0.9;
    }
    80% {
        transform: translateY(80vh) translateX(-8px) rotate(300deg) scale(0.5);
        opacity: 0.4;
    }
    100% {
        transform: translateY(100vh) rotate(360deg) scale(0.2);
        opacity: 0;
    }
}


/* ─────────────────────────────────────────────────────────────────
   7. SCENARIO FLASH — parchment unfurl entrance
   ───────────────────────────────────────────────────────────────── */
@keyframes scenarioFlash {
    0%   { opacity: 0; background: rgba(201,168,76,0.15); }
    10%  { opacity: 1; background: rgba(201,168,76,0.08); }
    25%  { background: rgba(30,20,5,0.7); }
    100% { opacity: 1; background: rgba(5,4,2,0.92); }
}
.scenario-flash { animation: scenarioFlash 1.4s ease-out forwards; }


/* ─────────────────────────────────────────────────────────────────
   8. SLIDE IN — from right for chat messages
   ───────────────────────────────────────────────────────────────── */
@keyframes slideIn {
    0%   { transform: translateX(24px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.slide-in-right { animation: slideIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }


/* ─────────────────────────────────────────────────────────────────
   9. FADE IN UP — general entrance (parchment rising)
   ───────────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
    0%   { transform: translateY(16px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.fade-in-up { animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }


/* ─────────────────────────────────────────────────────────────────
   10. GLITCH — reality distortion for Reader Noticed
   ───────────────────────────────────────────────────────────────── */
@keyframes glitch {
    0%   { text-shadow: 2px 0 #8b1a1a, -2px 0 #c9a84c; transform: translate(0); }
    15%  { text-shadow: -3px 0 #8b1a1a, 3px 0 #c9a84c; transform: translate(-2px, 1px); }
    30%  { text-shadow: 3px 0 #8b1a1a, -3px 0 #c9a84c; transform: translate(2px, -1px); }
    45%  { text-shadow: -2px 0 #8b1a1a, 2px 0 #c9a84c; transform: translate(-1px, 2px); }
    60%  { text-shadow: 4px 0 #8b1a1a, -4px 0 #c9a84c; transform: translate(2px, -2px); }
    100% { text-shadow: 2px 0 #8b1a1a, -2px 0 #c9a84c; transform: translate(0); }
}
.glitch-effect { animation: glitch 0.3s steps(2) infinite; }


/* ─────────────────────────────────────────────────────────────────
   11. GLITCH TEXT — gold/blood RGB split
   ───────────────────────────────────────────────────────────────── */
@keyframes glitchText {
    0%   { text-shadow: 1px 0 #8b1a1a, -1px 0 #c9a84c; }
    33%  { text-shadow: -2px 1px #8b1a1a, 2px -1px #c9a84c; }
    66%  { text-shadow: 2px -1px #8b1a1a, -2px 1px #c9a84c; }
    100% { text-shadow: 1px 0 #8b1a1a, -1px 0 #c9a84c; }
}
.glitch-text { animation: glitchText 0.5s steps(3) infinite; }


/* ─────────────────────────────────────────────────────────────────
   12. STATIC NOISE — ancient static overlay
   ───────────────────────────────────────────────────────────────── */
@keyframes staticNoise {
    0%   { background-position: 0 0; }
    20%  { background-position: -30px 20px; }
    40%  { background-position: 20px -15px; }
    60%  { background-position: -15px 30px; }
    80%  { background-position: 25px -25px; }
    100% { background-position: 0 0; }
}

.static-noise::after {
    content: '';
    position: fixed;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background:
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0,
            rgba(201,168,76,0.02) 1px,
            transparent 2px
        );
    animation: staticNoise 0.12s steps(5) infinite;
    pointer-events: none;
    z-index: 10000;
    mix-blend-mode: overlay;
}

.static-noise::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 3px,
        rgba(139,26,26,0.012) 3px,
        rgba(139,26,26,0.012) 4px
    );
    pointer-events: none;
    z-index: 10001;
    animation: staticNoise 0.1s steps(3) infinite reverse;
}


/* ─────────────────────────────────────────────────────────────────
   13. RANK FLASH — ancient medal reveal
   ───────────────────────────────────────────────────────────────── */
@keyframes rankFlash {
    0%   { transform: scale(0.3); opacity: 0; filter: brightness(3) sepia(0.5); }
    40%  { transform: scale(1.15); opacity: 1; filter: brightness(2) sepia(0.3); }
    60%  { transform: scale(0.96); filter: brightness(1.5); }
    80%  { transform: scale(1.04); filter: brightness(1.2); }
    100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}

.rank-s { animation: rankFlash 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
.rank-a { animation: rankFlash 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
.rank-b { animation: rankFlash 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.rank-c { animation: rankFlash 0.5s ease-out both; }

@keyframes rankGlowGold {
    0%, 100% { text-shadow: 0 0 30px rgba(240,200,64,0.4), 0 0 60px rgba(201,168,76,0.2); }
    50%      { text-shadow: 0 0 50px rgba(240,200,64,0.7), 0 0 100px rgba(201,168,76,0.35); }
}

@keyframes rankGlowBlood {
    0%, 100% { text-shadow: 0 0 30px rgba(204,51,51,0.4), 0 0 60px rgba(139,26,26,0.2); }
    50%      { text-shadow: 0 0 50px rgba(204,51,51,0.7), 0 0 100px rgba(139,26,26,0.35); }
}

.rank-s .rank-letter { animation: rankGlowGold 2s ease-in-out infinite 0.8s; }
.rank-a .rank-letter { animation: rankGlowGold 2s ease-in-out infinite 0.7s; }


/* ─────────────────────────────────────────────────────────────────
   14. GLOW PULSE — gold candlelight flicker on Begin button
   ───────────────────────────────────────────────────────────────── */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(201,168,76,0.25), 0 0 24px rgba(201,168,76,0.10);
    }
    50% {
        box-shadow: 0 0 24px rgba(201,168,76,0.45), 0 0 48px rgba(201,168,76,0.20), 0 0 80px rgba(201,168,76,0.08);
    }
}
.glow-pulse { animation: glowPulse 2.8s ease-in-out infinite; }


/* ─────────────────────────────────────────────────────────────────
   15. TEXT REVEAL — ink spreading across parchment
   ───────────────────────────────────────────────────────────────── */
@keyframes textReveal {
    0%   { max-width: 0; opacity: 0; }
    100% { max-width: 100%; opacity: 1; }
}
.text-reveal {
    overflow: hidden;
    white-space: nowrap;
    animation: textReveal 2.5s steps(45) forwards;
}


/* ─────────────────────────────────────────────────────────────────
   16. BAR FILL ENTRANCE
   ───────────────────────────────────────────────────────────────── */
@keyframes barFill {
    0%   { width: 0; }
}
.bar-animate-in { animation: barFill 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }


/* ─────────────────────────────────────────────────────────────────
   17. FLOAT — hovering title (start screen)
   ───────────────────────────────────────────────────────────────── */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.floating { animation: float 4s ease-in-out infinite; }


/* ─────────────────────────────────────────────────────────────────
   18. CINEMATIC ANIMATIONS
   ───────────────────────────────────────────────────────────────── */
@keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
.fade-in { animation: fadeIn 0.6s ease-out both; }

@keyframes fadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
.fade-out { animation: fadeOut 0.5s ease-out forwards; }

@keyframes slideInLeft {
    0%   { transform: translateX(-24px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
.slide-in-left { animation: slideInLeft 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }

@keyframes scaleUp {
    0%   { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.scale-up { animation: scaleUp 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
.pulse { animation: pulse 2.5s ease-in-out infinite; }


/* ─────────────────────────────────────────────────────────────────
   19. SHIMMER — parchment loading effect
   ───────────────────────────────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.shimmer {
    background: linear-gradient(
        90deg,
        #12100a 25%,
        rgba(201,168,76,0.06) 50%,
        #12100a 75%
    );
    background-size: 200% 100%;
    animation: shimmer 2.5s infinite;
}

@keyframes breathe {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.75; }
}
.breathe { animation: breathe 4.5s ease-in-out infinite; }


/* ─────────────────────────────────────────────────────────────────
   20. WARP — meta-critical reality distortion
   ───────────────────────────────────────────────────────────────── */
@keyframes warp {
    0%, 100% { filter: none; }
    25%      { filter: sepia(0.08) hue-rotate(5deg); }
    50%      { filter: sepia(0.12) hue-rotate(-4deg); }
    75%      { filter: sepia(0.06) hue-rotate(3deg); }
}
body.meta-critical .game-area { animation: warp 5s ease-in-out infinite; }


/* ─────────────────────────────────────────────────────────────────
   21. STAGGER — children entrance cascade
   ───────────────────────────────────────────────────────────────── */
.stagger-children > * {
    opacity: 0;
    animation: fadeInUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.10s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.20s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.30s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.40s; }
.stagger-children > *:nth-child(9) { animation-delay: 0.45s; }
.stagger-children > *:nth-child(10) { animation-delay: 0.50s; }


/* ─────────────────────────────────────────────────────────────────
   22. REDUCED MOTION
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}