/* Content remains readable before hydration or when JavaScript is unavailable. */
.reveal { opacity: 1; transform: none; filter: none; }
.vision-copy h2 { opacity: 1; filter: none; }
.reveal-pending .reveal { opacity: 0; transform: translateY(20px); filter: none; }
.reveal-pending:focus-within .reveal { opacity: 1; transform: none; }

.site-header:focus { outline: none; }
.hero-bottom { bottom: 76px; }
.sound-toggle { min-height: 44px; padding: 8px 12px; border-radius: 3px; background: rgba(8,8,9,.88); }
.sound-toggle[inert] { visibility: hidden; }
.hero-image-frame { will-change: auto; }
.hero-journey.is-motion-active .hero-image-frame { will-change: transform; }

/* Short screens get normal document flow, coordinated with Hero's static mode. */
@media (max-height: 560px) {
  .hero-journey { height: auto; }
  .hero-sticky { position: relative; height: auto; min-height: 100svh; }
  .hero-content { position: relative; height: auto; min-height: 100svh; padding: 100px 24px 110px; justify-content: flex-start; }
  .hero-title-wrap h1 { font-size: clamp(50px, 10vw, 85px); }
  .hero-subtitle { max-width: 560px; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .sound-toggle { position: static; margin: 0 24px 24px; width: fit-content; }
}
@media (max-width: 1100px) {
  .hero-bottom { bottom: 24px; }
  .sound-toggle { position: static; margin: 0 24px 24px; width: fit-content; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-delay: 0s !important; transition-delay: 0s !important; }
  .hero-journey { height: auto; }
  .hero-sticky { position: relative; height: auto; min-height: 100svh; }
  .hero-content { position: relative; height: auto; min-height: 100svh; padding-top: 120px; padding-bottom: 120px; }
  .hero-image-enter { animation: none !important; opacity: 1; }
  .hero-image-frame { transform: none !important; filter: none !important; }
  .hero-glare, .hero-aperture, .hero-cross, .shutter-overlay { display: none !important; }
  .reveal, .reveal-pending .reveal, .vision-copy h2 { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* A brief route accent never blocks links or delays navigation. */
.shutter-overlay.route-enter { visibility: visible; }
.shutter-overlay.route-enter span { transform: scaleY(.025); transition: none; }

.video-modal { overflow-y: auto; padding: 24px; }
.video-modal-panel { width: min(1100px, 100%, calc((100dvh - 140px) * 16 / 9)); min-width: 0; }
.video-modal-close { top: -48px; min-width: 44px; min-height: 44px; }
.video-modal-external { position: absolute; top: calc(100% + 12px); left: 0; right: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; color: #bbb; font-size: 12px; }
.video-modal-external a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.video-modal-fallback { padding: 18px; text-align: center; }
.video-modal-fallback p { font-size: 14px; }