/* Rocket AI demo 1 — cinematic AI motion layer. Visual-only; source content/images stay intact. */

:root {
  --ai-purple: #9f7afa;
  --ai-purple-bright: #cbbcff;
  --ai-white: #ffffff;
  --ai-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Hero: living neural field ---------- */
.ai-motion-ready .hero::before {
  animation: ai-grid-drift 1.4s var(--ai-ease-out) both;
  will-change: background-position, opacity;
}

.hero__grid::before,
.hero__grid::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: var(--ai-purple-bright);
  box-shadow:
    0 0 0 7px rgba(159, 122, 250, .07),
    0 0 34px 11px rgba(136, 92, 246, .34),
    210px 86px 0 -2px rgba(255, 255, 255, .52),
    210px 86px 28px 4px rgba(136, 92, 246, .2),
    430px 240px 0 -3px rgba(203, 188, 255, .48),
    430px 240px 30px 3px rgba(136, 92, 246, .18);
}

.hero__grid::before { top: 9%; left: 48%; }
.hero__grid::after { right: 8%; bottom: 15%; transform: scale(.72) rotate(180deg); }
.ai-motion-ready .hero__grid::before { animation: ai-node-breathe 1.2s ease-in-out 1s both; }
.ai-motion-ready .hero__grid::after { animation: ai-node-breathe-alt 1.35s ease-in-out 1.35s both; }

.ai-motion-ready .hero h1 em {
  background-size: 230% 100%;
  animation: ai-title-scan 1.35s var(--ai-ease-out) .32s both;
}

/* ---------- Expert image: Human × AI → Rocket ---------- */
.hero__panel {
  --ai-tilt-x: 0deg;
  --ai-tilt-y: 0deg;
  display: flex;
  flex-direction: column;
  transform: perspective(1100px) rotateX(var(--ai-tilt-x)) rotateY(var(--ai-tilt-y));
  transform-style: preserve-3d;
  transition: transform .28s var(--ai-ease-out), box-shadow .28s ease;
}
.hero__panel-photo { order: 1; }
.hero__panel-head { order: 2; }
.hero__experts { order: 3; }
.ai-pixel-stage { order: 4; }

.hero__panel::after {
  content: '';
  position: absolute;
  z-index: 8;
  inset: 0;
  border: 1px solid rgba(203, 188, 255, .18);
  border-radius: inherit;
  pointer-events: none;
  opacity: .52;
  box-shadow: inset 0 0 24px rgba(136, 92, 246, .08);
}

.ai-motion-ready .hero__panel.is-ai-active::after {
  animation: ai-panel-breathe .9s ease-out 3.9s both;
}

.hero__panel-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0a0a0d;
}

.hero__panel-photo > img {
  position: relative;
  z-index: 0;
}

.ai-cinematic {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  color: var(--ai-purple-bright);
  mix-blend-mode: screen;
  background: linear-gradient(to bottom, transparent 38%, rgba(8, 3, 18, .26) 100%);
}

.ai-cinematic::before {
  content: '';
  position: absolute;
  z-index: 7;
  inset: 9px;
  pointer-events: none;
  opacity: .72;
  background:
    linear-gradient(var(--ai-purple-bright), var(--ai-purple-bright)) left top / 34px 2px no-repeat,
    linear-gradient(var(--ai-purple-bright), var(--ai-purple-bright)) left top / 2px 34px no-repeat,
    linear-gradient(var(--ai-purple-bright), var(--ai-purple-bright)) right top / 34px 2px no-repeat,
    linear-gradient(var(--ai-purple-bright), var(--ai-purple-bright)) right top / 2px 34px no-repeat,
    linear-gradient(var(--ai-purple-bright), var(--ai-purple-bright)) left bottom / 34px 2px no-repeat,
    linear-gradient(var(--ai-purple-bright), var(--ai-purple-bright)) left bottom / 2px 34px no-repeat,
    linear-gradient(var(--ai-purple-bright), var(--ai-purple-bright)) right bottom / 34px 2px no-repeat,
    linear-gradient(var(--ai-purple-bright), var(--ai-purple-bright)) right bottom / 2px 34px no-repeat;
  filter: drop-shadow(0 0 7px rgba(136, 92, 246, .72));
  animation: ai-frame-lock .7s steps(5, end) .22s both;
}

