/* Motion follows compact content in normal document flow. Every section stays
   readable before JavaScript starts and with a reduced-motion preference. */
:root {
  --page-progress: 0;
  --motion-ease: cubic-bezier(.16,.8,.2,1);
}

.scroll-progress {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
}

.scroll-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent, #b8ed92);
  transform: scaleX(var(--page-progress));
  transform-origin: left;
}

.hero-stage,
.chapter-stage {
  --hero-progress: 0;
  --hero-eased: 0;
  --chapter-progress: 0;
  --chapter-eased: 0;
  position: relative;
  min-height: 0;
}

.motion-ready:not(.reduced-motion) .hero-stage > .hero,
.motion-ready:not(.reduced-motion) .chapter-stage > .chapter {
  position: relative;
  top: auto;
  height: auto;
  min-height: 0;
}

.motion-ready:not(.reduced-motion) .hero-stage .hero-emblem {
  transform: translate3d(calc(var(--hero-eased) * -9%), calc(var(--hero-eased) * -5%), 0)
    scale(calc(1 + var(--hero-eased) * .18))
    rotate(calc(var(--hero-eased) * -12deg));
  transform-origin: 60% 50%;
}

.motion-ready:not(.reduced-motion) .hero-stage .hero-emblem > span {
  animation: emblem-arrive .9s var(--motion-ease) both;
}

@keyframes emblem-arrive {
  from { opacity: 0; transform: translate3d(24px, 16px, 0) scale(.94); }
  to { opacity: 1; transform: none; }
}

.motion-ready:not(.reduced-motion) .hero-stage .hero-grid {
  transform: translate3d(calc(var(--hero-eased) * -18px), 0, 0) scale(1.06);
  transform-origin: right;
}

.motion-ready:not(.reduced-motion) .hero-stage .hero-content {
  transform: translate3d(0, calc(var(--hero-eased) * -10px), 0);
}

.motion-ready:not(.reduced-motion) .hero-stage .hero-coordinate {
  transform: translate3d(0, calc(var(--hero-progress) * -5px), 0);
}

.motion-ready:not(.reduced-motion) .hero-stage .scroll-cue {
  transform: translate3d(0, calc(var(--hero-progress) * 7px), 0);
}

.motion-ready:not(.reduced-motion) .hero-stage .scroll-cue:focus-visible,
.motion-ready:not(.reduced-motion) .hero-stage .hero-content:focus-within {
  transform: none;
}

.motion-ready:not(.reduced-motion) .chapter-stage .chapter-type {
  transform: translate3d(calc((.5 - var(--chapter-eased)) * 48px), calc((.5 - var(--chapter-eased)) * 24px), 0)
    rotate(calc((var(--chapter-eased) - .5) * -10deg))
    scale(calc(.94 + var(--chapter-eased) * .14));
  transform-origin: 50% 52%;
}

.motion-ready:not(.reduced-motion) .chapter-stage .chapter-copy {
  transform: translate3d(0, calc((.5 - var(--chapter-eased)) * 16px), 0);
}

.motion-ready:not(.reduced-motion) .chapter-stage .chapter-caption {
  transform: translate3d(0, calc(var(--chapter-eased) * -5px), 0);
}

