/* =====================================================================
   MSTS v3 — animations.css
   Intro timeline, entrances, scroll reveals, CCTV scan states, keyframes.
   Hidden starting states only apply under .js, so content is always
   visible without JavaScript. Reduced motion: final states, no movement.

   Intro classes are added to .intro by js/animations.js on one clock
   (the same numbers drive the 3D scene in js/scene3d.js):
     s-grid → s-logo → s-name → s-tag → s-exit
   ===================================================================== */

/* ---------- Intro: scene 01 (dark environment, grid, scanning ring) ---------- */
.intro__veil { transition: opacity 1.2s var(--ease-soft); }
.has-3d .intro.s-grid .intro__veil { opacity: 0; transition-delay: .2s; }
.intro.s-grid .intro__grid { opacity: 1; transition: opacity 1.6s var(--ease-soft); }
.intro.s-grid .intro__hud { opacity: 1; transition: opacity 1s var(--ease-soft) .3s; }
.intro.s-grid .intro__skip { opacity: 1; transition-delay: .8s; }
.intro.s-grid .intro__ring { opacity: 1; transition: opacity 1.4s var(--ease-soft), transform 1.6s var(--ease); }
.intro__ring { transform: translate(-50%, -50%) scale(.82); }
.intro.s-grid .intro__ring { transform: translate(-50%, -50%) scale(1); }
.intro.s-grid .intro__ring-dash { animation: spin 40s linear infinite; }
.intro.s-grid .intro__ring-scan { animation: spin 2.6s linear infinite; }

/* ---------- Scenes 02–03: orbit scan, lock, capture ---------- */
.intro.s-orbit .intro__ring { opacity: .18; transform: translate(-50%, -50%) scale(1.25); transition: opacity 1.2s var(--ease-soft), transform 2s var(--ease); }
.intro.s-flash .intro__flash-core { animation: flash-core 1.1s var(--ease) forwards; }
.intro.s-flash .intro__flash-streak { animation: flash-streak 1.2s var(--ease) forwards; }
.intro.s-flash .intro__flash-ring { animation: flash-ring 1.2s var(--ease) .05s forwards; }
.intro.s-flash .intro__target { opacity: 0 !important; }
.intro.s-flash .intro__ring { opacity: 0; }
.intro.s-logo .intro__mirror { opacity: .9; transition: opacity 1.2s var(--ease-soft) .3s; }
.intro.s-logo .intro__sheen { animation: sheen 1.3s var(--ease-io) .25s forwards; }
.intro.s-logo .intro__plate { animation: plate-in 1.1s var(--ease) both; }
.intro.s-load .intro__loader { opacity: 1; transform: none; transition: opacity .8s var(--ease-soft), transform 1s var(--ease); }

/* ---------- Scene 04: logo through an aperture ---------- */
.intro.s-logo .intro__blades { opacity: 1; animation: blades-open 900ms var(--ease) forwards; }
.intro.s-logo .intro__plate { clip-path: circle(50% at 50% 50%); transition: clip-path 900ms var(--ease) 120ms; }
.intro.s-logo .intro__arc { animation: draw 900ms var(--ease) forwards; }
.intro.s-logo .intro__arc--green { animation-delay: 120ms; } .intro.s-logo .intro__arc--red { animation-delay: 240ms; }
.intro.s-name .intro__name { opacity: 1; letter-spacing: .42em; transition: opacity 900ms var(--ease-soft), letter-spacing 1.4s var(--ease); }
.intro__name { letter-spacing: .9em; }
.intro.s-tag .intro__tag span { opacity: 1; transform: none; transition: opacity 700ms var(--ease-soft), transform 900ms var(--ease); }
.intro.s-tag .intro__tag span:nth-child(2) { transition-delay: .14s; } .intro.s-tag .intro__tag span:nth-child(3) { transition-delay: .28s; }

