/* Opus-derived choreography: a deliberate arrival, image entrances, four chapters,
   and the closing wordmark. The unenhanced page is always complete and visible. */
:root { --motion-ease: cubic-bezier(.16, 1, .3, 1); }
.story-display { display: none; }
.story-pin { padding-bottom: 24px; }
.story-progress { visibility: hidden; height: 1px; margin-top: 24px; background: var(--rule); }
.hero-curtains { display: none; }
.is-revealing { overflow: hidden; }
.colossus { overflow: hidden; padding-top: clamp(36px, 5vw, 84px); padding-bottom: 8px; line-height: .84; color: var(--ink); white-space: nowrap; }
.colossus > span { display: inline-block; font-size: calc(min(100vw - 2 * var(--gutter), var(--max)) * .1935); font-weight: 600; font-stretch: 125%; letter-spacing: -.012em; transform-origin: left bottom; }

@media (min-width: 1024px) {
  .story-progress { margin-left: calc((100% + var(--gap)) / 12 * 4); }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .arrival .line { overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
  .motion-enabled .arrival .line > span { display: inline-block; }
  /* Four temporary curtains, never an image-loading screen. JS removes them within 1.8s. */
  .motion-enabled .hero-curtains { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
  .motion-enabled .hero-curtains > span { background: var(--paper); transform-origin: left top; }
}

/* Named view timelines replace Opus V2's per-scroll JS. Unsupported browsers keep
   their normal story layout and receive a once-only footer entrance instead. */
@supports (animation-timeline: view()) and (animation-range: contain 0% contain 100%) and (view-timeline-inset: 88px 24px) {
  @media (min-width: 1024px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
    .motion-enabled .story-track.is-enhanced {
      height: calc(var(--panel-height) + 120svh);
      view-timeline: --mizuno-story block;
      view-timeline-inset: 88px calc(100svh - 88px - var(--panel-height));
    }
    .motion-enabled .is-enhanced .story-pin { position: sticky; top: 88px; }
    /* Measuring and enhanced states have exactly the same panel layout. */
    .motion-enabled :is(.is-measuring, .is-enhanced) .story-display {
      display: grid; margin-bottom: clamp(24px, 3vh, 36px); overflow: hidden;
      font-size: clamp(3.25rem, 6.1vw, 6.4rem); font-weight: 280;
      line-height: 1.1; letter-spacing: -.035em;
    }
    .story-word { grid-area: 1 / 1; white-space: nowrap; opacity: 0; }
    .story-word:first-child { opacity: 1; }
    .motion-enabled .is-enhanced .story-word,
    .motion-enabled .is-enhanced .stage img,
    .motion-enabled .is-enhanced .stage-name::before,
    .motion-enabled .is-enhanced .story-progress > span {
      animation-duration: 1ms; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --mizuno-story; animation-range: contain 0% contain 100%;
    }
    .motion-enabled .is-enhanced .story-word:nth-child(1) { animation-name: story-word-one; }
    .motion-enabled .is-enhanced .story-word:nth-child(2) { animation-name: story-word-two; }
    .motion-enabled .is-enhanced .story-word:nth-child(3) { animation-name: story-word-three; }
    .motion-enabled .is-enhanced .story-word:nth-child(4) { animation-name: story-word-four; }
    /* The actual image/label sequence always stays readable. Focus is movement, not disappearance. */
    .motion-enabled .is-enhanced .stage:nth-child(1) img { animation-name: story-focus-one; }
    .motion-enabled .is-enhanced .stage:nth-child(2) img { animation-name: story-focus-two; }
    .motion-enabled .is-enhanced .stage:nth-child(3) img { animation-name: story-focus-three; }
    .motion-enabled .is-enhanced .stage:nth-child(4) img { animation-name: story-focus-four; }
    .motion-enabled .is-enhanced .stage:nth-child(1) .stage-name::before { animation-name: story-rule-one; }
    .motion-enabled .is-enhanced .stage:nth-child(2) .stage-name::before { animation-name: story-rule-two; }
    .motion-enabled .is-enhanced .stage:nth-child(3) .stage-name::before { animation-name: story-rule-three; }
    .motion-enabled .is-enhanced .stage:nth-child(4) .stage-name::before { animation-name: story-rule-four; }
    .motion-enabled .is-enhanced .story-progress { visibility: visible; }
    .motion-enabled .is-enhanced .story-progress > span {
      display: block; height: 100%; background: var(--ink); transform-origin: left;
      animation-name: story-progress;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-enabled .colossus { view-timeline: --mizuno-closing block; }
    .motion-enabled .colossus > span {
      animation: closing-expand 1ms linear both;
      animation-timeline: --mizuno-closing;
      animation-range: entry 0% entry 100%;
    }
  }
}

@keyframes story-word-one {
  0%, 18% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; transform: translateY(-.32em); }
}
@keyframes story-word-two {
  0%, 18% { opacity: 0; transform: translateY(.32em); }
  25%, 43% { opacity: 1; transform: none; }
  50%, 100% { opacity: 0; transform: translateY(-.32em); }
}
@keyframes story-word-three {
  0%, 43% { opacity: 0; transform: translateY(.32em); }
  50%, 68% { opacity: 1; transform: none; }
  75%, 100% { opacity: 0; transform: translateY(-.32em); }
}
@keyframes story-word-four {
  0%, 68% { opacity: 0; transform: translateY(.32em); }
  75%, 100% { opacity: 1; transform: none; }
}
@keyframes story-focus-one { 0%, 18% { transform: translateY(-9px); } 25%, 100% { transform: none; } }
@keyframes story-focus-two { 0%, 18% { transform: none; } 25%, 43% { transform: translateY(-9px); } 50%, 100% { transform: none; } }
@keyframes story-focus-three { 0%, 43% { transform: none; } 50%, 68% { transform: translateY(-9px); } 75%, 100% { transform: none; } }
@keyframes story-focus-four { 0%, 68% { transform: none; } 75%, 100% { transform: translateY(-9px); } }
@keyframes story-rule-one { 0%, 18% { opacity: 1; } 25%, 100% { opacity: .22; } }
@keyframes story-rule-two { 0%, 18% { opacity: .22; } 25%, 43% { opacity: 1; } 50%, 100% { opacity: .22; } }
@keyframes story-rule-three { 0%, 43% { opacity: .22; } 50%, 68% { opacity: 1; } 75%, 100% { opacity: .22; } }
@keyframes story-rule-four { 0%, 68% { opacity: .22; } 75%, 100% { opacity: 1; } }
@keyframes story-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes closing-expand { from { transform: scaleX(.68) translateY(20px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-curtains, .story-display, .story-progress { display: none !important; }
  .story-track.is-enhanced { height: auto !important; }
  .story-pin { position: static !important; }
  .stage img, .colossus > span { transform: none !important; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-curtains, .story-display, .story-progress { display: none !important; }
  .story-track.is-enhanced { height: auto !important; }
  .story-pin { position: static !important; }
  .stage img, .colossus > span { transform: none !important; }
  .stage-name { display: block !important; color: var(--ink); }
}