/* ══════════════ WHATIN ANIMATIONS REFERENCE ══════════════ */

/* ── Core keyframes ── */
@keyframes gradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes float  { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-16px) rotate(1deg)} }
@keyframes spin   { to{transform:rotate(360deg)} }
@keyframes pulse  { 0%,70%{box-shadow:0 0 0 0 rgba(0,212,255,.5)} 100%{box-shadow:0 0 0 8px rgba(0,212,255,0)} }
@keyframes blink  { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes scanline   { from{top:-2px} to{top:100%} }
@keyframes dataStream { 0%{transform:translateY(-100%);opacity:0} 5%{opacity:.8} 95%{opacity:.8} 100%{transform:translateY(100vh);opacity:0} }
@keyframes countUp  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes splashIn { from{opacity:0;transform:scale(.85) translateY(18px)} to{opacity:1;transform:none} }
@keyframes splashOut{ from{opacity:1} to{opacity:0} }
@keyframes modalIn  { from{opacity:0;transform:scale(.75) translateY(48px)} to{opacity:1;transform:none} }
@keyframes overlayIn{ from{opacity:0} to{opacity:1} }
@keyframes letterDrop{ from{opacity:0;transform:translateY(-60px) rotateX(90deg) scale(.5)} to{opacity:1;transform:none} }
@keyframes ripple { 0%{transform:scale(0);opacity:1} 100%{transform:scale(6);opacity:0} }
@keyframes shimmer{ 0%{transform:translateX(-130%) skewX(-20deg)} 100%{transform:translateX(300%) skewX(-20deg)} }

/* ── Cinematic scroll pop ── */
@keyframes popIn      { from{opacity:0;transform:translateY(56px) scale(.94)} to{opacity:1;transform:none} }
@keyframes popLeft    { from{opacity:0;transform:translateX(-72px) scale(.95)} to{opacity:1;transform:none} }
@keyframes popRight   { from{opacity:0;transform:translateX(72px) scale(.95)} to{opacity:1;transform:none} }
@keyframes scaleReveal{ from{opacity:0;transform:scale(.82) translateY(20px)} to{opacity:1;transform:none} }
@keyframes cardFlip   { from{opacity:0;transform:perspective(800px) rotateX(-32deg) translateY(36px)} to{opacity:1;transform:none} }
@keyframes wordReveal { from{opacity:0;transform:translateY(28px);filter:blur(10px)} to{opacity:1;transform:none;filter:blur(0)} }
@keyframes numPop     { 0%{opacity:0;transform:scale(.5) translateY(18px)} 70%{transform:scale(1.12) translateY(-3px)} 100%{opacity:1;transform:none} }

/* ── Cinematic opening ── */
@keyframes cinLetterIn  { from{opacity:0;transform:translateY(-52px) rotateX(90deg) scale(.5)} to{opacity:1;transform:none} }
@keyframes cinLogoIn    { from{opacity:0;transform:scale(.35) translateY(-24px)} to{opacity:1;transform:none} }
@keyframes cinGlow      { 0%,100%{opacity:.35} 50%{opacity:.85} }
@keyframes cinProg      { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes cinExit      { from{transform:translateY(0);opacity:1} to{transform:translateY(-100%);opacity:.8} }

/* ── Pop classes — opacity:0 until .fired ── */
.pop-in,.pop-left,.pop-right,.pop-scale,.pop-flip,.pop-word,.pop-num { opacity:0; }
.pop-in.fired    { animation:popIn       .72s cubic-bezier(.22,1,.36,1) forwards; }
.pop-left.fired  { animation:popLeft     .72s cubic-bezier(.22,1,.36,1) forwards; }
.pop-right.fired { animation:popRight    .72s cubic-bezier(.22,1,.36,1) forwards; }
.pop-scale.fired { animation:scaleReveal .65s cubic-bezier(.22,1,.36,1) forwards; }
.pop-flip.fired  { animation:cardFlip    .65s cubic-bezier(.22,1,.36,1) forwards; }
.pop-word.fired  { animation:wordReveal  .78s cubic-bezier(.22,1,.36,1) forwards; }
.pop-num.fired   { animation:numPop      .60s cubic-bezier(.34,1.56,.64,1) forwards; }

/* ── Stagger for .cin-container children ── */
.cin-container>*:nth-child(1) {animation-delay:.04s}
.cin-container>*:nth-child(2) {animation-delay:.10s}
.cin-container>*:nth-child(3) {animation-delay:.16s}
.cin-container>*:nth-child(4) {animation-delay:.22s}
.cin-container>*:nth-child(5) {animation-delay:.28s}
.cin-container>*:nth-child(6) {animation-delay:.34s}

/* ── Ripple ── */
.btn-ripple { position:relative; overflow:hidden; }
.btn-ripple .rpl {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.28);
  width:130px; height:130px; margin:-65px 0 0 -65px;
  animation:ripple .65s linear; pointer-events:none;
}

/* ── Shimmer ── */
.shimmer { position:relative; overflow:hidden; }
.shimmer::after {
  content:''; position:absolute; top:0; left:0;
  width:35%; height:100%;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.06) 50%,transparent 80%);
  transform:translateX(-130%) skewX(-20deg); pointer-events:none;
}
.shimmer:hover::after { animation:shimmer .65s ease forwards; }

