/*
  Scroll Highlight
  The full statement is readable immediately. Scroll changes emphasis only.
  Light theme, Pryor ink, and the existing Decision Rail remain unchanged.
*/

.decision-rail[data-motion-style="scroll-highlight"] {
  --highlight-muted: rgba(var(--ink-rgb), .5);
}

.decision-rail[data-motion-style="scroll-highlight"] .decision-rail-title {
  font-size: clamp(64px, 4.05vw, 72px);
  line-height: .85;
  letter-spacing: -.045em;
}

.decision-rail[data-motion-style="scroll-highlight"] .decision-rail-subheading {
  width: min(780px, calc(100vw - 48px));
  max-width: 780px;
  font-size: clamp(16px, 1.18vw, 19px);
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: -.018em;
}

.decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-statement-content,
.decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-statement[data-statement-state="3"] .decision-statement-content {
  position: relative;
  transform: none;
}

.decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-title-slot {
  transition: none;
}

.decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-statement[data-statement-state] .decision-title-slot-one {
  transform: translateY(calc(-50% - 1.47em));
}

.decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-statement[data-statement-state] .decision-title-slot-two {
  transform: translateY(calc(-50% - .49em));
}

.decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-statement[data-statement-state] .decision-title-slot-three {
  transform: translateY(calc(-50% + .49em));
}

.decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-statement[data-statement-state] .decision-title-slot-four {
  transform: translateY(calc(-50% + 1.47em));
}

.decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-title-line {
  position: relative;
  color: transparent;
  opacity: 1;
  transform: none;
  transition: none;
}

.decision-highlight-word {
  position: relative;
  display: inline-block;
  color: var(--highlight-muted);
}

.decision-highlight-char {
  position: relative;
  display: inline-block;
  color: var(--highlight-muted);
}

.decision-highlight-char::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: var(--ink);
  content: attr(data-char);
  opacity: 1;
  pointer-events: none;
  transform: none;
}

.decision-highlight-char::before {
  position: absolute;
  z-index: 2;
  top: .1em;
  right: -.045em;
  width: max(1px, .025em);
  height: .72em;
  border-radius: 999px;
  background: rgba(var(--lime-rgb), .42);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scaleY(.78);
  transform-origin: center;
}

.decision-rail[data-motion-style="scroll-highlight"]:not(.is-enhanced) .decision-highlight-word,
.decision-rail[data-motion-style="scroll-highlight"]:not(.is-enhanced) .decision-highlight-char {
  color: var(--ink);
}

.decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-rail-subheading {
  position: absolute;
  top: 100%;
  left: 50%;
  margin: var(--decision-rhythm) 0 0;
  opacity: 0;
  transform: translate(-50%, 22px);
  transition:
    opacity .62s ease,
    transform .86s cubic-bezier(.22, 1, .36, 1);
}

.decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-statement[data-statement-state="3"] .decision-rail-subheading {
  opacity: 1;
  transform: translate(-50%, 0);
}

.decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-statement[data-statement-state="3"] .decision-rail-title {
  transform: none;
}

.decision-rail[data-motion-style="scroll-highlight"].is-enhanced .journey-component {
  margin-top: -13vh;
}

@keyframes decision-character-ink {
  from { opacity: 0; transform: translateY(.035em); }
  to { opacity: 1; transform: none; }
}

@keyframes decision-caret-pass {
  0%, 100% { opacity: 0; transform: scaleY(.68); }
  12%, 84% { opacity: .5; transform: scaleY(.88); }
}

@keyframes decision-caret-rest {
  0%, 100% { opacity: .24; transform: scaleY(.78); }
  50% { opacity: .46; transform: scaleY(.9); }
}

/* Forty viewport units of pinned travel: enough for 45 glyphs, never a chapter. */
@media screen and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-statement {
    height: 140dvh;
  }

  .decision-rail[data-motion-style="scroll-highlight"] .decision-statement-steps i {
    height: 1px;
  }

  .decision-rail[data-motion-style="scroll-highlight"] .decision-statement-steps i:nth-child(1) { top: 36.4%; }
  .decision-rail[data-motion-style="scroll-highlight"] .decision-statement-steps i:nth-child(2) { top: 44.6%; }
  .decision-rail[data-motion-style="scroll-highlight"] .decision-statement-steps i:nth-child(3) { top: 52.9%; }
  .decision-rail[data-motion-style="scroll-highlight"] .decision-statement-steps i:nth-child(4) { top: 62.15%; }
}

