/* ============================================================
   Megavolt — MOTION LAYER
   Scroll animations, power-up intro, page transitions, the
   process track, the technicians scene and form states.
   Everything here is progressive: if JS / GSAP doesn't load,
   content still shows (see the html.js / motion-off gates).
   ============================================================ */

/* hide animated elements only while the motion engine is booting */
html.js:not(.motion-off) [data-reveal],
html.js:not(.motion-off) [data-split] { opacity: 0; }
html.js.motion-on [data-reveal],
html.js.motion-on [data-split] { opacity: 1; }

/* ---------- scroll "charge" bar ---------- */
.charge-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 900;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand-blue), var(--elec), var(--amber));
  box-shadow: 0 0 12px rgba(93,180,255,.8);
  pointer-events: none;
}

/* ---------- intro / power-up preloader ---------- */
#intro { display: none; }
html.show-intro #intro {
  display: block; position: fixed; inset: 0; z-index: 10000; cursor: pointer;
}
html.show-intro body { overflow: hidden; }
#intro .intro-half {
  position: absolute; left: 0; right: 0; height: 50.5%; background: #08090b;
  transition: transform .9s cubic-bezier(.77,0,.18,1);
}
#intro .intro-top { top: 0; }
#intro .intro-bot { bottom: 0; }
#intro .intro-core {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px;
  transition: opacity .35s ease, transform .5s ease;
}
#intro .intro-mark {
  width: min(230px, 52vw); height: auto; opacity: 0;
  animation: neon-on 1.1s steps(1) .1s forwards;
  filter: drop-shadow(0 0 22px rgba(31,79,214,.65));
}
#intro .intro-meter { width: min(260px, 64vw); height: 3px; background: #1a1e25; border-radius: 3px; overflow: hidden; }
#intro .intro-meter i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand-blue), var(--elec), var(--amber));
  box-shadow: 0 0 12px var(--elec);
  animation: charge 1.35s cubic-bezier(.6,.05,.3,1) .25s forwards;
}
#intro .intro-label { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .74rem; letter-spacing: .32em; color: var(--text-dim); }
#intro .intro-label b { color: var(--elec); font-weight: 500; }
#intro .intro-flash {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, var(--elec-soft), #fff, var(--elec-soft), transparent);
  box-shadow: 0 0 24px 4px rgba(93,180,255,.8); transform: scaleX(0); opacity: 0;
}
#intro.done .intro-core { opacity: 0; transform: scale(.94); }
#intro.done .intro-flash { animation: split-flash .55s ease forwards; }
#intro.open .intro-top { transform: translateY(-101%); }
#intro.open .intro-bot { transform: translateY(101%); }
@keyframes charge { 0% { width: 0 } 40% { width: 46% } 55% { width: 52% } 100% { width: 100% } }
@keyframes neon-on {
  0% { opacity: 0 } 8% { opacity: .9 } 12% { opacity: .1 } 20% { opacity: 1 } 24% { opacity: .2 }
  34% { opacity: 1 } 38% { opacity: .55 } 46%, 100% { opacity: 1 }
}
@keyframes split-flash { 0% { transform: scaleX(0); opacity: 1 } 60% { transform: scaleX(1); opacity: 1 } 100% { transform: scaleX(1); opacity: 0 } }

