/* The frozen delivery's layout and original TK intro remain intact. */
/* Reserve the scrollbar before playback; removing the intro's scroll lock
   must not resize the hero while its camera movement is already visible. */
html { scrollbar-gutter: stable; }
.hero { --hero-media-position: 60% center; isolation: isolate; }
.hero::before {
  z-index: 0;
  background-image: url("./hero-portrait.webp") !important;
  background-position: var(--hero-media-position);
}
.hero[data-header-motion="ready"]::before,
.hero[data-header-motion="playing"]::before {
  /* Keep the matching wide shot behind the video until the final dissolve. */
  background-image: url("./hero-luxury-hall-start-5s.webp") !important;
}
.hero .header-motion-film {
  display: block;
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-media-position);
  pointer-events: none;
  opacity: 1;
  transition: opacity 625ms ease-in-out;
}
.hero[data-header-motion="still"] .header-motion-film { opacity: 0; }
.hero .hero-overlay { z-index: 1; pointer-events: none; }
.hero::after { z-index: 1; }
.hero .hero-content { z-index: 2; }
.hero .hero-scroll { z-index: 2; }
html[data-theme="dark"] .hero::before,
html[data-theme="dark"] .hero .header-motion-film {
  filter: brightness(.62) saturate(.82);
}
@media (max-width: 1180px) {
  .hero { --hero-media-position: 68% center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .header-motion-film { display: none; transition: none; }
  .hero::before { background-image: url("./hero-portrait.webp") !important; }
}