/* The film owns one continuous sticky stage on desktop and touch devices. */
html.cinematic-enabled .hero-film,
html.cinematic-enabled body.launch-real-hero.motion-enabled .hero-film {
  height: 600svh;
  min-height: 0;
  position: relative;
  background: #102c32;
  overflow: visible;
}

html.cinematic-enabled .hero-stage,
html.cinematic-enabled body.launch-real-hero.motion-enabled .hero-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

html.cinematic-enabled #villa-flight {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}

html.cinematic-enabled #villa-flight.ready { opacity: 1; }
html.cinematic-enabled .flight-poster { position: absolute; inset: 0; }
html.cinematic-enabled .flight-poster img { width: 100%; height: 100%; object-fit: cover; }
html.cinematic-enabled .film-overlay { will-change: opacity; }
html.cinematic-enabled .film-bottom { bottom: max(24px, env(safe-area-inset-bottom)); }
html.cinematic-enabled .film-bottom::before { content: ''; position: absolute; inset: -80px -6vw -40px; background: linear-gradient(transparent, rgba(5,25,30,.58)); z-index: -1; pointer-events: none; }
html.cinematic-enabled .film-credit { text-shadow: 0 1px 5px #0a1d20; }
html.cinematic-enabled .film-skip > span:empty { display: none; }

/* One restrained opening line, with gold reserved for the place and experience. */
body.cinematic-site .opening h1 { color: #e1c58c; }
.cinematic-site .opening .discover-label {
  color: #fff;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 18px;
  max-width: 470px;
  text-wrap: balance;
}
.cinematic-site .opening .discover-emphasis { color: #e1c58c; }

@media (max-width: 700px) {
  html.cinematic-enabled .hero-film,
  html.cinematic-enabled body.launch-real-hero.motion-enabled .hero-film { height: 540svh; }
  html.cinematic-enabled .hero-stage,
  html.cinematic-enabled body.launch-real-hero.motion-enabled .hero-stage { height: 100svh; min-height: 0; }
  html.cinematic-enabled .film-overlay { padding-inline: 24px; }
  html.cinematic-enabled .opening { justify-content: flex-end; padding-bottom: max(160px, calc(env(safe-area-inset-bottom) + 140px)); }
  html.cinematic-enabled .opening h1 { font-size: clamp(82px, 25vw, 118px); }
  .cinematic-site .opening .discover-label { font-size: 11px; line-height: 1.8; letter-spacing: 1.2px; margin: 0 0 16px; max-width: 300px; }
  html.cinematic-enabled .opening-actions { gap: 10px; }
  html.cinematic-enabled .film-button { min-height: 44px; }
  html.cinematic-enabled .film-bottom { bottom: max(18px, env(safe-area-inset-bottom)); }
  html.cinematic-enabled .film-chapters { gap: 11px; font-size: 7px; }
  html.cinematic-enabled .cinematic-site .film-chapters { display: flex; justify-content: space-between; gap: 7px; font-size: 8px; letter-spacing: .25px; }
  html.cinematic-enabled .film-chapters span { white-space: nowrap; }
  html.cinematic-enabled .film-credit { font-size: 8px; max-width: 90%; line-height: 1.55; }
}

/* Reduced motion retains deliberate, finger-controlled scrubbing. */
@media (max-width: 360px) and (max-height: 650px) and (orientation: portrait) {
  html.cinematic-enabled .opening { padding-bottom: max(136px, calc(env(safe-area-inset-bottom) + 116px)); }
}

html.cinematic-enabled.cinematic-reduced .hero-film,
html.cinematic-enabled.cinematic-reduced body.launch-real-hero.motion-enabled .hero-film { height: 600svh; }
html.cinematic-enabled.cinematic-reduced .hero-stage { position: sticky; }
html.cinematic-enabled.cinematic-reduced #villa-flight { transition: none; }
html.cinematic-enabled.cinematic-reduced .film-overlay { transition: none; transform: none !important; }

@media (max-width: 700px) {
  html.cinematic-enabled.cinematic-reduced .hero-film,
  html.cinematic-enabled.cinematic-reduced body.launch-real-hero.motion-enabled .hero-film { height: 540svh; }
}

@media (max-height: 550px) and (orientation: landscape) {
  html.cinematic-enabled .opening { justify-content: flex-start; align-items: center; padding-bottom: 72px; }
  html.cinematic-enabled .opening h1 { font-size: 70px; }
  html.cinematic-enabled .opening-copy .eyebrow,
  html.cinematic-enabled .discover-label,
  html.cinematic-enabled .island-label,
  html.cinematic-enabled .opening-copy p { display: none; }
  html.cinematic-enabled .opening-actions { padding-top: 8px; }
  html.cinematic-enabled .film-overlay h2 { font-size: 40px; }
}