/* ── Gradient text utility ── */
.grad-text {
  background:linear-gradient(270deg,var(--c1, #00d4ff),var(--c2, #0051ff),var(--c3, #8c00ff),var(--c1, #00d4ff));
  background-size:300% 300%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:gradientShift 4s ease infinite;
}


/* ── Cinematic Lightning Intro ── */
.lightning-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    background: #020617;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease;
}

.intro-content {
    text-align: center;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.intro-logo {
    font-size: 5rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 12px;
    margin-bottom: 3rem;
    text-shadow: 0 0 25px rgba(56, 189, 248, 0.6);
    animation: pulse 2s infinite;
    font-family: 'Outfit', sans-serif;
}

.enter-btn {
    padding: 1.2rem 3.5rem;
    font-size: 1.1rem;
    background: rgba(56, 189, 248, 0.05);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 600;
    transition: all 0.4s ease;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.1);
    backdrop-filter: blur(10px);
}

.enter-btn:hover {
    background: var(--accent-gradient, linear-gradient(135deg, #38bdf8 0%, #6366f1 100%));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 40px rgba(56, 189, 248, 0.6);
    transform: scale(1.05);
}

.flash-screen {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

.lightning-bolt {
    position: absolute;
    top: -20%; left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 140vh;
    fill: #fff;
    filter: drop-shadow(0 0 30px #38bdf8) drop-shadow(0 0 60px #fff);
    opacity: 0;
    pointer-events: none;
    z-index: 4;
}

.strike-flash {
    animation: flashAnim 1.5s ease-out forwards;
}

.strike-bolt {
    animation: boltAnim 0.6s ease-out forwards;
}

@keyframes flashAnim {
    0% { opacity: 0; }
    5% { opacity: 1; }
    10% { opacity: 0; }
    15% { opacity: 0.9; }
    25% { opacity: 0; }
    35% { opacity: 0.8; }
    100% { opacity: 0; }
}

@keyframes boltAnim {
    0% { opacity: 0; transform: translateX(-50%) translateY(-100%); }
    2% { opacity: 1; transform: translateX(-50%) translateY(0); filter: drop-shadow(0 0 80px #fff); }
    8% { opacity: 0; }
    12% { opacity: 1; transform: translateX(-50%) translateY(0); filter: drop-shadow(0 0 100px #38bdf8); }
    20% { opacity: 0; }
    100% { opacity: 0; }
}

body.locked {
    overflow: hidden;
    height: 100vh;
}


@keyframes shakePage {
    0% { transform: translate(2px, 2px) rotate(0deg); }
    10% { transform: translate(-3px, -3px) rotate(-1deg); filter: contrast(1.5) brightness(1.2); }
    20% { transform: translate(-4px, 0px) rotate(1deg); filter: blur(2px) contrast(1.2) brightness(1.2); }
    30% { transform: translate(4px, 4px) rotate(0deg); }
    40% { transform: translate(2px, -2px) rotate(1deg); }
    50% { transform: translate(-3px, 4px) rotate(-1deg); }
    60% { transform: translate(-4px, 2px) rotate(0deg); filter: blur(1px); }
    70% { transform: translate(4px, 2px) rotate(-1deg); }
    80% { transform: translate(-2px, -2px) rotate(1deg); }
    90% { transform: translate(3px, 3px) rotate(0deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); filter: none; }
}

.shake-page {
    /* Violently shakes the body and temporarily boosts contrast/blur for dramatic effect */
    animation: shakePage 0.8s cubic-bezier(.36,.07,.19,.97) both;
}


/* ── Asteroid Extinction Intro ── */
.asteroid-element {
    position: absolute;
    top: -300px;
    right: -300px; /* Top right corner offscreen */
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #ffa500, #ff0000 60%, #000);
    box-shadow: 
        0 0 80px 30px #ff4500,
        inset 0 0 40px #ff0000,
        -50px 50px 100px 20px #ff5500;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}

/* Fire tail using pseudo element */
.asteroid-element::after {
    content: '';
    position: absolute;
    top: -50%; right: -50%;
    width: 300px; height: 100px;
    background: linear-gradient(135deg, transparent, rgba(255, 69, 0, 0.8), rgba(255, 0, 0, 0));
    transform: rotate(45deg);
    filter: blur(15px);
    z-index: -1;
}

.asteroid-fall {
    animation: meteorStrike 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

@keyframes meteorStrike {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 1;
        /* Diagonally downwards to bottom-left center */
        transform: translate(-150vw, 150vh) scale(1.5);
    }
}

/* Burning & Falling CSS for Actual Page Elements */
.on-fire-scatter {
    animation: fireScatter 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    transform-origin: center center;
    position: relative;
    /* Temporarily override original opacity so we can see the burn */
    opacity: 1 !important;
}

@keyframes fireScatter {
    0% {
        transform: translate(0, 0) rotate(0deg);
        filter: drop-shadow(0 -10px 20px #ff4500) drop-shadow(0 0 10px #ff0000) brightness(1.5);
        color: #ffdd44;
        background-color: rgba(255, 69, 0, 0.2);
    }
    50% {
        /* Falling randomly as defined by JS variables */
        transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.6);
        filter: drop-shadow(0 -50px 40px #ff0000) brightness(2);
        opacity: 0.8;
    }
    100% {
        transform: translate(calc(var(--tx) * 1.5), calc(var(--ty) * 1.5)) rotate(calc(var(--rot) * 2)) scale(0);
        filter: drop-shadow(0 0 0 #000);
        opacity: 0;
    }
}


/* ── Super Lightning & Chaos Scatter ── */
.super-flash {
    animation: superFlashAnim 1.8s ease-out forwards;
}

.super-bolt {
    animation: superBoltAnim 0.8s ease-out forwards;
}

@keyframes superFlashAnim {
    0% { opacity: 0; }
    3% { opacity: 1; }
    8% { opacity: 0.2; }
    12% { opacity: 0.9; background: #38bdf8; }
    18% { opacity: 0; }
    22% { opacity: 0.7; }
    30% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes superBoltAnim {
    0% { opacity: 0; filter: brightness(1); }
    2% { opacity: 1; filter: brightness(2) drop-shadow(0 0 50px #38bdf8); }
    8% { opacity: 0; }
    12% { opacity: 1; filter: brightness(2.5) drop-shadow(0 0 80px #fff); }
    20% { opacity: 0; }
    25% { opacity: 0.5; filter: brightness(1); }
    35% { opacity: 0; }
    100% { opacity: 0; }
}

.super-scatter, 
.pop-in.super-scatter, 
.pop-left.super-scatter, 
.pop-right.super-scatter,
.pop-scale.super-scatter,
.pop-flip.super-scatter,
h1.super-scatter,
h2.super-scatter,
nav.super-scatter {
    animation: superScatterAnim 2.5s cubic-bezier(0.1, 0.9, 0.2, 1) forwards !important;
    transform-origin: center !important;
    position: relative !important;
    opacity: 1 !important; /* Force visible during chaos */
    z-index: 999999;
}

@keyframes superScatterAnim {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1.2);
        filter: drop-shadow(0 0 30px #38bdf8) brightness(1.5);
    }
    10% {
        transform: translate(calc(var(--tx) * 0.2), calc(var(--ty) * 0.2)) rotate(calc(var(--rot) * 0.2)) scale(0.9);
        filter: brightness(1.2);
    }
    70% {
        transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.4);
        opacity: 0.8;
    }
    100% {
        transform: translate(calc(var(--tx) * 1.5), calc(var(--ty) * 1.5)) rotate(calc(var(--rot) * 2)) scale(0);
        opacity: 0;
        filter: blur(5px);
    }
}