/* Native prologue: spatial illustration first, readable HTML beneath. */
#intro.illustrated-intro { display: block; overflow: hidden; background: #050a12; isolation: isolate; }
#intro.illustrated-intro.hidden { display: none; }
#intro.illustrated-intro::after { z-index: 3; opacity: .35; }
.intro-scene { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 300ms linear; }
.intro-scene.is-active { opacity: 1; pointer-events: auto; }
.intro-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,7,13,.1) 38%, rgba(3,7,13,.34) 58%, #03070d 98%); pointer-events: none; }
.intro-scene-art { display: block; position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.intro-scene.is-active .intro-scene-art { animation: intro-camera 5s ease-out both; }
.intro-scene-copy { position: absolute; z-index: 2; left: max(7vw, 24px); right: max(7vw, 24px); bottom: max(13vh, 100px); max-width: 1000px; color: var(--text, #e8fbff); }
.intro-scene-copy h2 { margin: 0; border: 0; padding: 0; color: #eff9ff; font: 700 clamp(30px, 4.3vw, 66px)/1.06 var(--font-ui); letter-spacing: .065em; text-shadow: 0 2px 24px #03070d; }
.intro-scene-copy p { max-width: 650px; margin: 18px 0 0; color: #bed0df; font: 500 clamp(16px, 1.55vw, 22px)/1.55 var(--font-ui); letter-spacing: .025em; }
.intro-scene-core .intro-scene-copy { max-width: 870px; }
.intro-scene-core h2 { color: var(--cyan, #55f6ff); text-wrap: balance; }
.intro-runner { position: absolute; z-index: 1; width: min(28vw, 40vh); height: min(28vw, 40vh); object-fit: contain; top: 28%; left: 50%; transform: translate(-50%, -12%); filter: drop-shadow(0 22px 18px #000b); }
.intro-scene.is-active .intro-runner { animation: intro-launch 4.7s ease-out both; }
#intro.illustrated-intro #intro-skip { z-index: 5; opacity: 1; min-width: 132px; min-height: 44px; right: max(26px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); background: #07111deb; color: #bed0df; font: 600 12px/1 var(--font-mono); border: 1px solid #435768; border-radius: 4px; letter-spacing: .14em; transition: color 150ms, border-color 150ms; }
#intro.illustrated-intro #intro-skip:hover { color: #fff; border-color: var(--cyan); }
#intro.illustrated-intro #intro-skip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.intro-image-missing { visibility: hidden; }
.intro-fallback { background: radial-gradient(ellipse at 60% 35%, #142432, #050a12 70%); }
@keyframes intro-camera { from { transform: scale(1.025); } to { transform: scale(1); } }
@keyframes intro-launch { from { transform: translate(-50%, 0%) scale(1.05); } to { transform: translate(-50%, -12%) scale(.97); } }
@media (max-width: 960px) {
  .intro-scene-copy { left: 6vw; right: 6vw; }
  .intro-scene-art { object-fit: cover; }
}
@media (max-width: 600px) {
  .intro-scene-art { height: 78%; width: 100%; left: 0; object-fit: cover; object-position: 65% 40%; }
  .intro-scene::after { background: linear-gradient(180deg, transparent 35%, #03070d99 57%, #03070d 77%); }
  .intro-scene-copy { left: 24px; right: 24px; bottom: max(17vh, 110px); }
  .intro-scene-copy h2 { font-size: clamp(28px, 8vw, 43px); line-height: 1.08; letter-spacing: .035em; }
  .intro-scene-copy p { font-size: 17px; margin-top: 15px; }
  .intro-runner { width: 44vw; height: 44vw; top: 25%; }
  .intro-scene-selected-runner .intro-scene-art, .intro-scene-core .intro-scene-art { object-position: 50% 40%; }
  #intro.illustrated-intro #intro-skip { right: max(24px, env(safe-area-inset-right)); }
}
@media (max-height: 480px) and (min-width: 601px) {
  .intro-scene-copy { bottom: 70px; }
  .intro-scene-copy h2 { font-size: 30px; }
  .intro-scene-copy p { margin-top: 8px; font-size: 16px; }
  .intro-runner { top: 19%; }
}
@media (prefers-reduced-motion: reduce) {
  /* Override the legacy global reduced-motion duration, including its !important. */
  .intro-scene { transition: none !important; }
  .intro-scene.is-active .intro-scene-art, .intro-scene.is-active .intro-runner { animation: none !important; }
}

/* No animated work on hidden tabs or when presentation motion is disabled. */
.illustrated-intro.motion-paused .intro-scene-art, .illustrated-intro.motion-paused .intro-runner { animation: none !important; }
.intro-scene-selected-runner .intro-runner { width: min(22vw, 32vh); height: min(22vw, 32vh); top: 32%; }
@media (max-width: 600px) { .intro-scene-selected-runner .intro-runner { width: 44vw; height: 44vw; top: 27%; } }