/* The masks are a baseline reveal, with enough room for the actual display face's ink. */
.story-line {
  display: block;
  overflow: clip;
  padding-block: 0.09em 0.13em;
  margin-block: -0.09em -0.13em;
}
.story-line-inner {
  display: block;
  transform-origin: left bottom;
}
:is(#hero-title, #intro-title, #community-title, #guide-title) :is(.story-line, .story-line-inner) {
  color: inherit;
}

/* Wait for the quiz handoff instead of spending the hero entrance behind the gate. */
:root.story-motion-ready[data-motion="full"] .hero-copy {
  animation: none;
}

.routine-journey.story-journey li {
  position: relative;
  border-top-color: transparent;
}
.story-journey-track {
  position: absolute;
  inset: -2px 0 auto;
  height: 2px;
  display: block;
  background: #7ba68a;
  transform-origin: left center;
  pointer-events: none;
}

/* Each cropped photograph has its own timeline; the subject moves only twelve pixels. */
@supports (animation-timeline: view()) {
  .story-depth {
    view-timeline-name: --story-photo;
    view-timeline-axis: block;
  }
  :root[data-motion="full"][data-welcome="done"][data-story-hidden="false"]:not(
      [data-input="keyboard"]
    )
    .story-depth.story-in-view
    .story-depth-image {
    animation: story-photo-depth 1ms linear both;
    animation-timeline: --story-photo;
    animation-range: entry 0% exit 100%;
  }
  @keyframes story-photo-depth {
    from {
      transform: translateY(-12px) scale(1.08);
    }
    to {
      transform: translateY(12px) scale(1.08);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-depth-image {
    animation: none !important;
    transform: none !important;
  }
}
@media print {
  .story-depth-image {
    animation: none !important;
    transform: none !important;
  }
  .story-line {
    overflow: visible;
  }
}