/* ---------- Scene 05: hand over to the hero ---------- */
.intro.s-exit .intro__lockup { opacity: 0; transform: translate(-50%, -58%) scale(.88); filter: blur(6px); transition: opacity 900ms var(--ease-soft), transform 1.1s var(--ease-io), filter 900ms; }
.intro.s-exit .intro__ring { opacity: 0; transform: translate(-50%, -50%) scale(1.5); transition: opacity 1s var(--ease-soft), transform 1.3s var(--ease-io); }
.intro.s-exit .intro__grid, .intro.s-exit .intro__hud, .intro.s-exit .intro__skip { opacity: 0; transition: opacity 700ms var(--ease-soft); }
.intro.s-exit .intro__veil { opacity: 0; transition: opacity 1.1s var(--ease-soft) .2s; }
.intro__lockup { transition: none; }

/* Reduced motion / short: everything is placed without travel */
.intro-reduced .intro * { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }

/* ---------- Header + hero entrance ---------- */
.js:not(.hero-in) .site-header { opacity: 0; translate: 0 -24px; }
.hero-in .site-header { opacity: 1; translate: none; transition: opacity .9s var(--ease-soft) .35s, translate 1.1s var(--ease) .35s, background-color 500ms var(--ease), transform 600ms var(--ease), box-shadow 500ms; }
.js:not(.hero-in) .hero__scrim, .js:not(.hero-in) .hero__hud { opacity: 0; }
.hero__scrim { transition: opacity 1.6s var(--ease-soft); }
.hero-in .hero__hud { opacity: 1; }
.hero-in .hud-chip--a { animation: hud-cycle 9s var(--ease-soft) 1.2s infinite; }
.hero-in .hud-chip--b { animation: hud-cycle 9s var(--ease-soft) 4.2s infinite; }
.hero-in .hud-chip--c { animation: hud-cycle 9s var(--ease-soft) 7.2s infinite; }

.w { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.w > span { display: inline-block; transform-origin: 0 100%; }
.js .hero [data-split] .w > span { transform: translateY(112%) rotate(5deg); }
.js .hero__status, .js .hero [data-hero-fade] { opacity: 0; transform: translateY(22px); }
.hero-in .hero [data-split] .w > span { transform: none; transition: transform 1.3s var(--ease); transition-delay: calc(120ms + var(--wi) * 70ms); }
.hero-in .hero__status { opacity: 1; transform: none; transition: opacity .8s var(--ease-soft), transform 1s var(--ease); }
.hero-in .hero [data-hero-fade] { opacity: 1; transform: none; transition: opacity 1s var(--ease-soft) .6s, transform 1.2s var(--ease) .6s; }
.hero-in .hero .hero__actions[data-hero-fade] { transition-delay: .78s; }
.hero-in .hero .hero__foot[data-hero-fade] { transition-delay: 1.1s; }
.hero__copy { transform: translateY(calc(var(--leave, 0) * -80px)); opacity: calc(1 - var(--leave, 0) * 1.3); }

/* ---------- Headings: words rise from a mask ---------- */
.js [data-split]:not(.hero__title) .w > span { transform: translateY(108%) rotate(4deg); }
.js [data-split].is-in:not(.hero__title) .w > span { transform: none; transition: transform 1.2s var(--ease); transition-delay: calc(var(--wi) * 55ms); }

/* ---------- About: statement lit by scroll, stats draw ---------- */
.js [data-lit] .lw { opacity: clamp(.16, calc(var(--p, 0) * var(--n) - var(--i)), 1); transition: opacity 160ms linear; }
.js [data-stats] .stat::after { transform: scaleX(0); }
.js [data-stats] .stat dd, .js [data-stats] .stat dt { opacity: 0; transform: translateY(30px); }
.js [data-stats].is-in .stat::after { transform: scaleX(1); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i) * 120ms); }
.js [data-stats].is-in .stat dd, .js [data-stats].is-in .stat dt { opacity: 1; transform: none; transition: opacity .9s var(--ease-soft), transform 1.2s var(--ease); transition-delay: calc(var(--i) * 120ms); }
.js [data-stats].is-in .stat dt { transition-delay: calc(var(--i) * 120ms + 120ms); }

