/* Native smooth navigation; wheel and touch scrolling remain browser-controlled. */
html { scroll-behavior: smooth; }

/* These states are installed only after the observer has been registered. */
.reveal-pending { opacity: 0; }
.reveal-pending:focus-within { opacity: 1; }

/* Keep artwork compositing stable before, during and after its opacity transition. */
.reveal-surface {
  isolation: isolate;
  background-color: var(--paper);
}
.hero-art.reveal-surface::before {
  content: "";
  position: absolute;
  inset: 0 0 0 -5%;
  z-index: -1;
  background-color: var(--paper);
  pointer-events: none;
}

.story-steps.journey-pending::before { transform: scaleX(0); }
.story-steps.journey-drawing::before {
  transform-origin: left center;
  animation: journey-trace-x 2.7s cubic-bezier(.3, 0, .3, 1) both;
}
@keyframes journey-trace-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes journey-trace-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@media (max-width: 700px) {
  .story-steps.journey-drawing::before { animation: none; }
  .story-steps li.step-line-pending:not(:last-child)::after { transform: scaleY(0); }
  .story-steps li.step-tracing:not(:last-child)::after {
    transform-origin: center top;
    animation: journey-trace-y .9s ease-in-out both;
    animation-delay: var(--step-line-delay, 0ms);
  }
}
@media (prefers-reduced-motion: reduce), print {
  html { scroll-behavior: auto; }
  .reveal-pending { opacity: 1; }
  .story-steps.journey-pending::before,
  .story-steps li.step-line-pending::after,
  .story-steps.journey-drawing::before,
  .story-steps li.step-tracing::after { animation: none !important; transform: none !important; }
}