/* ---------- page-to-page wipe ---------- */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  background: #08090b; transform: scaleY(0); transform-origin: 50% 100%;
}
html.leaving body::after { animation: wipe-in .34s cubic-bezier(.7,0,.3,1) forwards; }
html.arriving body::after { transform: scaleY(1); transform-origin: 50% 0; animation: wipe-out .55s cubic-bezier(.7,0,.3,1) .05s forwards; }
@keyframes wipe-in  { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes wipe-out { from { transform: scaleY(1) } to { transform: scaleY(0) } }

/* ---------- split-text headings ---------- */
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.split-i { display: inline-block; will-change: transform; }

/* electric shimmer on the hero emphasis */
.zap .split-i, .zap.no-split {
  background: linear-gradient(100deg, var(--amber) 0%, var(--amber) 38%, #fff3d6 47%, var(--elec-soft) 52%, var(--amber) 62%, var(--amber) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: zap-sweep 4.5s ease-in-out 1.5s infinite;
}
@keyframes zap-sweep { 0%, 50% { background-position: 100% 0 } 80%, 100% { background-position: 0 0 } }

/* decoding eyebrow text */
.eyebrow .scramble-char { color: var(--elec); }

/* ---------- marquee ---------- */
.marquee {
  position: relative; z-index: 1; overflow: hidden; padding: 22px 0;
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20,23,28,.7), rgba(13,15,18,.7));
}
.marquee + .marquee { border-top: 0; }
.marquee-row { display: flex; width: max-content; will-change: transform; }
.marquee-row span {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.6rem, 4.2vw, 3.4rem); letter-spacing: -.01em; white-space: nowrap;
  padding-right: .6em; display: inline-flex; align-items: center; gap: .6em; line-height: 1.1;
}
.marquee-row span::after {
  content: ''; width: .55em; height: .8em; background: var(--amber);
  clip-path: polygon(55% 0, 0 58%, 42% 58%, 30% 100%, 100% 38%, 58% 38%);
}
.marquee.outline .marquee-row span { color: transparent; -webkit-text-stroke: 1px #3d4652; }
.marquee.outline .marquee-row span::after { background: var(--elec); opacity: .7; }

/* ---------- big scroll-scrubbed statement ---------- */
.statement { padding: 130px 0 110px; }
.statement-text {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(1.75rem, 4.3vw, 3.5rem); line-height: 1.18; max-width: 24ch;
}
html.motion-on .statement-text .sw { color: #262c34; transition: color .25s, text-shadow .25s; }
html.motion-on .statement-text .sw.lit { color: var(--text); }
html.motion-on .statement-text .sw.hl.lit { color: var(--amber); text-shadow: 0 0 26px rgba(245,166,35,.4); }
.statement-text .hl { color: var(--amber); }
.statement-sub { margin-top: 34px; }

/* ---------- process (horizontal pinned on desktop) ---------- */
.process { padding: 0; overflow: hidden; }
.process-pin { padding: 96px 0 84px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.process-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 46px; flex-wrap: wrap; width: 100%; }
.process-head h2 { margin-top: 16px; max-width: 17ch; }
.process-count { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--text-dim); font-size: .9rem; letter-spacing: .2em; }
.process-count b { color: var(--amber); font-weight: 500; }
.process-track {
  display: flex; gap: 26px; width: max-content;
  padding: 0 max(28px, calc((100vw - var(--maxw)) / 2 + 28px));
  will-change: transform;
}
.step {
  position: relative; flex: 0 0 min(400px, 82vw); min-height: 340px;
  background: linear-gradient(160deg, #1a1f26, #12151a); border: 1px solid var(--line);
  border-radius: 18px; padding: 34px 32px; overflow: hidden;
  display: flex; flex-direction: column; transition: border-color .4s, box-shadow .4s;
}
.step-num {
  position: absolute; right: 18px; top: -14px; font-family: var(--font-display); font-weight: 700;
  font-size: 8.5rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px #2b323c; pointer-events: none;
  transition: -webkit-text-stroke-color .4s;
}
.step .ic {
  width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: rgba(93,180,255,.1); color: var(--elec); margin-bottom: auto;
}
.step .ic svg { width: 28px; height: 28px; }
.step h3 { font-size: 1.55rem; margin: 40px 0 10px; }
.step p { color: var(--text-dim); font-size: .99rem; }
.step.is-live { border-color: rgba(93,180,255,.55); box-shadow: 0 0 0 1px rgba(93,180,255,.15), 0 24px 60px -24px rgba(93,180,255,.45); }
.step.is-live .step-num { -webkit-text-stroke-color: rgba(93,180,255,.6); }
.process-rail { position: relative; height: 2px; background: var(--line); margin: 44px max(28px, calc((100vw - var(--maxw)) / 2 + 28px)) 0; }
.process-rail i {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand-blue), var(--elec), var(--amber));
  box-shadow: 0 0 14px rgba(93,180,255,.8);
}
@media (max-width: 900px) {
  .process-pin { min-height: 0; padding: 84px 0; }
  .process-track { flex-direction: column; width: auto; padding: 0 28px; }
  .step { flex-basis: auto; min-height: 0; }
  .step h3 { margin-top: 26px; }
  .step-num { font-size: 6rem; top: -8px; }
  .process-rail { display: none; }
}

