.hero-scene {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}

.hero-scene.is-active { z-index: 3; opacity: 1; }
.hero-scene-image,
.hero-scene-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-scene-image { opacity: 0; transition: opacity 200ms ease; }
.hero-scene.has-poster .hero-scene-image { opacity: 1; }
.hero-scene-video { opacity: 0; transition: opacity 350ms ease; }
.hero-scene.has-video .hero-scene-video { opacity: 1; }
#hero-carousel .frame-label,
#hero-carousel .frame-corner { z-index: 4; pointer-events: none; }

.hero-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
}
.hero-carousel-controls button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.hero-playback { gap: 9px; padding: 0 2px; font-size: 10px; font-weight: 650; }
.hero-playback-icon { width: 13px; font-size: 12px; line-height: 1; }
.hero-playback-text { min-width: 47px; text-align: left; }
.hero-scene-dots { display: flex; gap: 0; }
.hero-scene-dot { position: relative; padding: 0; }
.hero-scene-dot span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #aaa69e;
  transition: width 250ms ease, background-color 250ms ease;
}
.hero-scene-dot[aria-current="true"] span { width: 23px; border-radius: 6px; background: var(--red); }
.hero-scene-arrows { display: flex; gap: 5px; }
.hero-carousel-controls .hero-scene-arrow { width: 44px; border: 1px solid var(--line); font-size: 19px; }
@media (hover: hover) {
  .hero-carousel-controls button:hover { color: var(--red); }
  .hero-scene-dot:hover span { background: var(--red); }
  .hero-carousel-controls .hero-scene-arrow:hover { border-color: var(--red); }
}
@media (max-width: 500px) {
  .hero-carousel-controls { gap: 4px; }
  .hero-scene-dots { margin-inline: -7px; }
  .hero-carousel-controls .hero-scene-dot { min-width: 30px; }
  .hero-scene-arrows { gap: 4px; }
  #hero-carousel .selected-place span { max-width: 170px; }
}

/* Keep the entire cinema frame visible, including its surroundings. */
#hero-carousel .stadium-frame { aspect-ratio: 16 / 9; background: #111; }
.film-titles { position:absolute; z-index:5; left:6%; bottom:12%; max-width:88%; color:white; pointer-events:none; opacity:0; transform:translateY(12px); transition:opacity .45s ease,transform .6s ease; text-shadow:0 2px 25px #0009; }
.film-titles.is-visible { opacity:1; transform:translateY(0); }
.film-titles span { display:block; font-size:clamp(8px,.75vw,12px); font-weight:700; letter-spacing:.17em; margin-bottom:12px; }
.film-titles strong { display:block; white-space:pre-line; font-size:clamp(28px,4.1vw,68px); line-height:.92; letter-spacing:-.055em; font-weight:850; }
.film-progress { position:absolute; z-index:6; height:3px; left:0; right:0; bottom:0; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .25s linear; }
@media(min-width:801px){.hero-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,4vw,64px)}.hero h1{font-size:clamp(52px,5.5vw,82px)}}
@media(max-width:800px){.film-titles strong{font-size:clamp(29px,7vw,52px)}.film-titles span{font-size:8px;margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.film-titles,.film-progress,.hero-scene{transition:none}}