/* Infinity & Beyond — film-v6: the homepage film stage (canvas frame sequence). Loads after movie-home-v5.css and overrides its video stage. */
.movie-stage { position: fixed; inset: 0; z-index: -1; background: #0a1913; overflow: hidden; }
.movie-stage #film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.movie-stage #movie-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity 900ms ease; }
[data-frame-ready="true"] #movie-poster { opacity: 0; }
/* Legibility shade: lighter than v5 so the film breathes, plus a soft vignette. */
.movie-shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, #05130ec4 0%, #06181250 48%, #0618120a 100%),
    linear-gradient(0deg, #05130eb8 0%, transparent 38%, #05130e3d 100%),
    radial-gradient(130% 100% at 50% 45%, transparent 58%, #04110c8c 100%);
}
/* Film grain: a static, tiled noise layer. Cheap, and it ties film frames, dissolves and stills together. */
.movie-stage::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .085; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
/* Chapter copy eases in when its chapter is active and out as the next one takes over. */
.movie-copy { transition: opacity 850ms cubic-bezier(.2,.6,.2,1), transform 850ms cubic-bezier(.2,.6,.2,1); will-change: opacity, transform; }
.movie-chapter[data-chapter-state="inactive"] .movie-copy { opacity: 0; transform: translateY(26px); pointer-events: none; }
.movie-static .movie-copy, .movie-static .movie-chapter[data-chapter-state="inactive"] .movie-copy { opacity: 1; transform: none; pointer-events: auto; }
/* Header: transparent over the film; the shade above supplies the contrast. */
.movie-home-v5 .site-header { background: transparent; }
.movie-home-v5 .header-inner { border-bottom-color: transparent; }
/* Controls: quieter. The chapter numbers stay; the location caption goes (it collided with chapter links); the motion control becomes a small pill. */
.movie-controls { bottom: 26px; }
.movie-location { display: none; }
.movie-static .movie-controls { background: transparent; padding: 0; }
[data-film-mode] {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px 9px 11px; border-radius: 999px;
  background: #0b1f1a66; border: 1px solid #f0e9d540; color: #f3ecd9; font:500 var(--type-caption)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .3s, background .3s;
}
[data-film-mode]:hover, [data-film-mode]:focus-visible { border-color: #f0e9d5a6; background: #0b1f1a99; }
[data-film-mode]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #e4d6b4; box-shadow: 0 0 0 3px #e4d6b433; }
[data-film-mode][aria-pressed="false"]::before { background: #f3ecd980; box-shadow: none; }
[data-film-mode][disabled] { opacity: .55; }
#movie-journey[data-state="poster"] ~ .movie-controls [data-film-mode] { display: inline-flex; }
.preview-control { display: none !important; }
/* Loading: the progress line breathes until the coarse pass has landed. */
#movie-journey[data-state="loading"] ~ .movie-progress > span,
#movie-journey[data-state="loading"] .movie-progress > span { animation: film-breathe 1.6s ease-in-out infinite; }
@keyframes film-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* Static / reduced-motion mode keeps the photographic reading version from v5 but with the v6 posters. */
.movie-static .movie-stage { display: none; }
@media (max-width: 700px) {
  .movie-shade {
    background:
      linear-gradient(90deg, #05130e9e, #05130e26),
      linear-gradient(0deg, #05130ec4 0%, #05130e1a 55%, #05130e5c 100%);
  }
  [data-film-mode] { padding: 8px 11px 8px 10px; font-size:var(--type-caption); }
}
@media (prefers-reduced-motion: reduce) { .movie-copy { transition: none; } #movie-poster { transition: none; } }
/* Short viewports (laptops, browser windows with toolbars): bring the copy up and scale the display type so it never reaches the chapter numbers. */
@media (min-width: 701px) and (max-height: 860px) {
  .movie-copy { top: 17svh; }
  .movie-chapter-arrival .movie-copy { top: 14svh; }
  .movie-copy h1 { font-size:var(--type-page); margin-bottom: 22px; }
  .movie-copy h2 { font-size:var(--type-section); margin-bottom: 22px; }
  .movie-chapter-rooms .movie-copy { top: 11svh; }
  .movie-chapter-rooms h2 { font-size:var(--type-section); }
  .movie-chapter-response .movie-copy { top: 12svh; }
  .movie-chapter-response h2 { font-size:var(--type-section); }
  .movie-copy > p { font-size:var(--type-body); line-height: 1.7; margin-bottom: 18px; }
  .movie-prices > div { padding-block: 9px; }
  .movie-prices dd { font-size:var(--type-card); }
}
@media (min-width: 701px) and (max-height: 700px) {
  .movie-copy h1 { font-size:var(--type-page); }
  .movie-copy h2 { font-size:var(--type-section); }
  .movie-chapter-rooms h2 { font-size:var(--type-section); }
  .movie-copy > p { font-size:var(--type-body); }
  .movie-copy .movie-fine { font-size:var(--type-caption); }
}
/* Chapter numbers become a quiet vertical rail on the right for tablet and desktop widths, so they can never sit under the chapter copy. */
@media (min-width: 701px) {
  .movie-chapter-nav {
    position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 36;
    flex-direction: column; align-items: flex-end; gap: 9px;
  }
  .movie-chapter-nav a {
    min-width: 0; height: auto; padding: 3px 10px 3px 0; flex-direction: row; gap: 0;
    border-bottom: 0; border-right: 1px solid #f9f0d54d; font-size:var(--type-caption); letter-spacing: .06em; color: #f6f1dd80;
    transition: color .3s, border-color .3s;
  }
  .movie-chapter-nav a:hover, .movie-chapter-nav a[aria-current] { color: #fff; border-color: #fff; }
  .movie-controls { left: auto; justify-content: flex-end; }
  .movie-copy { padding-right: 56px; }
}