/* ---------- cursor spotlight + tilt on cards ---------- */
.card, .step, .cta-band { --mx: 50%; --my: 50%; }
.card { position: relative; will-change: transform; }
.team-card { position: relative; }
.card::before, .step::before, .cta-band::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(93,180,255,.14), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
.card:hover::before, .step:hover::before, .cta-band:hover::before { opacity: 1; }
.card > *, .step > * { position: relative; z-index: 1; }
.step > .step-num { position: absolute; }
.cta-band { position: relative; overflow: hidden; }
.cta-band > * { position: relative; z-index: 1; }
/* travelling electric border on the CTA */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cta-band::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--ang), transparent 0 68%, var(--brand-blue) 78%, var(--elec) 86%, #fff 89%, var(--amber) 93%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-ang 5s linear infinite;
}
@keyframes spin-ang { to { --ang: 360deg; } }

/* stat glow */
.stat .num { text-shadow: 0 0 28px rgba(245,166,35,.25); font-variant-numeric: tabular-nums; }

/* ---------- hero visual + PCB stages ---------- */
.hero-art, .feature-art { perspective: 1100px; }
.tilt-inner { width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.feature-art .tilt-inner { transform-origin: 50% 60%; }

/* ---------- about: technicians scene ---------- */
.tech-scene {
  background: radial-gradient(120% 90% at 50% 18%, #1b222c 0%, #11151a 60%, #0d0f12 100%) !important;
}
.tech-scene svg { width: 100%; height: 100%; display: block; }

/* ---------- repair form ---------- */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-size: .95rem; border: 1px solid; }
.form-status.err { display: block; border-color: rgba(255,107,107,.45); background: rgba(255,107,107,.08); color: #ffd2d2; }
.form-status a { color: var(--amber); text-decoration: underline; }
.form-legal { color: var(--text-dim); font-size: .82rem; text-align: center; margin-top: 10px; }
.form-legal a { color: var(--text); text-decoration: underline; text-decoration-color: #3a424d; }

/* ---------- map (OpenFreeMap via MapLibre) themed to match the site ---------- */
#map.maplibregl-map { background: #14171c; font-family: var(--font-body); }
#map .maplibregl-canvas { filter: brightness(1.45) contrast(1.08); }
#map .mv-pin { width: 22px; height: 22px; cursor: pointer; }
#map .maplibregl-popup-content {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  padding: 12px 30px 12px 14px; font-size: .92rem; line-height: 1.5;
}
#map .maplibregl-popup-content strong { font-family: var(--font-display); color: var(--amber); }
#map .maplibregl-popup-content a { color: var(--elec); }
#map .maplibregl-popup-close-button { color: var(--text-dim); font-size: 18px; padding: 2px 8px; }
#map .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--bg-card); }
#map .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--bg-card); }
#map .maplibregl-ctrl-group { background: var(--bg-card); border: 1px solid var(--line); box-shadow: none; }
#map .maplibregl-ctrl-group button + button { border-top-color: var(--line); }
#map .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(.85); }
#map .maplibregl-ctrl-top-left { margin: 8px 0 0 8px; }
#map .maplibregl-ctrl-attrib { background: rgba(13,15,18,.55) !important; font-size: 9px; }
#map .maplibregl-ctrl-attrib a { color: var(--text-dim); }
#map .maplibregl-ctrl-attrib-button { filter: invert(1); background-color: transparent; }

/* ============================================================
   "How it works" — little animated scenes inside each step card.
   Each loops every 7s and only plays while on screen (script.js
   adds .run). Base styles = the finished frame, so reduced-motion
   visitors still see a complete picture.
   ============================================================ */
.step .step-scene {
  height: 132px; margin: -8px -6px 0; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #1b222c 0%, #12161b 70%);
  border: 1px solid #222932;
}
.step .step-scene svg { width: 100%; height: 100%; display: block; }
.step h3 { margin-top: 26px; }
.step-num { top: auto; bottom: -26px; right: 14px; }
.step-scene * { transform-box: fill-box; }
.step-scene .pop { transform-origin: center; }
.step-scene .an {
  animation-duration: 7s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;
  animation-play-state: paused;
}
.step-scene.run .an { animation-play-state: running; }
.step-scene .leg-a, .step-scene .leg-b { transform-origin: 50% 0; }

/* shared */
@keyframes sc-pop-62 { 0%, 62% { transform: scale(0); opacity: 0 } 68% { transform: scale(1.12); opacity: 1 } 72%, 92% { transform: scale(1); opacity: 1 } 100% { transform: scale(1); opacity: 0 } }
@keyframes sc-pop-52 { 0%, 52% { transform: scale(0); opacity: 0 } 58% { transform: scale(1.12); opacity: 1 } 62%, 92% { transform: scale(1); opacity: 1 } 100% { transform: scale(1); opacity: 0 } }

/* 01 — book in */
.sc1 .sc1-cust { animation-name: sc1-cust; }
.sc1 .sc1-box { animation-name: sc1-box; }
.sc1 .sc1-staff { animation-name: sc1-staff; }
.sc1 .sc1-tag { animation-name: sc-pop-62; }
.sc1 .walk .leg-a { animation-name: sc1-legA; }
.sc1 .walk .leg-b { animation-name: sc1-legB; }
@keyframes sc1-cust { 0% { transform: translateX(-80px); opacity: 0 } 4% { opacity: 1 } 26%, 92% { transform: translateX(0); opacity: 1 } 100% { transform: translateX(0); opacity: 0 } }
@keyframes sc1-box { 0% { transform: translate(-124px, 4px); opacity: 0 } 4% { opacity: 1 } 26% { transform: translate(-44px, 4px) } 36% { transform: translate(-34px, -7px) } 46% { transform: translate(-20px, 0) } 60%, 92% { transform: translate(0, 0); opacity: 1 } 100% { transform: translate(0, 0); opacity: 0 } }
@keyframes sc1-staff { 0%, 44% { transform: translateX(0) } 52% { transform: translateX(-3px) } 62%, 100% { transform: translateX(0) } }
@keyframes sc1-legA { 0%, 8%, 16%, 24% { transform: rotate(16deg) } 4%, 12%, 20% { transform: rotate(-16deg) } 27%, 100% { transform: rotate(0) } }
@keyframes sc1-legB { 0%, 8%, 16%, 24% { transform: rotate(-16deg) } 4%, 12%, 20% { transform: rotate(16deg) } 27%, 100% { transform: rotate(0) } }

/* 02 — assess & diagnose */
.sc2 .sc2-scan { animation-name: sc2-scan; opacity: 0; }
.sc2 .sc2-arm { animation-name: sc2-arm; transform-box: view-box; transform-origin: 173px 58px; }
.sc2 .sc2-tech { animation-name: sc2-tech; }
.sc2 .sc2-tag { animation-name: sc-pop-52; }
.sc2 .sc2-led { animation-name: sc2-blink; }
.sc2 .sc2-code { animation-name: sc2-code; }
@keyframes sc2-scan { 0% { transform: translateY(0); opacity: 0 } 5% { opacity: .9 } 22% { transform: translateY(38px); opacity: .9 } 24% { opacity: 0; transform: translateY(38px) } 26% { transform: translateY(0); opacity: 0 } 28% { opacity: .9 } 46% { transform: translateY(38px); opacity: .9 } 50%, 100% { transform: translateY(38px); opacity: 0 } }
@keyframes sc2-arm { 0%, 100% { transform: rotate(0) } 12% { transform: rotate(-10deg) } 24% { transform: rotate(8deg) } 36% { transform: rotate(-12deg) } 48%, 90% { transform: rotate(-4deg) } }
@keyframes sc2-tech { 0%, 100% { transform: translateX(0) } 18% { transform: translateX(-10px) } 34% { transform: translateX(-22px) } 50%, 90% { transform: translateX(-14px) } }
@keyframes sc2-blink { 0%, 49%, 100% { opacity: 1 } 50%, 99% { opacity: .2 } }
@keyframes sc2-code { 0%, 52% { opacity: 1 } 54% { opacity: .2 } 56% { opacity: 1 } 58% { opacity: .2 } 60%, 100% { opacity: 1 } }

/* 03 — quote & approve */
.sc3 .sc3-l { transform-origin: 0 50%; }
.sc3 .sc3-l1 { animation-name: sc3-l1; } .sc3 .sc3-l2 { animation-name: sc3-l2; } .sc3 .sc3-l3 { animation-name: sc3-l3; }
.sc3 .sc3-l4 { animation-name: sc3-l4; } .sc3 .sc3-l5 { animation-name: sc3-l5; }
@keyframes sc3-l1 { 0% { transform: scaleX(0); opacity: 1 } 7%, 92% { transform: scaleX(1); opacity: 1 } 100% { transform: scaleX(1); opacity: 0 } }
@keyframes sc3-l2 { 0%, 7% { transform: scaleX(0); opacity: 1 } 14%, 92% { transform: scaleX(1); opacity: 1 } 100% { transform: scaleX(1); opacity: 0 } }
@keyframes sc3-l3 { 0%, 14% { transform: scaleX(0); opacity: 1 } 21%, 92% { transform: scaleX(1); opacity: 1 } 100% { transform: scaleX(1); opacity: 0 } }
@keyframes sc3-l4 { 0%, 21% { transform: scaleX(0); opacity: 1 } 28%, 92% { transform: scaleX(1); opacity: 1 } 100% { transform: scaleX(1); opacity: 0 } }
@keyframes sc3-l5 { 0%, 30% { transform: scaleX(0); opacity: 1 } 38%, 92% { transform: scaleX(1); opacity: 1 } 100% { transform: scaleX(1); opacity: 0 } }
.sc3 .sc3-msg { animation-name: sc3-msg; }
.sc3 .sc3-btn { animation-name: sc3-btn; transform-origin: center; }
.sc3 .sc3-btnbg { animation-name: sc3-btnbg; fill: #2fb866; }
.sc3 .sc3-finger { animation-name: sc3-finger; opacity: 0; }
.sc3 .sc3-ripple { animation-name: sc3-ripple; transform-origin: center; opacity: 0; }
.sc3 .sc3-stamp { animation-name: sc3-stamp; transform: rotate(-12deg); transform-origin: center; }
@keyframes sc3-msg { 0%, 38% { transform: translateY(8px); opacity: 0 } 44%, 92% { transform: translateY(0); opacity: 1 } 100% { opacity: 0 } }
@keyframes sc3-btn { 0%, 44% { transform: scale(.6); opacity: 0 } 49%, 92% { transform: scale(1); opacity: 1 } 100% { opacity: 0 } }
@keyframes sc3-btnbg { 0%, 59% { fill: #1f4fd6 } 61%, 100% { fill: #2fb866 } }
@keyframes sc3-finger { 0%, 48% { transform: translate(10px, 24px); opacity: 0 } 55% { transform: translate(0, 0); opacity: 1 } 59% { transform: translate(0, 2px); opacity: 1 } 63% { transform: translate(0, 0); opacity: 1 } 72%, 100% { transform: translate(10px, 24px); opacity: 0 } }
@keyframes sc3-ripple { 0%, 59% { transform: scale(.3); opacity: 0 } 60% { transform: scale(.4); opacity: 1 } 72%, 100% { transform: scale(2.4); opacity: 0 } }
@keyframes sc3-stamp { 0%, 64% { transform: rotate(-12deg) scale(1.9); opacity: 0 } 68% { transform: rotate(-12deg) scale(.94); opacity: 1 } 71%, 92% { transform: rotate(-12deg) scale(1); opacity: 1 } 100% { transform: rotate(-12deg) scale(1); opacity: 0 } }

/* 04 — repair & test */
.sc4 .sc4-iron { animation-name: sc4-iron; }
.sc4 .sc4-tip { animation-name: sc4-tip; transform-origin: center; }
.sc4 .sm1, .sc4 .sm2 { opacity: 0; }
.sc4 .sm1 { animation-name: sc4-smoke; }
.sc4 .sm2 { animation-name: sc4-smoke2; }
.sc4 .sc4-needle { animation-name: sc4-needle; transform: rotate(42deg); transform-origin: 50% 100%; }
.sc4 .sc4-read { animation-name: sc4-read; }
.sc4 .sc4-led { animation-name: sc4-led; fill: #4ade80; }
.sc4 .sc4-tech { animation-name: sc4-tech; }
@keyframes sc4-iron { 0%, 8%, 16%, 24%, 32%, 40% { transform: translate(0, 0) } 4%, 12%, 20%, 28%, 36% { transform: translate(.8px, 1.6px) } 46%, 94% { transform: translate(-6px, -6px) } 100% { transform: translate(0, 0) } }
@keyframes sc4-tip { 0%, 6%, 12%, 18%, 24%, 30%, 36%, 42% { opacity: 1; transform: scale(1.3) } 3%, 9%, 15%, 21%, 27%, 33%, 39% { opacity: .55; transform: scale(.9) } 46%, 100% { opacity: .35; transform: scale(1) } }
@keyframes sc4-smoke { 0% { transform: translateY(0); opacity: 0 } 8% { opacity: .5 } 20% { transform: translateY(-12px); opacity: 0 } 21% { transform: translateY(0) } 28% { opacity: .5 } 40% { transform: translateY(-12px); opacity: 0 } 100% { opacity: 0 } }
@keyframes sc4-smoke2 { 0%, 10% { transform: translateY(0); opacity: 0 } 18% { opacity: .45 } 30% { transform: translateY(-12px); opacity: 0 } 100% { opacity: 0 } }
@keyframes sc4-needle { 0%, 48% { transform: rotate(-70deg) } 66% { transform: rotate(52deg) } 71%, 92% { transform: rotate(42deg) } 100% { transform: rotate(-70deg) } }
@keyframes sc4-read { 0%, 70% { opacity: 0 } 74%, 92% { opacity: 1 } 100% { opacity: 0 } }
@keyframes sc4-led { 0%, 71% { fill: #ff5d5d } 73%, 96% { fill: #4ade80 } 100% { fill: #ff5d5d } }
@keyframes sc4-tech { 0%, 44% { transform: translateX(0) } 50%, 90% { transform: translateX(-3px) } 100% { transform: translateX(0) } }

/* 05 — back to full power */
.sc5 .sc5-cust { animation-name: sc5-cust; }
.sc5 .sc5-box { animation-name: sc5-box; }
.sc5 .walk .leg-a { animation-name: sc5-legA; }
.sc5 .walk .leg-b { animation-name: sc5-legB; }
.sc5 .sc5-win { animation-name: sc5-win; fill: #ffcb6b; filter: drop-shadow(0 0 5px rgba(255,203,107,.9)); }
.sc5 .sc5-rays { animation-name: sc5-rays; }
.sc5 .sc5-bolt { animation-name: sc-pop-62; transform-origin: center; }
@keyframes sc5-cust { 0% { transform: translateX(-80px); opacity: 0 } 5%, 22% { transform: translateX(-80px); opacity: 1 } 58%, 92% { transform: translateX(0); opacity: 1 } 100% { transform: translateX(0); opacity: 0 } }
@keyframes sc5-box { 0% { transform: translate(-136px, 0); opacity: 0 } 5%, 11% { transform: translate(-136px, 0); opacity: 1 } 16% { transform: translate(-108px, -9px) } 22% { transform: translate(-80px, 0) } 58%, 92% { transform: translate(0, 0); opacity: 1 } 100% { transform: translate(0, 0); opacity: 0 } }
@keyframes sc5-legA { 0%, 22% { transform: rotate(0) } 25%, 33%, 41%, 49%, 57% { transform: rotate(16deg) } 29%, 37%, 45%, 53% { transform: rotate(-16deg) } 59%, 100% { transform: rotate(0) } }
@keyframes sc5-legB { 0%, 22% { transform: rotate(0) } 25%, 33%, 41%, 49%, 57% { transform: rotate(-16deg) } 29%, 37%, 45%, 53% { transform: rotate(16deg) } 59%, 100% { transform: rotate(0) } }
@keyframes sc5-win { 0%, 60% { fill: #2a3038; filter: none } 62% { fill: #ffcb6b; filter: drop-shadow(0 0 5px rgba(255,203,107,.9)) } 63% { fill: #2a3038; filter: none } 65%, 96% { fill: #ffcb6b; filter: drop-shadow(0 0 5px rgba(255,203,107,.9)) } 100% { fill: #2a3038; filter: none } }
@keyframes sc5-rays { 0%, 63% { opacity: 0 } 67%, 75%, 83%, 91% { opacity: 1 } 71%, 79%, 87% { opacity: .35 } 96%, 100% { opacity: 0 } }

@media (max-width: 900px) { .step-num { bottom: -18px; } }

/* ============================================================
   Stats — small animated illustrations above each number.
   They only play while on screen (script.js adds .run); the
   base styles are a finished frame for reduced-motion visitors.
   ============================================================ */
.stat-anim { height: 100px; display: flex; justify-content: center; margin-bottom: 8px; }
.stat-anim svg { height: 100%; width: auto; max-width: 210px; overflow: visible; }
.stat-anim * { transform-box: fill-box; }
.stat-anim .an { animation-iteration-count: infinite; animation-play-state: paused; }
.stat-anim.run .an { animation-play-state: running; }

/* 300+ — inverters roll in faulty, get zapped, roll out fixed */
.st1 .st1-box { animation: st1-move 6s linear infinite; }
.st1 .st1-led { animation: st1-led 6s linear infinite; }
.st1 .st1-chk { animation: st1-chk 6s linear infinite; transform-origin: center; }
.st1 .b1 { animation-delay: 0s; }
.st1 .b2 { animation-delay: -2s; }
.st1 .b3 { animation-delay: -4s; }
.st1 .st1-box.b1 { transform: translateX(12px); }
.st1 .st1-box.b2 { transform: translateX(57px); }
.st1 .st1-box.b3 { transform: translateX(102px); }
.st1 .st1-beam { animation: st1-beam 2s linear infinite; filter: drop-shadow(0 0 3px #5db4ff); }
.st1 .st1-glow { animation: st1-beam 2s linear infinite; }
.st1 .st1-belt { animation: st1-belt .3s linear infinite; }
@keyframes st1-move { 0% { transform: translateX(-30px); opacity: 0 } 8%, 90% { opacity: 1 } 100% { transform: translateX(150px); opacity: 0 } }
@keyframes st1-led { 0%, 47% { fill: #ff5d5d } 49%, 100% { fill: #4ade80 } }
@keyframes st1-chk { 0%, 49% { transform: scale(0); opacity: 0 } 55% { transform: scale(1.25); opacity: 1 } 60%, 88% { transform: scale(1); opacity: 1 } 96%, 100% { transform: scale(1); opacity: 0 } }
@keyframes st1-beam { 0%, 36% { opacity: .15 } 40% { opacity: 1 } 43% { opacity: .35 } 46% { opacity: 1 } 54%, 100% { opacity: .15 } }
@keyframes st1-belt { to { stroke-dashoffset: -9; } }

/* 20+ years — a flip calendar counting up from 2001 */
/* the calendar itself is real HTML so its page can flip in 3D */
.st2 { position: relative; align-items: flex-end; }
.st2 .cal-sparks { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.cal { position: relative; width: 66px; height: 86px; margin-bottom: 4px; }
.cal-ring { position: absolute; top: -5px; width: 5px; height: 12px; border-radius: 3px; background: #2b323c; z-index: 4; }
.cal-ring.r1 { left: 15px; } .cal-ring.r2 { right: 15px; }
.cal-head {
  position: relative; z-index: 1; height: 20px; border-radius: 8px 8px 0 0; background: #1f4fd6;
  color: #fff; font: 700 8.5px/20px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .16em; text-align: center;
}
.cal-body { position: relative; z-index: 2; height: 66px; perspective: 240px; perspective-origin: 50% 0; }
.cal-page, .cal-face {
  position: absolute; inset: 0; border-radius: 0 0 8px 8px; background: #e8eaed;
  display: flex; align-items: center; justify-content: center;
}
.cal-page b, .cal-face b { font: 700 19px/1 'Space Grotesk', system-ui, sans-serif; color: #0d0f12; letter-spacing: -.01em; }
.cal-page::after, .cal-front::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: 11px; height: 1.5px; background: #c9ced6; }
.cal-shade { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 70%); opacity: 0; pointer-events: none; }
.cal-flip { position: absolute; inset: 0; transform-origin: 50% 0; transform-style: preserve-3d; }
.cal-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cal-front { box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.cal-back { background: linear-gradient(180deg, #d9dde3, #c4c9d1); transform: rotateX(180deg); }
.st2 .st2-spark { animation: st2-spark 2.2s ease-in-out infinite; transform-origin: center; }
.st2 .s2 { animation-delay: -.7s; }
.st2 .s3 { animation-delay: -1.4s; }
@keyframes st2-spark { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2 } 50% { transform: scale(1.1) rotate(45deg); opacity: 1 } }

/* 5+ technicians — the team does a wave */
.st3 .st3-p { animation: st3-hop 3.2s ease-in-out infinite; }
.st3 .p2 { animation-delay: .15s; } .st3 .p3 { animation-delay: .3s; }
.st3 .p4 { animation-delay: .45s; } .st3 .p5 { animation-delay: .6s; }
.st3 .st3-tool { animation: st3-tool 3.2s ease-in-out infinite; transform-origin: center; }
@keyframes st3-hop { 0%, 30%, 100% { transform: translateY(0) } 12% { transform: translateY(-8px) } 20% { transform: translateY(1px) } }
@keyframes st3-tool { 0%, 22% { transform: translateY(8px) scale(.4); opacity: 0 } 34% { transform: translateY(0) scale(1.15); opacity: 1 } 40%, 82% { transform: translateY(0) scale(1); opacity: 1 } 100% { transform: translateY(-6px) scale(1); opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  #intro, .charge-bar { display: none !important; }
  html.show-intro body { overflow: auto; }
  body::after { display: none; }
  .zap .split-i, .zap.no-split { animation: none; }
}