.motion-ready:not(.reduced-motion) .chapter-stage .chapter::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 6%;
  right: 6%;
  height: 2px;
  background: var(--accent, #b8ed92);
  transform: scaleX(var(--chapter-eased));
  transform-origin: left;
  pointer-events: none;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .motion-ready:not(.reduced-motion) .hero-keyword {
    background-image: linear-gradient(90deg, var(--accent, #b8ed92) 0 50%, transparent 50% 100%);
    background-size: 200% 100%;
    background-position: calc(100% - var(--hero-eased) * 100%) 0;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px var(--accent, #b8ed92);
  }

  .motion-ready:not(.reduced-motion) .chapter-keyword {
    background-image: linear-gradient(90deg, var(--accent, #b8ed92) 0 50%, var(--paper, #f2f2ef) 50% 100%);
    background-size: 200% 100%;
    background-position: calc(100% - var(--chapter-eased) * 100%) 0;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}

.motion-ready:not(.reduced-motion) .scene-active .hero-emblem,
.motion-ready:not(.reduced-motion) .scene-active .chapter-type {
  will-change: transform;
}

.motion-ready:not(.reduced-motion) [data-reveal] {
  transition: opacity .55s var(--motion-ease), transform .7s var(--motion-ease), clip-path .7s var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready:not(.reduced-motion) [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

.motion-ready:not(.reduced-motion) [data-reveal="line"]:not(.is-visible) {
  transform: translate3d(0, 18px, 0);
  clip-path: inset(0 0 100% 0);
}

.motion-ready:not(.reduced-motion) [data-reveal="line"].is-visible {
  clip-path: inset(-20% -2% -20% -2%);
}

.motion-ready:not(.reduced-motion) [data-reveal="scale"]:not(.is-visible) {
  transform: translate3d(0, 28px, 0) scale(.94);
}

.motion-ready:not(.reduced-motion) [data-reveal]:focus-within,
.motion-ready:not(.reduced-motion) [data-reveal]:focus-within .motion-line > span {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none;
}

.motion-ready:not(.reduced-motion) .discipline-strip > span {
  transform: translate3d(calc(var(--strip-offset, 0) * 1px), 0, 0);
}

.motion-ready:not(.reduced-motion) .discipline-strip > .strip-star {
  transform: translate3d(calc(var(--strip-offset, 0) * 1px), 0, 0)
    rotate(calc(var(--strip-offset, 0) * -3deg));
}

.motion-line {
  display: block;
  overflow: hidden;
}

.motion-line > span {
  display: inline-block;
}

.motion-ready:not(.reduced-motion) [data-reveal] .motion-line > span {
  transition: transform .75s var(--motion-ease);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--line-delay, 0ms));
}

.motion-ready:not(.reduced-motion) [data-reveal]:not(.is-visible) .motion-line > span {
  transform: translate3d(0, 110%, 0);
}

.motion-ready:not(.reduced-motion) [data-reveal].is-visible .motion-line > span {
  transform: translate3d(0, 0, 0);
}

@media (max-width: 760px) {
  .motion-ready:not(.reduced-motion) .chapter-stage .chapter::after {
    left: 5%;
    right: 5%;
  }
}

.reduced-motion .hero-stage,
.reduced-motion .chapter-stage,
.reduced-motion .hero-stage > .hero,
.reduced-motion .chapter-stage > .chapter {
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  top: auto !important;
}

.reduced-motion .hero-emblem,
.reduced-motion .hero-emblem > span,
.reduced-motion .hero-grid,
.reduced-motion .hero-content,
.reduced-motion .hero-coordinate,
.reduced-motion .scroll-cue,
.reduced-motion .chapter-type,
.reduced-motion .chapter-copy,
.reduced-motion .chapter-caption,
.reduced-motion .discipline-strip > span,
.reduced-motion [data-reveal],
.reduced-motion .motion-line > span {
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
  animation: none !important;
}

.reduced-motion [data-reveal],
.reduced-motion .motion-line > span {
  opacity: 1 !important;
}

.reduced-motion .hero-keyword {
  -webkit-text-fill-color: var(--accent);
  background: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-keyword {
    -webkit-text-fill-color: var(--accent) !important;
    background: none !important;
  }

  .hero-stage,
  .chapter-stage,
  .hero-stage > .hero,
  .chapter-stage > .chapter {
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    top: auto !important;
  }

  .hero-emblem,
  .hero-emblem > span,
  .hero-grid,
  .hero-content,
  .hero-coordinate,
  .scroll-cue,
  .chapter-type,
  .chapter-copy,
  .chapter-caption,
  .discipline-strip > span,
  [data-reveal],
  .motion-line > span {
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }

  [data-reveal],
  .motion-line > span {
    opacity: 1 !important;
  }
}