.hero__panel.is-ai-active .ai-cinematic {
  animation: ai-cinematic-visibility 4.55s linear both;
}

.ai-story { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.ai-pixel-field { position: absolute; inset: 0; }
.ai-pixel {
  position: absolute;
  width: var(--px-size, 5px);
  height: var(--px-size, 5px);
  left: var(--px-x);
  top: var(--px-y);
  border-radius: 1px;
  opacity: 0;
  background: var(--px-color, rgba(203, 188, 255, .8));
  box-shadow: 0 0 9px rgba(136, 92, 246, .72);
}
.hero__panel.is-ai-active .ai-pixel {
  animation: ai-pixel-materialize var(--px-duration, .8s) var(--ai-ease-out) var(--px-delay, 0s) both;
}

.ai-scanline {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: -16%;
  height: 22%;
  opacity: 0;
  background: linear-gradient(to bottom, transparent, rgba(203, 188, 255, .04) 36%, rgba(255,255,255,.68) 51%, rgba(136,92,246,.12) 57%, transparent);
  filter: drop-shadow(0 0 10px rgba(136, 92, 246, .75));
}
.hero__panel.is-ai-active .ai-scanline { animation: ai-scan-down 1.05s ease-in-out .12s both; }

.ai-hand,
.ai-finger,
.ai-circuit-branch {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
}
.ai-palm {
  opacity: 0;
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ai-palm--human { fill: rgba(255,255,255,.10); stroke: rgba(255,255,255,.92); }
.ai-palm--ai { fill: rgba(136,92,246,.18); stroke: rgba(203,188,255,.96); }
.ai-hand { stroke-width: 5.5; }
.ai-finger { stroke-width: 3.5; }
.ai-hand--human, .ai-finger--human { stroke: url(#aiHumanLine); }
.ai-hand--ai, .ai-finger--ai, .ai-circuit-branch { stroke: url(#aiCircuitLine); }
.ai-hand--ai { stroke-dasharray: 8 7; }
.ai-circuit-branch { stroke-width: 2.8; }

.hero__panel.is-ai-active .ai-hand { animation: ai-line-draw .8s ease-out .96s both; }
.hero__panel.is-ai-active .ai-palm--human { animation: ai-human-hand-in .56s var(--ai-ease-out) .92s both; }
.hero__panel.is-ai-active .ai-palm--ai { animation: ai-ai-hand-in .56s var(--ai-ease-out) .92s both; }
.hero__panel.is-ai-active .ai-finger { animation: ai-line-draw .48s ease-out 1.5s both; }
.hero__panel.is-ai-active .ai-circuit-branch { animation: ai-line-draw .45s ease-out 1.42s both; }
.hero__panel.is-ai-active .ai-handshake { animation: ai-handshake-fade .62s ease-in 2.42s both; }

.ai-circuit-node {
  fill: var(--ai-purple-bright);
  opacity: 0;
}
.hero__panel.is-ai-active .ai-circuit-node--one { animation: ai-node-pop .32s ease-out 1.48s both; }
.hero__panel.is-ai-active .ai-circuit-node--two { animation: ai-node-pop .32s ease-out 1.62s both; }

.ai-energy { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ai-energy > circle:first-child { fill: #fff; }
.ai-energy-ring { fill: none; stroke: var(--ai-purple-bright); stroke-width: 3; }
.hero__panel.is-ai-active .ai-energy { animation: ai-energy-burst .82s ease-out 1.78s both; }

.ai-flight-trail {
  fill: none;
  stroke: url(#aiCircuitLine);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  opacity: 0;
}
.hero__panel.is-ai-active .ai-flight-trail { animation: ai-trail-draw 1.15s ease-out 2.55s both; }

.ai-rocket {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 320px 319px;
}
.ai-rocket-part { stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
.ai-rocket-body { fill: rgba(136, 92, 246, .92); }
.ai-rocket-wing { fill: rgba(232, 224, 255, .94); }
.ai-rocket-window { fill: #0a0a0d; stroke: #fff; }
.ai-rocket-flame { fill: #fff; stroke: var(--ai-purple); stroke-width: 2; transform-origin: 320px 331px; }
.hero__panel.is-ai-active .ai-rocket {
  animation: ai-rocket-flight 1.82s var(--ai-ease-out) 2.02s both;
}
.hero__panel.is-ai-active .ai-rocket-body { animation: ai-rocket-body-in .34s var(--ai-ease-out) 2.02s both; }
.hero__panel.is-ai-active .ai-rocket-wing--left { animation: ai-wing-left-in .34s var(--ai-ease-out) 2.12s both; }
.hero__panel.is-ai-active .ai-rocket-wing--right { animation: ai-wing-right-in .34s var(--ai-ease-out) 2.12s both; }
.hero__panel.is-ai-active .ai-rocket-window { animation: ai-rocket-window-in .28s ease-out 2.28s both; }
.hero__panel.is-ai-active .ai-rocket-flame { animation: ai-flame .18s ease-in-out 2.58s 6 alternate both; }

.ai-motion-ready .hero__panel.is-ai-active .hero__expert {
  animation: ai-expert-confirm .48s var(--ai-ease-out) both;
}
.ai-motion-ready .hero__panel.is-ai-active .hero__expert:nth-child(1) { animation-delay: 2.66s; }
.ai-motion-ready .hero__panel.is-ai-active .hero__expert:nth-child(2) { animation-delay: 2.82s; }
.ai-motion-ready .hero__panel.is-ai-active .hero__expert:nth-child(3) { animation-delay: 2.98s; }

/* ---------- Data flow ---------- */
.whynow__arrows { position: relative; isolation: isolate; }
.ai-motion-ready .whynow__arrows.ai-in .whynow__arrow {
  animation: ai-arrow-signal .5s var(--ai-ease-out) both;
}
.ai-motion-ready .whynow__arrows.ai-in .whynow__arrow:nth-of-type(2) { animation-delay: .16s; }
.ai-motion-ready .whynow__arrows.ai-in .whynow__arrow:nth-of-type(4) { animation-delay: .32s; }
.ai-motion-ready .whynow__arrows.ai-in .whynow__arrow:nth-of-type(6) { animation-delay: .48s; }
.ai-motion-ready .whynow__arrows.ai-in .whynow__step--active {
  animation: ai-system-online .62s var(--ai-ease-out) .58s both;
}

/* ---------- Staggered section activation ---------- */
.ai-motion-ready .ai-stagger > * {
  opacity: .36;
  transform: translateY(16px) scale(.992);
  transition:
    opacity .46s var(--ai-ease-out) var(--ai-delay, 0ms),
    transform .46s var(--ai-ease-out) var(--ai-delay, 0ms),
    border-color .24s ease,
    box-shadow .24s ease;
}
.ai-motion-ready .ai-stagger.ai-in > * { opacity: 1; transform: none; }

@media (hover: hover) and (pointer: fine) {
  .ai-motion-ready .ai-stagger.ai-in > :is(.card, .session, .agent, .course, .commitment-item, .offer__step):hover {
    transform: translateY(-5px) scale(1.006);
    border-color: rgba(159, 122, 250, .58);
    box-shadow: 0 18px 42px rgba(40, 22, 78, .16), 0 0 0 1px rgba(159, 122, 250, .08);
  }
}

/* ---------- CTA energy sweep ---------- */
.btn-primary { position: relative; isolation: isolate; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -40% auto -40% -42%;
  width: 28%;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.68), transparent);
}
.btn-primary.ai-cta-live::after { animation: ai-cta-sweep .92s ease-out both; }

/* ---------- Keyframes ---------- */
@keyframes ai-grid-drift {
  0% { background-position: 0 0, 0 0; opacity: .12; }
  100% { background-position: 32px 18px, 32px 18px; opacity: .2; }
}
@keyframes ai-node-breathe {
  0%, 100% { opacity: .18; transform: translate3d(0, 0, 0) scale(.88); }
  50% { opacity: .62; transform: translate3d(9px, -5px, 0) scale(1.05); }
}
@keyframes ai-node-breathe-alt {
  0%, 100% { opacity: .12; transform: scale(.68) rotate(180deg); }
  50% { opacity: .48; transform: translate3d(-8px, 6px, 0) scale(.78) rotate(180deg); }
}
@keyframes ai-title-scan {
  0% { background-position: 100% 50%; filter: brightness(.82); }
  58% { filter: brightness(1.45) drop-shadow(0 0 12px rgba(159,122,250,.34)); }
  100% { background-position: 0 50%; filter: none; }
}
@keyframes ai-panel-breathe {
  0%, 100% { opacity: .42; box-shadow: inset 0 0 20px rgba(136,92,246,.06); }
  50% { opacity: .78; box-shadow: inset 0 0 34px rgba(136,92,246,.15), 0 0 18px rgba(136,92,246,.12); }
}
@keyframes ai-cinematic-visibility {
  0% { opacity: 0; }
  4%, 82% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ai-pixel-materialize {
  0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.2); }
  42% { opacity: .95; transform: translate3d(0, 0, 0) scale(1.35); }
  100% { opacity: 0; transform: translate3d(0, -8px, 0) scale(.55); }
}
@keyframes ai-scan-down {
  0% { opacity: 0; transform: translateY(-35%); }
  12%, 78% { opacity: .88; }
  100% { opacity: 0; transform: translateY(535%); }
}
@keyframes ai-frame-lock {
  0% { opacity: 0; transform: scale(1.05); }
  45% { opacity: .88; transform: scale(.992); }
  100% { opacity: .62; transform: none; }
}
@keyframes ai-line-draw { to { stroke-dashoffset: 0; } }
@keyframes ai-human-hand-in { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes ai-ai-hand-in { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes ai-handshake-fade { to { opacity: 0; filter: blur(2px); } }
@keyframes ai-node-pop {
  0% { opacity: 0; transform: scale(.2); }
  65% { opacity: 1; transform: scale(1.6); }
  100% { opacity: .82; transform: scale(1); }
}
@keyframes ai-energy-burst {
  0% { opacity: 0; transform: scale(.2); }
  35% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.6); }
}
@keyframes ai-trail-draw {
  0% { opacity: 0; stroke-dashoffset: 300; }
  18%, 72% { opacity: .92; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes ai-rocket-flight {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(.82); }
  18% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1.28); }
  35% { opacity: 1; transform: translate3d(0, -5px, 0) rotate(4deg) scale(1.28); }
  100% { opacity: 0; transform: translate3d(218px, -238px, 0) rotate(38deg) scale(.9); }
}
@keyframes ai-rocket-body-in { from { transform: translateY(24px) scaleY(.55); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ai-wing-left-in { from { transform: translate(18px, -5px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ai-wing-right-in { from { transform: translate(-18px, -5px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ai-rocket-window-in { from { transform: scale(.1); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ai-flame { from { transform: scaleY(.5); opacity: .45; } to { transform: scaleY(1.32); opacity: 1; } }
@keyframes ai-expert-confirm {
  0% { opacity: .45; transform: translateY(7px); }
  55% { opacity: 1; transform: translateY(-2px); filter: drop-shadow(0 0 8px rgba(159,122,250,.3)); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes ai-arrow-signal {
  0% { opacity: .22; transform: translateX(-8px); color: #8f8998; }
  70% { opacity: 1; transform: translateX(2px); color: var(--ai-purple); text-shadow: 0 0 14px rgba(136,92,246,.62); }
  100% { transform: none; }
}
@keyframes ai-system-online {
  0% { transform: scale(.94); box-shadow: none; }
  62% { transform: scale(1.035); box-shadow: 0 0 0 8px rgba(136,92,246,.09), 0 16px 38px rgba(136,92,246,.34); }
  100% { transform: none; }
}
@keyframes ai-cta-sweep {
  0% { left: -42%; opacity: 0; }
  18% { opacity: .82; }
  100% { left: 116%; opacity: 0; }
}

/* ---------- Responsive / accessibility ---------- */
@media (max-width: 940px) {
  .hero__grid::before, .hero__grid::after { display: none; }
  .hero__panel { transform: none !important; }
}

@media (max-width: 620px) {
  .ai-hand { stroke-width: 5; }
  .ai-finger, .ai-circuit-branch { stroke-width: 3.2; }
  .ai-rocket { transform-origin: 320px 319px; }
  .ai-motion-ready .ai-stagger > * { transform: translateY(11px); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-cinematic, .ai-pixel-field, .ai-scanline, .ai-story { display: none !important; }
  .hero__grid::before, .hero__grid::after { display: none !important; }
  .hero__panel { transform: none !important; }
  .ai-motion-ready .ai-stagger > * { opacity: 1 !important; transform: none !important; }
  .btn-primary::after { display: none !important; }
}

/* ---------- V2 pixel film: Human + AI merge into Rocket ---------- */
.ai-cinematic { display: none !important; }
.ai-motion-ready .hero__panel.is-ai-active .hero__expert { animation: none; }

.ai-pixel-stage {
  --ai-flight-x: 44px;
  --ai-flight-y: -680px;
  position: relative;
  z-index: 7;
  height: 142px;
  margin: 18px -18px -18px;
  overflow: visible;
  isolation: isolate;
  border-top: 1px solid rgba(159,122,250,.28);
  border-bottom: 1px solid rgba(159,122,250,.28);
  background:
    linear-gradient(rgba(159,122,250,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,122,250,.055) 1px, transparent 1px),
    radial-gradient(circle at 50% 60%, rgba(136,92,246,.16), transparent 38%),
    #030305;
  background-size: 14px 14px, 14px 14px, auto, auto;
  box-shadow: inset 0 0 34px rgba(136,92,246,.1);
}

.ai-pixel-stage::before,
.ai-pixel-stage::after {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 8px;
  pointer-events: none;
}
.ai-pixel-stage::before {
  opacity: .62;
  background:
    linear-gradient(#cbbcff,#cbbcff) left top / 26px 2px no-repeat,
    linear-gradient(#cbbcff,#cbbcff) left top / 2px 22px no-repeat,
    linear-gradient(#cbbcff,#cbbcff) right top / 26px 2px no-repeat,
    linear-gradient(#cbbcff,#cbbcff) right top / 2px 22px no-repeat,
    linear-gradient(#cbbcff,#cbbcff) left bottom / 26px 2px no-repeat,
    linear-gradient(#cbbcff,#cbbcff) left bottom / 2px 22px no-repeat,
    linear-gradient(#cbbcff,#cbbcff) right bottom / 26px 2px no-repeat,
    linear-gradient(#cbbcff,#cbbcff) right bottom / 2px 22px no-repeat;
  filter: drop-shadow(0 0 6px rgba(136,92,246,.7));
}
.ai-pixel-stage::after {
  inset: 0;
  opacity: .16;
  background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(255,255,255,.18) 5px, transparent 6px);
  mix-blend-mode: screen;
}

.ai-film-scene {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ai-film-pixels,
.ai-flight-sparkles { position: absolute; inset: 0; pointer-events: none; }
.ai-stage-pixel {
  position: absolute;
  z-index: 2;
  width: var(--film-size, 3px);
  height: var(--film-size, 3px);
  left: var(--film-x);
  top: var(--film-y);
  opacity: .15;
  background: var(--film-color, #9f7afa);
  box-shadow: 0 0 7px var(--film-color, #9f7afa);
}
.hero__panel.is-ai-active .ai-stage-pixel {
  animation: ai-film-twinkle var(--film-duration, 2.4s) steps(3,end) var(--film-delay, 0s) both;
}

.ai-pixel-person {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center bottom;
}
.ai-human-fill { fill: rgba(255,255,255,.9); }
.ai-human-core { fill: #030305; stroke: #fff; stroke-width: 2; }
.ai-human-line {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: square;
  stroke-linejoin: bevel;
}
.ai-robot-fill { fill: rgba(136,92,246,.92); stroke: #d9ceff; stroke-width: 2; }
.ai-robot-eye { fill: #fff; }
.ai-robot-eye { display: none; }
.ai-robot-face-label {
  fill: #fff;
  font: 900 10px/1 var(--font, sans-serif);
  letter-spacing: .5px;
}
.ai-robot-antenna,
.ai-robot-line,
.ai-robot-circuit {
  fill: none;
  stroke: #bda8ff;
  stroke-width: 5;
  stroke-linecap: square;
  stroke-linejoin: bevel;
}
.ai-robot-circuit { stroke: #fff; stroke-width: 2; }

.hero__panel.is-ai-active .ai-pixel-person--human {
  animation: ai-human-walk 2.22s steps(14,end) .3s both;
}
.hero__panel.is-ai-active .ai-pixel-person--robot {
  animation: ai-robot-walk 2.22s steps(14,end) .3s both;
}

.ai-film-fusion {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.ai-film-fusion-core { fill: #fff; }
.ai-film-fusion-ring { fill: none; stroke: #bda8ff; stroke-width: 2; }
.ai-film-fusion-ring--two { stroke-dasharray: 6 7; }
.hero__panel.is-ai-active .ai-film-fusion { animation: ai-film-fuse .72s ease-out 2.14s both; }

.ai-film-rocket {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 320px 82px;
}
.ai-film-rocket-body { fill: #885cf6; stroke: #fff; stroke-width: 2.5; }
.ai-film-rocket-wing { fill: #d9ceff; stroke: #fff; stroke-width: 2; }
.ai-film-rocket-window { fill: #08060c; stroke: #fff; stroke-width: 2.5; }
.ai-film-rocket-flame { fill: #fff; stroke: #bda8ff; stroke-width: 2; transform-origin: 320px 109px; }
.hero__panel.is-ai-active .ai-film-rocket {
  animation: ai-film-rocket-launch 1.62s cubic-bezier(.18,.8,.24,1) 2.55s both;
}
.hero__panel.is-ai-active .ai-film-rocket-flame {
  animation: ai-film-flame .12s ease-in-out 2.78s 11 alternate both;
}

.ai-flight-sparkles { z-index: 8; overflow: visible; }
.ai-flight-sparkle {
  position: absolute;
  width: var(--spark-size, 5px);
  height: var(--spark-size, 5px);
  left: var(--spark-x);
  top: var(--spark-y);
  opacity: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(159,122,250,.88), 0 0 20px 5px rgba(136,92,246,.32);
}
.ai-flight-sparkle::before,
.ai-flight-sparkle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255,255,255,.92);
  transform: translate(-50%,-50%);
}
.ai-flight-sparkle::before { width: calc(var(--spark-size, 5px) * 3); height: 1px; }
.ai-flight-sparkle::after { width: 1px; height: calc(var(--spark-size, 5px) * 3); }
.hero__panel.is-ai-active .ai-flight-sparkle {
  animation: ai-sparkle-pop .58s ease-out var(--spark-delay) both;
}

@keyframes ai-human-walk {
  0% { opacity: 0; transform: translate(-150px,2px); }
  8% { opacity: 1; }
  20% { transform: translate(-108px,-3px); }
  34% { transform: translate(-68px,2px); }
  48% { transform: translate(-28px,-3px); }
  64% { opacity: 1; transform: translate(22px,2px); }
  78% { opacity: 1; transform: translate(67px,0) scale(1); }
  90% { opacity: .8; transform: translate(87px,0) scale(.88); filter: brightness(1.8); }
  100% { opacity: 0; transform: translate(102px,0) scale(.18); filter: brightness(2.4); }
}
@keyframes ai-robot-walk {
  0% { opacity: 0; transform: translate(150px,2px); }
  8% { opacity: 1; }
  20% { transform: translate(108px,-3px); }
  34% { transform: translate(68px,2px); }
  48% { transform: translate(28px,-3px); }
  64% { opacity: 1; transform: translate(-22px,2px); }
  78% { opacity: 1; transform: translate(-67px,0) scale(1); }
  90% { opacity: .8; transform: translate(-87px,0) scale(.88); filter: brightness(1.8); }
  100% { opacity: 0; transform: translate(-102px,0) scale(.18); filter: brightness(2.4); }
}
@keyframes ai-film-fuse {
  0% { opacity: 0; transform: scale(.18) rotate(0); }
  38% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.5) rotate(80deg); }
}
@keyframes ai-film-rocket-launch {
  0% { opacity: 0; transform: translate3d(0,18px,0) scale(.35); }
  18% { opacity: 1; transform: translate3d(0,0,0) scale(1.08); }
  34% { opacity: 1; transform: translate3d(0,-8px,0) scale(1.08); }
  100% { opacity: 0; transform: translate3d(var(--ai-flight-x),var(--ai-flight-y),0) rotate(12deg) scale(.72); }
}
@keyframes ai-film-flame { from { transform: scaleY(.55); opacity: .55; } to { transform: scaleY(1.42); opacity: 1; } }
@keyframes ai-film-twinkle { 0% { opacity: .08; } 50% { opacity: .72; } 100% { opacity: .14; } }
@keyframes ai-sparkle-pop {
  0% { opacity: 0; transform: scale(.1) rotate(0); }
  38% { opacity: 1; transform: scale(1.35) rotate(35deg); }
  100% { opacity: 0; transform: scale(.3) rotate(75deg); }
}

@media (max-width: 620px) {
  .ai-pixel-stage {
    --ai-flight-x: 26px;
    --ai-flight-y: -535px;
    height: 122px;
    margin: 16px -12px -12px;
  }
  .hero__panel.is-ai-active .ai-film-rocket {
    animation-name: ai-film-rocket-launch-mobile;
  }
  .ai-human-line, .ai-robot-line, .ai-robot-antenna { stroke-width: 7; }
}

@keyframes ai-film-rocket-launch-mobile {
  0% { opacity: 0; transform: translate3d(0,18px,0) scale(.35); }
  18% { opacity: 1; transform: translate3d(0,0,0) scale(1.08); }
  34% { opacity: 1; transform: translate3d(0,-8px,0) scale(1.08); }
  78% { opacity: 1; }
  90% { opacity: .58; }
  100% { opacity: 0; transform: translate3d(var(--ai-flight-x),var(--ai-flight-y),0) rotate(12deg) scale(.72); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-pixel-stage { display: none !important; }
}

/* ---------- A + B: scroll-linked energy journey and neural field ---------- */
.ai-journey {
  --ai-page-progress: 0;
  --ai-orb-y: 0px;
  --ai-network-y: 6px;
  --ai-signal-offset: 0;
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  contain: layout paint style;
}
.ai-journey-launched .ai-journey { opacity: 1; }

main > section { position: relative; }
main > section > .container,
.footer > .container { position: relative; z-index: 2; }

.ai-neural-map {
  position: absolute;
  top: 0;
  right: 0;
  width: 92px;
  height: 100%;
  overflow: visible;
  opacity: .56;
  filter: drop-shadow(0 0 7px rgba(136,92,246,.2));
}
.ai-neural-map__drift {
  transform: translate3d(0, var(--ai-network-y), 0);
  will-change: transform;
}
.ai-neural-link,
.ai-neural-signal {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ai-neural-link {
  stroke: rgba(159,122,250,.22);
  stroke-width: 1;
}
.ai-neural-link--soft {
  stroke: rgba(203,188,255,.12);
  stroke-width: .75;
}
.ai-neural-signal {
  stroke: rgba(255,255,255,.72);
  stroke-width: 1.2;
  stroke-dasharray: 4 28;
  stroke-dashoffset: var(--ai-signal-offset);
}
.ai-neural-nodes circle {
  fill: rgba(203,188,255,.72);
  vector-effect: non-scaling-stroke;
  stroke: rgba(136,92,246,.38);
  stroke-width: 2;
}
.ai-journey.is-network-pulse .ai-neural-nodes circle {
  animation: ai-network-node-pulse .68s var(--ai-ease-out) both;
}
.ai-journey[data-phase="2"] .ai-neural-nodes circle:nth-child(3n+1),
.ai-journey[data-phase="3"] .ai-neural-nodes circle:nth-child(3n+2) {
  fill: #fff;
}

.ai-energy-rail {
  position: absolute;
  top: 72px;
  right: 9px;
  bottom: 100px;
  width: 10px;
}
.ai-energy-rail__track,
.ai-energy-rail__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}
.ai-energy-rail__track { background: rgba(159,122,250,.16); }
.ai-energy-rail__fill {
  background: linear-gradient(to bottom, rgba(203,188,255,.22), #9f7afa 62%, #fff);
  box-shadow: 0 0 8px rgba(136,92,246,.54);
  transform: translateX(-50%) scaleY(var(--ai-page-progress));
  transform-origin: top;
  will-change: transform;
}
.ai-energy-rail__orb {
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(159,122,250,.13), 0 0 13px 4px rgba(136,92,246,.72);
  transform: translate3d(-50%, var(--ai-orb-y), 0);
  will-change: transform;
}

.ai-journey-section::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: clamp(28px, 6vw, 64px);
  right: 8px;
  width: 48px;
  height: 1px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: right;
  background: linear-gradient(90deg, transparent, rgba(159,122,250,.7));
  box-shadow: 0 0 8px rgba(136,92,246,.34);
}
.ai-journey-section.ai-section-online::after {
  animation: ai-section-link-online .62s var(--ai-ease-out) both;
}

.btn-primary.ai-reactor-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn-primary.ai-reactor-cta::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -70%;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  transform: scale(.18);
  background: radial-gradient(circle, rgba(255,255,255,.78) 0 3%, rgba(203,188,255,.38) 7%, rgba(136,92,246,.12) 24%, transparent 55%);
}
.btn-primary.ai-reactor-cta.ai-cta-live {
  animation: ai-cta-reactor .88s var(--ai-ease-out);
}
.btn-primary.ai-reactor-cta.ai-cta-live::before {
  animation: ai-cta-core-charge .78s ease-out;
}
.btn-primary.ai-reactor-cta.ai-cta-live::after {
  animation: ai-cta-sweep .82s ease-out .08s;
  z-index: 0;
}

@keyframes ai-network-node-pulse {
  0% { opacity: .35; filter: none; }
  46% { opacity: 1; filter: drop-shadow(0 0 5px #9f7afa); }
  100% { opacity: .72; filter: none; }
}
@keyframes ai-section-link-online {
  0% { opacity: 0; transform: scaleX(0); }
  55% { opacity: .82; transform: scaleX(1); }
  100% { opacity: .18; transform: scaleX(1); }
}
@keyframes ai-cta-reactor {
  0% { box-shadow: 0 14px 34px rgba(124,77,240,.32); }
  52% { box-shadow: 0 0 0 7px rgba(159,122,250,.12), 0 16px 42px rgba(124,77,240,.55); transform: translateY(-2px) scale(1.018); }
  100% { box-shadow: 0 14px 34px rgba(124,77,240,.36); transform: none; }
}
@keyframes ai-cta-core-charge {
  0% { opacity: 0; transform: scale(.16); }
  38% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.15); }
}

@media (min-width: 768px) {
  .ai-neural-map { width: clamp(112px, 10vw, 150px); opacity: .68; }
  .ai-energy-rail { right: clamp(18px, 3vw, 46px); }
  .ai-journey-section::after { right: clamp(18px, 3vw, 46px); width: min(14vw, 180px); }
}

@media (max-width: 620px) {
  .ai-neural-map { right: -18px; width: 70px; opacity: .4; }
  .ai-energy-rail { right: 4px; }
  .ai-journey-section::after { right: 4px; width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-journey { display: none !important; }
  .ai-journey-section::after { display: none !important; }
  .btn-primary.ai-reactor-cta,
  .btn-primary.ai-reactor-cta::before,
  .btn-primary.ai-reactor-cta::after { animation: none !important; }
}