/* ---------- Reveal: rise (stagger children) ---------- */
.js [data-reveal="rise"] > * { opacity: 0; transform: translateY(28px); }
.js [data-reveal="rise"].is-in > * { opacity: 1; transform: none; transition: opacity .9s var(--ease-soft), transform 1.1s var(--ease); }
.js [data-reveal="rise"].is-in > :nth-child(2) { transition-delay: .08s; } .js [data-reveal="rise"].is-in > :nth-child(3) { transition-delay: .16s; }
.js [data-reveal="rise"].is-in > :nth-child(4) { transition-delay: .24s; } .js [data-reveal="rise"].is-in > :nth-child(n+5) { transition-delay: .32s; }

/* ---------- Reveal: mask (frame wipes up, content settles) ---------- */
.js [data-reveal="mask"] { clip-path: inset(100% 0 0 0 round var(--r3)); }
.js [data-reveal="mask"] > .demo { transform: scale(1.14); }
.js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0 round var(--r3)); transition: clip-path 1.4s var(--ease-io); }
.js [data-reveal="mask"].is-in > .demo { transform: none; transition: transform 1.8s var(--ease); }

/* ---------- Reveal: lift (CCTV console) ---------- */
.js [data-reveal="lift"] { opacity: 0; transform: translateY(70px) scale(.96); }
.js [data-reveal="lift"].is-in { opacity: 1; transform: none; transition: opacity 1.1s var(--ease-soft), transform 1.5s var(--ease); }

/* ---------- Index rows slide in ---------- */
.js [data-index] > li, .js .more__list > li { opacity: 0; transform: translateX(-34px); }
.js [data-index].is-in > li, .js .more__list.is-in > li { opacity: 1; transform: none; transition: opacity .8s var(--ease-soft), transform 1s var(--ease), background 500ms, padding 500ms var(--ease); transition-delay: calc(var(--si, 0) * 60ms); }

/* ---------- Networking steps ---------- */
.js .step { opacity: .3; transition: opacity 600ms var(--ease-soft); }
.js .step.is-active { opacity: 1; }
.js .step .caps li { opacity: 0; transform: translateX(-12px); transition: opacity 600ms var(--ease-soft), transform 700ms var(--ease); }
.js .step.is-active .caps li, .js .step.was-active .caps li { opacity: 1; transform: none; }
.js .step.is-active .caps li:nth-child(2) { transition-delay: .1s; }

/* ---------- Projects: image wipes in when the card arrives ---------- */
.js .project .project__media { clip-path: inset(0 100% 0 0); }
.js .project.is-in .project__media { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--ease-io); }
.js .project .project__body > * { opacity: 0; transform: translateY(18px); }
.js .project.is-in .project__body > * { opacity: 1; transform: none; transition: opacity .8s var(--ease-soft) .35s, transform 1s var(--ease) .35s; }

/* ---------- Credentials ---------- */
.js [data-seals] .cred { opacity: 0; transform: translateY(24px); }
.js [data-seals] .seal { transform: scale(.6) rotate(-90deg); }
.js [data-seals].is-in .cred { opacity: 1; transform: none; transition: opacity .8s var(--ease-soft), transform 1s var(--ease), box-shadow 600ms var(--ease); transition-delay: calc(var(--i) * 80ms); }
.js [data-seals].is-in .seal { transform: none; transition: transform 1.3s var(--ease); transition-delay: calc(var(--i) * 80ms + 100ms); }

/* ---------- Contact + footer ---------- */
.js .contact .form { opacity: 0; transform: translateY(60px); }
.js .contact .form.is-in { opacity: 1; transform: none; transition: opacity 1.1s var(--ease-soft), transform 1.3s var(--ease); }
.js .contact__lines li { opacity: 0; transform: translateX(-18px); }
.js .contact__lines.is-in li { opacity: 1; transform: none; transition: opacity .8s var(--ease-soft), transform .9s var(--ease); transition-delay: calc(var(--li, 0) * 90ms); }
.js .footer__words span { transform: translateY(50%); opacity: 0; }
.js .footer__words.is-in span { transform: none; opacity: 1; transition: transform 1.3s var(--ease), opacity 1s var(--ease-soft), color 600ms; }
.js .footer__words.is-in span:nth-child(2) { transition-delay: .12s, .12s, 0s; } .js .footer__words.is-in span:nth-child(3) { transition-delay: .24s, .24s, 0s; }
.is-in .footer__net path, .footer.is-in .footer__net path { animation: draw 3.2s var(--ease) forwards; }
.footer.is-in .footer__net path:nth-child(2) { animation-delay: .3s; } .footer.is-in .footer__net path:nth-child(3) { animation-delay: .6s; }