@supports (animation-timeline: view()) {
  @media screen and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
    .decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-statement {
      view-timeline-name: --decision-writing;
      view-timeline-axis: block;
    }

    .decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-highlight-char::after {
      opacity: 0;
      transform: translateY(.035em);
      animation: decision-character-ink 1ms linear both;
      animation-range: var(--ink-start) var(--ink-end);
      animation-timeline: --decision-writing;
    }

    .decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-highlight-char::before {
      animation: decision-caret-pass 1ms linear both;
      animation-range: var(--caret-start) var(--caret-end);
      animation-timeline: --decision-writing;
    }

    .decision-rail[data-motion-style="scroll-highlight"].is-statement-complete .decision-highlight-char::after {
      opacity: 1;
      transform: none;
      animation: none;
    }

    .decision-rail[data-motion-style="scroll-highlight"].is-statement-complete .decision-highlight-char.is-last-character::before {
      opacity: .34;
      animation: decision-caret-rest 1.6s ease-in-out infinite;
    }
  }
}

@media (max-width: 1480px) and (min-width: 1361px) {
  .decision-rail[data-motion-style="scroll-highlight"] .decision-rail-title {
    font-size: clamp(60px, 4.25vw, 64px);
  }

  .decision-rail[data-motion-style="scroll-highlight"] .decision-rail-subheading {
    font-size: clamp(15px, 1.24vw, 17px);
  }
}

@media (max-width: 1360px) and (min-width: 761px) {
  .decision-rail[data-motion-style="scroll-highlight"] .decision-rail-title {
    font-size: clamp(56px, 5.4vw, 68px);
  }

  .decision-rail[data-motion-style="scroll-highlight"] .decision-rail-subheading {
    font-size: clamp(17px, 2vw, 19px);
  }
}

@media (min-width: 761px) and (max-height: 720px) {
  .decision-rail[data-motion-style="scroll-highlight"].is-enhanced .journey-component {
    margin-top: -8vh;
  }
}

@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .decision-rail[data-motion-style="scroll-highlight"] .decision-highlight-word,
  .decision-rail[data-motion-style="scroll-highlight"] .decision-highlight-char {
    color: var(--ink);
  }

  .decision-rail[data-motion-style="scroll-highlight"] .decision-highlight-char::after,
  .decision-rail[data-motion-style="scroll-highlight"] .decision-highlight-char::before {
    display: none;
  }
}

@media (max-width: 760px) {
  .decision-rail[data-motion-style="scroll-highlight"] .decision-rail-title {
    font-size: clamp(37px, 10.6vw, 50px);
    line-height: .85;
    letter-spacing: -.045em;
  }

  .decision-rail[data-motion-style="scroll-highlight"] .decision-rail-subheading {
    width: min(680px, calc(100vw - 36px));
    font-size: 16px;
    line-height: 1.48;
    letter-spacing: -.018em;
  }
}

@media print {
  .decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-statement-content {
    position: static;
  }

  .decision-rail[data-motion-style="scroll-highlight"].is-enhanced .decision-rail-subheading {
    position: static;
    width: auto;
    margin: var(--decision-rhythm) auto 0;
    opacity: 1;
    transform: none;
  }

  .decision-rail[data-motion-style="scroll-highlight"] .decision-highlight-word,
  .decision-rail[data-motion-style="scroll-highlight"] .decision-highlight-char {
    color: var(--ink);
  }

  .decision-rail[data-motion-style="scroll-highlight"] .decision-highlight-char::after,
  .decision-rail[data-motion-style="scroll-highlight"] .decision-highlight-char::before {
    display: none;
  }

  .decision-rail[data-motion-style="scroll-highlight"].is-enhanced .journey-component {
    margin-top: 0;
  }
}