/* Sign-in intro, cartoon style: the NAPP badge assembles from its parts, gets welded, flashes, and the real logo
   appears. ~4.5 s, skippable (click / key / button), reduced-motion shows the final screen. Times are absolute. */
.login-page { overflow: hidden; }
.intro-page { min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 50% 40%, #0b1730 0%, #050a14 60%, #020409 100%); }
#embers, #sparks { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#embers { z-index: 0; }
#sparks { z-index: 5; }
.fire-glow { position: fixed; left: 0; right: 0; bottom: -20vh; height: 60vh; pointer-events: none; z-index: 0;
             background: radial-gradient(ellipse at 50% 100%, rgba(255,90,20,.35), rgba(255,60,10,.08) 45%, transparent 70%);
             animation: glow-breathe 4s ease-in-out infinite; }
@keyframes glow-breathe { 50% { opacity: .65; } }
.stage { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center;
         justify-content: center; gap: 6px; padding: 16px; box-sizing: border-box; }

/* ---------- badge assembly ---------- */
.badge-wrap { position: relative; width: 250px; height: 248px; flex-shrink: 0; }
.assembly, .layer, .intro-badge { position: absolute; inset: 0; width: 100%; height: 100%; }
.layer, .intro-badge, .fly { opacity: 0; will-change: transform, opacity; }
.l-shield { transform-origin: 50% 55%; }
.l-controller { transform-origin: 50% 49.6%; z-index: 3; }
.l-letters { transform-origin: 49% 61%; z-index: 4; }
.l-banner { transform-origin: 51% 80%; z-index: 4; }
.l-flag-ca, .l-flag-us { z-index: 1; }

.play .l-shield { animation: shield-pop 0.94s cubic-bezier(.3,1.6,.5,1) 0.07s forwards; }
@keyframes shield-pop {
    0% { opacity: 0; transform: scale(0) rotate(-8deg); }
    40% { opacity: 1; transform: scale(1.18, .84) rotate(3deg); }
    62% { transform: scale(.9, 1.1) rotate(-1deg); }
    82% { transform: scale(1.04, .97); }
    100% { opacity: 1; transform: none; }
}

/* flags: huge from off-screen, shrink into place with a wobble, then become the badge's flag pieces */
.fly { position: absolute; width: 34%; height: 17%; z-index: 2; }
.fly-ca { left: -1%; top: 25.8%; transform-origin: 50% 50%; }
.fly-us { left: 67%; top: 26.7%; transform-origin: 50% 50%; }
.fly::before { content: ""; position: absolute; top: 12%; height: 76%; width: 160%; opacity: 0; pointer-events: none;
               background: repeating-linear-gradient(to bottom, rgba(255,255,255,.7) 0 3px, transparent 3px 13px); }
.fly-ca::before { right: 100%; -webkit-mask: linear-gradient(to left, #000, transparent); mask: linear-gradient(to left, #000, transparent); }
.fly-us::before { left: 100%; -webkit-mask: linear-gradient(to right, #000, transparent); mask: linear-gradient(to right, #000, transparent); }

.play .fly-ca { animation: fly-ca 1.16s cubic-bezier(.25,.9,.35,1.15) 1s forwards, fly-land 0.26s ease-in 2.12s forwards; }
.play .fly-us { animation: fly-us 1.16s cubic-bezier(.25,.9,.35,1.15) 1.07s forwards, fly-land 0.26s ease-in 2.19s forwards; }
.play .fly::before { animation: speed-lines 1.16s linear 1s forwards; }
@keyframes fly-ca {
    0% { opacity: 1; transform: translate(-70vw, -18vh) scale(4.5) rotate(-28deg); }
    65% { opacity: 1; transform: translate(0, 0) scale(.9) rotate(8deg); }
    82% { transform: scale(1.08) rotate(-5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes fly-us {
    0% { opacity: 1; transform: translate(70vw, -14vh) scale(4.5) rotate(28deg); }
    65% { opacity: 1; transform: translate(0, 0) scale(.9) rotate(-8deg); }
    82% { transform: scale(1.08) rotate(5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes fly-land { to { opacity: 0; transform: scale(.7); } }
@keyframes speed-lines { 0% { opacity: .9; } 60% { opacity: .7; } 100% { opacity: 0; } }
.play .l-flag-ca { animation: piece-in 0.32s ease-out 2.16s forwards; }
.play .l-flag-us { animation: piece-in 0.32s ease-out 2.24s forwards; }
@keyframes piece-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* controller: drops from the sky, stretched; squashes on impact; bounces */
.play .l-controller { animation: drop 1.09s linear 2.24s forwards; }
@keyframes drop {
    0% { opacity: 1; transform: translateY(-120vh) scale(.78, 1.35); animation-timing-function: cubic-bezier(.55,0,1,.45); }
    52% { opacity: 1; transform: translateY(0) scale(.82, 1.25); animation-timing-function: ease-out; }
    64% { transform: translateY(3%) scale(1.3, .68); animation-timing-function: ease-out; }
    80% { transform: translateY(-6%) scale(.94, 1.08); animation-timing-function: ease-in-out; }
    91% { transform: translateY(0) scale(1.04, .96); }
    100% { opacity: 1; transform: none; }
}

/* NAPP slams down like a rubber stamp */
.play .l-letters { animation: stamp 0.65s cubic-bezier(.5,0,.75,0) 3.1s forwards; }
@keyframes stamp {
    0% { opacity: 0; transform: scale(3.4) rotate(-12deg); }
    55% { opacity: 1; transform: scale(.88) rotate(2deg); animation-timing-function: ease-out; }
    78% { transform: scale(1.07) rotate(-1deg); }
    100% { opacity: 1; transform: none; }
}
@keyframes shake {
    15% { transform: translate(-7px, 4px) rotate(-1.5deg); } 30% { transform: translate(6px, -4px) rotate(1deg); }
    50% { transform: translate(-4px, 2px); } 70% { transform: translate(3px, -1px); } 85% { transform: translate(-1px, 1px); }
}
@keyframes weld-glow { 50% { filter: brightness(1.35) drop-shadow(0 0 14px rgba(255,170,60,.9)); } }

/* banner springs up from the bottom */
.play .l-banner { animation: spring-up 0.87s linear 3.54s forwards; }
@keyframes spring-up {
    0% { opacity: 1; transform: translateY(75vh) scale(.6, 1.4); animation-timing-function: cubic-bezier(.2,.7,.4,1); }
    55% { transform: translateY(-9%) scale(1.15, .85); animation-timing-function: ease-in-out; }
    78% { transform: translateY(2%) scale(.96, 1.04); }
    100% { opacity: 1; transform: none; }
}

/* flash: the welded parts become the real logo */
.screen-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 6; }
.play .screen-flash { animation: screen-flash 0.87s ease-out 5.13s forwards; }
@keyframes screen-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.play .assembly { animation: shake 0.58s ease-out 3.47s, weld-glow 0.87s ease-in-out 4.34s 1, vanish 0.01s linear 5.24s forwards; }
@keyframes vanish { to { opacity: 0; visibility: hidden; } }
.play .intro-badge { animation: final-pop 1.01s cubic-bezier(.2,1.6,.4,1) 5.24s forwards; }
@keyframes final-pop {
    0% { opacity: 1; transform: scale(1.15); filter: brightness(2) drop-shadow(0 0 40px #fff); }
    100% { opacity: 1; transform: none; filter: drop-shadow(0 10px 25px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(255,120,30,.45)); }
}
.burst { position: absolute; inset: -60%; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 0;
         background: repeating-conic-gradient(rgba(255,196,90,.55) 0 5deg, transparent 5deg 15deg);
         -webkit-mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 70%);
         mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 70%); }
.play .burst { animation: burst 1.89s ease-out 5.16s forwards; }
@keyframes burst { 0% { opacity: 0; transform: scale(.4) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5) rotate(35deg); } }
.badge-wrap::after { content: ""; position: absolute; inset: -30px; border-radius: 50%; opacity: 0; z-index: -1;
                     background: radial-gradient(circle, rgba(255,120,30,.4), rgba(31,123,255,.16) 50%, transparent 70%); }
.play .badge-wrap::after { animation: aura 3.77s ease-in-out 5.43s infinite; }
@keyframes aura { 0%, 100% { opacity: .55; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.06); } }

/* ---------- titles + card ---------- */
.intro-title { text-align: center; }
.intro-title .t1 { font: 700 15px var(--tac); letter-spacing: 6px; color: #dfe7f3; opacity: 0; }
.intro-title .t2 { font: 700 34px var(--head); letter-spacing: 2px; color: var(--blue-2); text-shadow: 0 0 22px var(--blue-glow); opacity: 0; }
.play .intro-title .t1 { animation: spread-in 1.01s ease-out 5.5s forwards; }
.play .intro-title .t2 { animation: rise-in 0.8s ease-out 5.79s forwards; }
@keyframes spread-in { from { opacity: 0; letter-spacing: 22px; } to { opacity: 1; letter-spacing: 6px; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.intro-card { width: 100%; max-width: 380px; margin-top: 4px; opacity: 0; backdrop-filter: blur(6px);
              background: linear-gradient(180deg, rgba(13,22,38,.92), rgba(11,19,34,.92)); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.play .intro-card { animation: card-up 0.8s cubic-bezier(.2,.8,.2,1) 6.08s forwards; }
@keyframes card-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.slogan-bar { margin-top: 12px; text-align: center; font: 600 11px var(--tac); letter-spacing: 1.5px; white-space: nowrap; color: var(--muted); }
.slogan-bar b { color: var(--blue-2); }
.skip { position: fixed; right: 18px; bottom: 16px; background: rgba(13,22,38,.7); color: var(--muted); border: 1px solid var(--border);
        border-radius: 6px; padding: 6px 12px; font: 600 13px var(--tac); cursor: pointer; z-index: 7; }
.skip:hover { color: #fff; }

/* finished, skipped or reduced motion: final screen, nothing moving except the aura */
.done .assembly, .done .fly, .done .burst { display: none; }
.done .intro-badge, .done .intro-title .t1, .done .intro-title .t2, .done .intro-card { opacity: 1; animation: none; transform: none; }
.done .intro-badge { filter: drop-shadow(0 10px 25px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(255,120,30,.45)); }
.done.badge-wrap::after, .done .badge-wrap::after { animation: aura 2.6s ease-in-out infinite; }
.done .skip { display: none; }
body.skipped .screen-flash { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) { .sheen, .fire-glow { animation: none; } }
@media (max-height: 700px) { .badge-wrap { width: 190px; height: 188px; } .intro-title .t2 { font-size: 28px; } }
@media (max-width: 480px) {
    .badge-wrap { width: 200px; height: 198px; }
    .intro-title .t1 { font-size: 12px; letter-spacing: 3px; }
    @keyframes spread-in { from { opacity: 0; letter-spacing: 12px; } to { opacity: 1; letter-spacing: 3px; } }
    .intro-title .t2 { font-size: 26px; }
    .slogan-bar { letter-spacing: .5px; }
}
body.auth { align-items: safe center; }

/* hero zoom: the badge assembles big in the middle of the screen, then settles into place above the login box */
.play .badge-wrap { animation: hero-hold 5.31s linear forwards, hero-settle 0.87s cubic-bezier(.3,1.25,.5,1) 5.31s forwards; z-index: 4; }
@keyframes hero-hold { from, to { transform: translateY(var(--dy, 0px)) scale(var(--hs, 1)); } }
@keyframes hero-settle { from { transform: translateY(var(--dy, 0px)) scale(var(--hs, 1)); } to { transform: none; } }
.done .badge-wrap { animation: none; transform: none; }


/* ---------- soldier inside the shield: eyes ignite, then the badge pieces take over ---------- */
.l-soldier { z-index: 1; transform-origin: 50% 55%; }
.l-soldier svg { display: block; width: 100%; height: 100%; }
.sd-eyes { opacity: 0; transform-box: fill-box; transform-origin: center; }
.play .l-soldier { animation: shield-pop .94s cubic-bezier(.3,1.6,.5,1) .07s forwards, soldier-out .7s ease-in 2.25s forwards; }
.play .sd-eyes { animation: eyes-on .75s steps(1, end) .55s forwards, eyes-pulse 1.1s ease-in-out 1.3s infinite; }
.play .sd-led { animation: led 0.5s steps(1, end) .3s infinite; }
@keyframes eyes-on { 0% { opacity: 0; } 18% { opacity: 1; } 30% { opacity: .15; } 44% { opacity: 1; } 56% { opacity: .35; } 70%, 100% { opacity: 1; } }
@keyframes eyes-pulse { 0%, 100% { opacity: 1; filter: brightness(1); } 50% { opacity: .85; filter: brightness(1.35); } }
@keyframes led { 50% { opacity: .15; } }
@keyframes soldier-out { 0% { opacity: 1; } 60% { opacity: .5; } 100% { opacity: 0; visibility: hidden; } }

/* waving cloth flags (drawn on canvas by intro.js) */
.fly .cloth { display: block; width: 116%; height: 150%; margin: -25% 0 0 -8%;
              filter: drop-shadow(4px 7px 6px rgba(0,0,0,.55)); }
.fly::before { top: 18%; height: 64%; }
/* the face line-art glows faintly with the eyes */
.play .sd-face { animation: face-in 1s ease-out .6s both; }
@keyframes face-in { from { opacity: 0; } to { opacity: 1; } }