/* ---------- Ticker ---------- */
.ticker__track { animation: ticker 90s linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }

/* ---------- CCTV scan states (data-stage on .cctv) — unchanged ---------- */
/* ---------- CCTV scan states (data-stage on .cctv) ---------- */
.cctv[data-stage]:not([data-stage="idle"]) .cam__hint { opacity: 0; animation: none; transition: opacity 200ms; }
.cctv:is([data-stage="init"], [data-stage="scan"], [data-stage="analyze"]) .cctv__pulses span { animation: wave-lg 1.8s var(--ease) infinite; }
.cctv .cctv__pulses span:nth-child(2) { animation-delay: .6s !important; } .cctv .cctv__pulses span:nth-child(3) { animation-delay: 1.2s !important; }
.cctv[data-stage="init"] .cam__lens { animation: lens-zoom 900ms var(--ease) both; }
.cctv:is([data-stage="init"], [data-stage="scan"], [data-stage="analyze"]) .cam__iris { transform: scale(.55); }
.cctv:is([data-stage="init"], [data-stage="scan"], [data-stage="analyze"]) .cam__ir circle { fill: #FF5A3C; filter: drop-shadow(0 0 3px #FF5A3C); }
.cctv:is([data-stage="init"], [data-stage="scan"], [data-stage="analyze"]) .cam__led { fill: var(--red); animation: blink .5s steps(2) infinite; }
.cctv:is([data-stage="init"], [data-stage="scan"], [data-stage="analyze"]) .cam__focus { opacity: 1; animation: spin 2s linear infinite; }
.cctv:is([data-stage="init"], [data-stage="scan"], [data-stage="analyze"]) .cam__glow { opacity: 1; }
.cctv:not([data-stage="idle"]):not(:has(.cam:hover)) .plan__cone { opacity: .12; }
.cctv[data-stage="scan"] .plan__beam { opacity: 1; animation: beam-x 1.3s linear infinite; }
.cctv:is([data-stage="analyze"], [data-stage="secure"]) .zone__br { stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--ease), stroke 400ms; transition-delay: calc(var(--z) * 180ms); }
.cctv[data-stage="analyze"] .zone__dot { fill: var(--gold); animation: blink .6s steps(2) infinite; }
.cctv[data-stage="analyze"] .zone__ring { stroke: var(--gold); animation: wave 1.2s var(--ease) infinite; animation-delay: calc(var(--z) * 180ms); }
.cctv[data-stage="secure"] .zone__br { stroke: var(--green); }
.cctv[data-stage="secure"] .zone__dot { fill: var(--green); }
.cctv[data-stage="secure"] .zone__ring { animation: wave 1.6s var(--ease) 1 both; animation-delay: calc(var(--z) * 120ms); }
.cctv[data-stage="secure"] .zone__txt { opacity: 1; transition: opacity 500ms; transition-delay: calc(var(--z) * 120ms); }
.cctv[data-stage="secure"] .plan__ok { animation: ok-flash 2.2s var(--ease) forwards; }   /* shows, then clears so every zone label stays readable */
.cctv[data-stage="secure"] .ok__ring { animation: draw 900ms var(--ease) forwards; }
.cctv[data-stage="secure"] .ok__tick { animation: draw 500ms var(--ease) 500ms forwards; }
.cctv[data-stage="secure"] .cctv__state { color: var(--green); }
.cctv[data-stage="secure"] .cctv__screen { box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(96,171,86,.5), 0 0 60px -20px rgba(96,171,86,.6); transition: box-shadow 600ms; }

