/* Progressive enhancement: content is visible without this stylesheet or JS. */
.reading-light {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 101;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #2fbc72, #75f0a6 65%, #bdf8d5);
  box-shadow: 0 0 14px rgba(117, 240, 166, .6);
}
.motion-card { position: relative; isolation: isolate; }
.motion-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(380px circle at var(--light-x, 50%) var(--light-y, 30%), rgba(117, 240, 166, .14), transparent 72%);
  box-shadow: inset 0 1px 0 rgba(189, 248, 213, .25);
  transition: opacity .35s ease;
}
.motion-card:focus-visible > .motion-sheen { opacity: 1; }
.motion-chapter { position: relative; }
.motion-track {
  position: absolute;
  top: 0;
  left: max(24px, calc((100% - var(--shell, 1240px)) / 2));
  right: max(24px, calc((100% - var(--shell, 1240px)) / 2));
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(117, 240, 166, .07), transparent);
}
.motion-track > i {
  display: block;
  height: 100%;
  transform-origin: left;
  transform: scaleX(var(--journey, 0));
  background: linear-gradient(90deg, transparent, rgba(117, 240, 166, .7), rgba(125, 223, 218, .15));
  box-shadow: 0 0 14px rgba(117, 240, 166, .2);
}
.motion-chapter .scenario-number {
  color: color-mix(in srgb, var(--green) calc(45% + var(--journey, 0) * 55%), var(--muted));
}
.motion-dormant .system-orbit { animation-play-state: paused; }
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 14px;
  margin-top: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.motion-toggle::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.motion-toggle[aria-pressed="true"]::before { background: var(--green); box-shadow: 0 0 9px rgba(117, 240, 166, .5); }
.motion-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.motion-toggle:disabled { cursor: default; }
html[data-motion="paused"] .system-orbit { animation-play-state: paused; }
html[data-motion="paused"] { scroll-behavior: auto; }
html[data-motion="paused"] :is(.reading-light, .motion-track, .motion-sheen) { display: none; }
html[data-motion="paused"] :is(.motion-depth-hero, .motion-depth-photo, .motion-devices .desktop-device, .motion-devices .mobile-device) { transform: none !important; }

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) and (min-width: 1021px) {
  .motion-card.is-lit > .motion-sheen { opacity: 1; }
  .motion-depth-hero {
    transform: translate3d(0, calc(var(--scene, 0) * 38px), 0) scale(calc(1 - var(--scene, 0) * .035));
  }
  .motion-depth-photo {
    transform: translate3d(0, calc(var(--scene, 0) * 48px), 0) scale(1.09);
  }
  .motion-devices { perspective: 1400px; }
  .motion-devices .desktop-device {
    transform: translate3d(0, calc(var(--scene, 0) * 16px), 0) rotateX(calc(var(--scene, 0) * 3deg));
  }
  .motion-devices .mobile-device {
    transform: translate3d(0, calc(var(--scene, 0) * -30px), 0) rotate(calc(var(--scene, 0) * -2deg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .reading-light, .motion-track, .motion-sheen, .motion-toggle { display: none; }
  .motion-depth-hero, .motion-depth-photo, .motion-devices .desktop-device,
  .motion-devices .mobile-device { transform: none !important; }
}
@media print {
  .reading-light, .motion-track, .motion-sheen, .motion-toggle { display: none; }
  .motion-depth-hero, .motion-depth-photo, .motion-devices .desktop-device,
  .motion-devices .mobile-device { transform: none !important; }
}