/* v6: progressive enhancement. Content stays readable before JS and between scenes. */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-soft: cubic-bezier(.45, 0, .55, 1);
}

.ambient-backdrop,
.ambient-field,
.energy-links,
.growth-sparks,
.flow-orbit,
.motion-toggle { display: none; }

html.motion-ready .reveal.enter,
html.motion-ready .hero img { animation: none; }

html.motion-ready [data-motion] {
  opacity: .54;
  transform: translate3d(0, 26px, 0);
  transition: opacity .76s var(--motion-ease), transform 1s var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
}
html.motion-ready [data-motion="focus"] { transform: translate3d(0, 15px, 0) scale(.985); }
html.motion-ready [data-motion="left"] { transform: translate3d(-26px, 0, 0); }
html.motion-ready [data-motion="right"] { transform: translate3d(26px, 0, 0); }
html.motion-ready [data-motion="scale"] { transform: scale(.965); }
html.motion-ready [data-motion].motion-seen { opacity: 1; transform: none; }
html.motion-ready [data-motion]:not(.motion-seen) [data-motion]:not(.motion-seen) { opacity: 1; }

.motion-scene { --scene-progress: 0; --scene-shift: 0; }
html.motion-ready .page { position: relative; z-index: 1; }

/* A deep, slow light field stays outside the reading column on larger displays. */
html.motion-ready .ambient-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(145deg, #0d1831, #17132f 65%, #172744);
}
.ambient-backdrop::before,
.ambient-backdrop::after {
  content: "";
  position: absolute;
  width: 105vmax;
  height: 105vmax;
  border-radius: 50%;
  background: radial-gradient(ellipse, #6472cd38 0%, #4334891a 32%, transparent 65%);
  animation: outer-light 24s var(--motion-soft) infinite alternate;
  pointer-events: none;
}
.ambient-backdrop::before { left: -60vmax; top: -36vmax; }
.ambient-backdrop::after {
  right: -64vmax;
  bottom: -42vmax;
  background: radial-gradient(ellipse, #9c60cb30, #34699518 34%, transparent 66%);
  animation-duration: 31s;
  animation-delay: -13s;
  animation-direction: alternate-reverse;
}
@keyframes outer-light {
  from { transform: translate3d(-3%, -2%, 0) scale(.91); opacity: .65; }
  to { transform: translate3d(13%, 9%, 0) scale(1.13); opacity: 1; }
}

/* Hero: the original lettering stays fixed; light moves in its surrounding space. */
html.motion-ready .hero { position: relative; isolation: isolate; }
html.motion-ready .hero > img { position: relative; z-index: 0; }
html.motion-ready .ambient-field {
  display: block;
  position: absolute;
  inset: 18% 0 12%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(0, calc(var(--scene-shift, 0) * 12px), 0);
}
.ambient-field::before,
.ambient-field::after {
  content: "";
  position: absolute;
  width: 70%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #96e6ff27, transparent 66%);
  animation: hero-light 12s var(--motion-soft) infinite alternate;
  animation-play-state: paused;
}
.ambient-field::before { left: -30%; top: 17%; }
.ambient-field::after {
  right: -28%;
  bottom: 6%;
  background: radial-gradient(ellipse, #c2a6ff30, transparent 66%);
  animation-delay: -6s;
}
.ambient-field span {
  position: absolute;
  left: calc(4% + var(--i, 0) * 7.4%);
  bottom: 1%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 9px 2px #8b85fa75;
  opacity: 0;
  animation: hero-drift calc(11s + var(--i, 0) * .45s) linear infinite;
  animation-delay: calc(var(--i, 0) * -.94s);
  animation-play-state: paused;
}
.ambient-field span:nth-child(3n) { width: 3px; height: 3px; background: #a991ee; }
.ambient-field span:nth-child(4n) { width: 5px; height: 5px; }
html.motion-ready .hero.is-inview .ambient-field span,
html.motion-ready .hero.is-inview .ambient-field::before,
html.motion-ready .hero.is-inview .ambient-field::after { animation-play-state: running; }
@keyframes hero-light {
  from { transform: translate3d(0, 0, 0); opacity: .3; }
  to { transform: translate3d(35%, -12%, 0); opacity: .8; }
}
@keyframes hero-drift {
  0% { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
  15% { opacity: .58; }
  70% { opacity: .4; }
  100% { transform: translate3d(17px, -440px, 0) scale(1.15); opacity: 0; }
}

/* Chapters get a small scroll-linked accent, never a transform on the image text. */
html.motion-ready .chapter .eyebrow { position: relative; }
html.motion-ready .chapter .eyebrow::after {
  content: "";
  position: absolute;
  left: calc(50% - 20px);
  bottom: -9px;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: .7;
  transform: scaleX(clamp(.2, calc(var(--scene-progress, 0) * 1.8), 1));
  transform-origin: center;
}
.comic-enhanced > .comic-source { display: none; }
.comic-enhanced { overflow: visible; }
.comic-panel { position: relative; overflow: hidden; }
.comic-panel > img { position: absolute; left: 0; width: 100%; height: auto; max-width: none; }
html.motion-ready .comic-panel[data-motion] { transition-duration: .8s, 1.05s; }
html.motion-ready .comic-panel[data-motion="left"] { transform: translate3d(-24px, 13px, 0); }
html.motion-ready .comic-panel[data-motion="right"] { transform: translate3d(24px, 13px, 0); }
html.motion-ready .comic-panel.motion-seen { transform: none; }

/* The two information branches visibly feed the AI in the existing diagram. */
.conditions-visual,
.growth-visual,
.flow-visual { position: relative; isolation: isolate; }
html.motion-ready .energy-links,
html.motion-ready .flow-orbit {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.energy-path {
  fill: none;
  stroke: #985cff;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 5 95;
  stroke-dashoffset: 0;
  opacity: .8;
  animation: energy-stream 3.4s linear infinite;
  animation-play-state: paused;
}
.energy-path:nth-of-type(2) { animation-delay: -1.1s; stroke: #a591ff; }
.energy-node {
  fill: #ffffff;
  stroke: #a17aff;
  stroke-width: 4;
  opacity: .7;
  transform-box: fill-box;
  transform-origin: center;
  animation: energy-receive 3.4s var(--motion-soft) infinite;
  animation-play-state: paused;
}
.energy-node:nth-of-type(2) { animation-delay: -.8s; }
.energy-node:nth-of-type(3) { animation-delay: -1.6s; }
html.motion-ready .is-inview .energy-path,
html.motion-ready .is-inview .energy-node { animation-play-state: running; }
@keyframes energy-stream { to { stroke-dashoffset: -100; } }
@keyframes energy-receive {
  0%, 100% { transform: scale(.75); opacity: .35; }
  40% { transform: scale(1.35); opacity: .95; }
  70% { transform: scale(.9); opacity: .55; }
}

/* Proof stays quiet around playback; selection feedback is brief and local. */
html.motion-ready .proof-video {
  outline: 1px solid #bcb7e52b;
  outline-offset: 3px;
  box-shadow: 0 16px 38px #03050f66;
}
html.motion-ready .proof-cue { position: relative; overflow: hidden; }
html.motion-ready .proof-cue:nth-child(1) { --motion-delay: 60ms; }
html.motion-ready .proof-cue:nth-child(2) { --motion-delay: 170ms; }
html.motion-ready .proof-cue:nth-child(3) { --motion-delay: 280ms; }
html.motion-ready .proof-cue.cue-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, #b998ff28, #e1d5ff12 55%, transparent);
  animation: cue-response .72s var(--motion-ease) both;
}
@keyframes cue-response {
  0% { opacity: 0; transform: translate3d(-12%, 0, 0); }
  23% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(6%, 0, 0); }
}

/* Five restrained lights climb the exact steps instead of moving the artwork. */
html.motion-ready .growth-sparks {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.growth-sparks > i {
  position: absolute;
  width: clamp(12px, 4vw, 19px);
  height: clamp(12px, 4vw, 19px);
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 8%, #fff8cfdd 23%, #d7b87a48 49%, transparent 72%);
  opacity: .12;
  animation: step-light 5.6s var(--motion-soft) infinite;
  animation-play-state: paused;
}
.growth-sparks > i::after {
  content: "";
  position: absolute;
  inset: -35%;
  border: 1px solid #fff2bf8c;
  border-radius: 50%;
  opacity: .45;
}
.growth-sparks > i:nth-child(1) { animation-delay: 0s; }
.growth-sparks > i:nth-child(2) { animation-delay: .65s; }
.growth-sparks > i:nth-child(3) { animation-delay: 1.3s; }
.growth-sparks > i:nth-child(4) { animation-delay: 1.95s; }
.growth-sparks > i:nth-child(5) { animation-delay: 2.6s; }
html.motion-ready .is-inview .growth-sparks > i { animation-play-state: running; }
@keyframes step-light {
  0%, 14%, 100% { transform: scale(.65); opacity: .1; }
  26% { transform: scale(1.4); opacity: .95; }
  43% { transform: scale(1); opacity: .25; }
  60% { transform: scale(.65); opacity: .1; }
}

/* A single light follows the illustrated work cycle. */
.flow-orbit .orbit-path {
  fill: none;
  stroke: #dcd6ff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 4 96;
  opacity: .7;
  animation: energy-stream 6s linear infinite;
  animation-play-state: paused;
}
html.motion-ready .is-inview .flow-orbit .orbit-path { animation-play-state: running; }

/* The shimmer has one iteration. Visibility only pauses/resumes its progress. */
html.motion-ready .button.primary { position: relative; isolation: isolate; overflow: hidden; }
html.motion-ready .button.primary::after {
  content: "";
  position: absolute;
  top: -10%;
  left: -65%;
  width: 60%;
  height: 120%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 15%, #ffffff33 48%, transparent 81%);
  opacity: 0;
  animation: button-shimmer 1.65s var(--motion-ease) .5s 1 both;
  animation-play-state: paused;
}
html.motion-ready .is-inview .button.primary::after { animation-play-state: running; }
@keyframes button-shimmer {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12%, 65% { opacity: .9; }
  100% { transform: translate3d(300%, 0, 0); opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
  html.motion-ready .button:hover { transform: translate3d(0, -3px, 0); }
  html.motion-ready .button.primary:hover { box-shadow: 0 13px 27px #6b38d843; }
  html.motion-ready .proof-cue:hover { background-color: #2a2c46; }
}
html.motion-ready .button:active { transform: translate3d(0, 0, 0) scale(.98); }

/* Section position is visible without moving the navigation itself. */
.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: #c9b3ff;
  transform: scaleX(0);
  transition: transform .32s var(--motion-ease), opacity .32s;
  opacity: .5;
}
.nav a.active { color: #fff; background: #c7b2ff18; }
.nav a.active::after { transform: scaleX(1); opacity: 1; }
/* Keep the pause control in the navigation, clear of artwork and captions. */
html.motion-ready .nav { opacity: 1; visibility: visible; transform: none; }
html.motion-ready .page { padding-top: 48px; }
html.motion-ready .motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-left: 1px solid #ffffff24;
  border-radius: 0;
  color: #fff;
  background: #ffffff08;
  font-size: 0;
  cursor: pointer;
}
html.motion-ready .motion-toggle:hover { background: #ffffff18; }
html.motion-ready .motion-toggle:focus-visible { outline-offset: -4px; }
.motion-toggle::before {
  content: "";
  width: 8px;
  height: 9px;
  background: linear-gradient(90deg, currentColor 0 30%, transparent 30% 70%, currentColor 70%);
  opacity: .65;
  flex: none;
}
.motion-paused .motion-toggle::before {
  background: currentColor;
  clip-path: polygon(8% 0, 100% 50%, 8% 100%);
}

@media (min-width: 900px) {
  html.motion-ready .page { box-shadow: 0 25px 110px #03051c88, 0 0 0 1px #ffffff0c; }
}
@media (max-width: 520px) {
  html.motion-ready .ambient-backdrop { background: #e9edf3; }
  html.motion-ready .ambient-backdrop::before,
  html.motion-ready .ambient-backdrop::after { display: none; }
}

/* Pause returns animated content to its complete, steady state. Crop offsets stay fixed. */
html:is(.motion-paused, .page-hidden) *,
html:is(.motion-paused, .page-hidden) *::before,
html:is(.motion-paused, .page-hidden) *::after { animation: none !important; transition: none !important; }
html:is(.motion-paused, .page-hidden) { scroll-behavior: auto; }
html:is(.motion-paused, .page-hidden) [data-motion],
html:is(.motion-paused, .page-hidden) .reveal,
html:is(.motion-paused, .page-hidden) .hero > img,
html:is(.motion-paused, .page-hidden) .button { opacity: 1 !important; transform: none !important; }
html:is(.motion-paused, .page-hidden) .chapter .eyebrow::after,
html:is(.motion-paused, .page-hidden) .button.primary::after,
html:is(.motion-paused, .page-hidden) .proof-cue.cue-flash::after { display: none !important; }
html:is(.motion-paused, .page-hidden) :is(.ambient-backdrop, .ambient-field, .energy-links, .growth-sparks, .flow-orbit) { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.motion-ready [data-motion],
  html.motion-ready .reveal,
  html.motion-ready .hero > img,
  html.motion-ready .button { opacity: 1 !important; transform: none !important; }
  .ambient-backdrop, .ambient-field, .energy-links, .growth-sparks, .flow-orbit,
  html.motion-ready .chapter .eyebrow::after,
  html.motion-ready .button.primary::after,
  html.motion-ready .proof-cue.cue-flash::after { display: none !important; }
}