/* ---------- Keyframes ---------- */
@keyframes tab-progress { to { transform: scaleX(1); } }
@keyframes ok-flash   { 0% { opacity: 0; transform: scale(.6); } 14% { opacity: 1; transform: scale(1); } 72% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes draw       { to { stroke-dashoffset: 0; } }
@keyframes pop        { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes spin       { to { transform: rotate(360deg); } }
@keyframes wave       { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }
@keyframes wave-sm    { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes wave-lg    { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes port       { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: .9; transform: scale(1.3); } }
@keyframes dot-ping   { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2); } }
@keyframes blink      { 50% { opacity: .25; } }
@keyframes dash       { to { stroke-dashoffset: -20; } }
@keyframes dash-fast  { to { stroke-dashoffset: -24; } }
@keyframes beam-x     { from { transform: translateX(0); } to { transform: translateX(700px); } }
@keyframes beam-y     { from { top: 28%; } to { top: 86%; } }
@keyframes print-draw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
@keyframes lens-zoom  { 0% { transform: scale(1); } 45% { transform: scale(1.2); } 100% { transform: scale(1.08); } }
@keyframes level      { from { height: 20%; } to { height: 100%; } }
@keyframes nfc        { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pad-scan   { from { transform: translateY(0); } to { transform: translateY(47px); } }
@keyframes smoke-rise { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(12px, -170px) scale(2.6); } }
@keyframes strobe     { 0% { opacity: .9; } 50% { opacity: 0; } }
@keyframes wash       { 50% { opacity: .1; } }
@keyframes smoke      { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(10px, -150px) scale(2.2); } }
@keyframes alert      { 50% { background: rgba(241,94,60,.5); } }
@keyframes sweep      { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes scan-y     { from { transform: translateY(-100%); } to { transform: translateY(440%); } }
@keyframes beams      { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes light-drift{ from { transform: translate(0, 0) scale(1); } to { transform: translate(-8vw, 6vh) scale(1.15); } }
@keyframes ticker     { to { transform: translateX(-50%); } }
@keyframes scroll-line{ from { top: -40%; } to { top: 100%; } }
@keyframes hint-bob   { 50% { transform: translateY(-4px); } }
@keyframes arrow-loop { 0% { transform: none; } 45% { transform: translateX(10px); opacity: 0; } 46% { transform: translateX(-10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes modal-in   { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fade-in    { from { opacity: 0; } }
@keyframes spin-c     { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes fb-spin    { to { transform: rotate(360deg); } }
@keyframes track-breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(.82) rotate(45deg); } }
@keyframes hud-cycle  { 0% { opacity: 0; transform: translateY(6px); } 6%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes blades-open { 0% { transform: rotate(0deg) scale(1); opacity: 1; } 100% { transform: rotate(-70deg) scale(1.35); opacity: 0; } }
@keyframes flash-core { 0% { opacity: 0; transform: scale(1); } 18% { opacity: 1; transform: scale(60); } 100% { opacity: 0; transform: scale(260); } }
@keyframes flash-streak { 0% { opacity: 0; width: 0; } 20% { opacity: 1; width: 90vw; } 100% { opacity: 0; width: 180vw; } }
@keyframes flash-ring { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(70); } }
@keyframes plate-in   { 0% { transform: scale(1.35); filter: brightness(2.2) blur(6px); } 100% { transform: none; filter: none; } }
@keyframes blip       { 0% { transform: translateX(-8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes bar-shine  { from { left: -30%; } to { left: 100%; } }
@keyframes sheen      { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .ticker__track { animation: none !important; } .ticker { overflow-x: auto; } .ticker__list[aria-hidden="true"] { display: none; }
  .js [data-lit] .lw { opacity: 1; }
  .hero__copy { transform: none !important; opacity: 1 !important; }
  .btn { transform: none !important; }
  .hud-chip { opacity: 1 !important; animation: none !important; }
  .hud-chip--b, .hud-chip--c { display: none; }
  .msts-net .link { stroke-dashoffset: 0 !important; } .msts-net .node, .msts-net .node-label { opacity: 1 !important; transform: none !important; }
  .msts-net .node-pulse, .msts-net .port, .bg-scan, .temple__scan, .ic__packet, .track { display: none; }
  .temple__frame { clip-path: none !important; } .temple__frame img { transform: none !important; }
  .temple__cover, .temple__chips { opacity: 1 !important; }
  .footer__net path { stroke-dashoffset: 0 !important; }
}

/* Deep-link arrival: the hero is off screen, so the veil stays until the logo exits */
.intro-quick .intro__veil { opacity: 1 !important; }
.intro-quick .intro.s-exit .intro__veil { opacity: 0 !important; transition: opacity .8s var(--ease-soft) !important; }

/* ---------- Page effects ---------- */
.js .fx-reveal { opacity: 0; transform: translateY(18px); }
.js .fx-reveal.is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-soft), transform 1.2s var(--ease); }
.js .fx-reveal .eyebrow__n::after, .js .chapter__kicker.fx-reveal .chapter__n { transition: transform 1.1s var(--ease) .2s; }
.js .fx-reveal:not(.is-in) .eyebrow__n::after { transform: scaleX(0); }
.eyebrow__n::after { transform-origin: 0 50%; }
.js .chapter__kicker.fx-reveal:not(.is-in) .chapter__n { transform: scale(.6) rotate(-20deg); }

/* Hero: light passes across "Connected Protection." */
.hero__title em .w > span { background: linear-gradient(100deg, var(--blue) 0%, var(--blue) 42%, #EAF7FD 50%, var(--blue) 58%, var(--blue) 100%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-in .hero__title em .w > span { animation: shimmer 7s var(--ease-io) 2.2s infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 35%, 100% { background-position: 0% 0; } }

@media (prefers-reduced-motion: reduce) {
  .js .fx-reveal { opacity: 1 !important; transform: none !important; }
  .band__track { transform: none !important; }
  [data-parallax] { translate: none !important; }
}
@media (max-width: 1240px) { .rail { display: none; } }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

/* Solar-system intro: the space scene replaces the grid and scanning ring */
.has-3d .intro__grid, .has-3d .intro__ring { display: none; }

/* Cinematic framing: letterbox bars, focus pull on the 3D stage */
.intro.s-grid .intro__bars i { transform: scaleY(1); }
.intro.s-flash .intro__bars i, .intro.s-exit .intro__bars i { transform: scaleY(0); transition-duration: .9s; }
.intro.s-flash .intro__caption { opacity: 0; transition: opacity .3s; }
.intro.s-exit .intro__vignette { opacity: 0; transition: opacity 1s var(--ease-soft); }
.intro-on .hero__canvas { transition: filter 2.2s var(--ease-soft); }
.intro-focus .hero__canvas { filter: blur(16px) brightness(.55); }

/* ---------- Live visuals ---------- */
@keyframes grain     { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -3%); } 60% { transform: translate(-3%, -6%); } 80% { transform: translate(6%, 5%); } 100% { transform: translate(0, 0); } }
@keyframes sweep-y   { from { top: -18%; } to { top: 100%; } }
@keyframes det-track { from { translate: 0 0; } to { translate: 6px -4px; } }
@keyframes kenburns  { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(123,211,107,.6); } 100% { box-shadow: 0 0 0 8px rgba(123,211,107,0); } }
@keyframes live-pulse-red { 0% { box-shadow: 0 0 0 0 rgba(255,59,48,.6); } 100% { box-shadow: 0 0 0 8px rgba(255,59,48,0); } }
@keyframes eq        { from { height: 4px; } to { height: 18px; } }
@keyframes bar-flick { 50% { opacity: 1; } }
@keyframes ring-out  { 0% { opacity: .8; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes field-scan { 0% { opacity: 1; left: -22%; } 100% { opacity: 1; left: 100%; } }
@keyframes axs-wave { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes axs-scan { from { transform: translateY(8px); } to { transform: translateY(88px); } }
@keyframes form-sweep { from { background-position: 0 -30%; } to { background-position: 0 130%; } }
@media (prefers-reduced-motion: reduce) {
  .feed__grain, .live img, .live__rings i, .live__eq i, .det, .axs__wave, .axs__scan, .sv__led, .sv__label i { animation: none !important; }
}