/* Quarter the original scroll travel, preserving the visible stage height.
   Keep this geometry from loading through playback, including decoder recovery. */
.tour-fullscreen {
  --tour-track-original: 850svh;
  --tour-stage-height: calc(100svh - var(--tour-top));
}
.tour-fullscreen .tour-sticky {
  height: var(--tour-stage-height);
}
.tour-fullscreen.is-scroll-video {
  height: calc(var(--tour-stage-height) + (var(--tour-track-original) - var(--tour-stage-height)) / 4);
}

/* Show the actual frame instead of magnifying a narrow crop of a landscape film. */
.tour-fullscreen .tour-poster,
.tour-fullscreen .tour-video {
  object-fit: contain;
  object-position: center;
}

/* Fit the complete desktop film inside the space below the header.
   Bound both dimensions: browser chrome / display scaling may shorten the viewport.
   The actual film is 1914:1080 (3828:2160), slightly narrower than 16:9. */
@media (min-width: 1024px) {
  .tour-fullscreen .tour-frame,
  .tour-fullscreen.is-scroll-video .tour-frame {
    inset: 50% auto auto 50%;
    width: min(calc(100% - 2 * var(--tour-gutter)), calc((var(--tour-stage-height) - 2 * var(--tour-gutter)) * 1.7722222222));
    height: auto;
    aspect-ratio: 1914 / 1080;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  .tour-fullscreen .tour-poster,
  .tour-fullscreen .tour-video {
    object-fit: contain;
  }
}

/* Portrait phones/tablets keep the complete lake scene and a stable video box. */
@media (max-width: 1023px) and (orientation: portrait) {
  .tour-fullscreen {
    --tour-track-original: 500svh;
    --tour-stage-height: min(calc((100vw - 2 * var(--tour-gutter)) * .564263323 + 2 * var(--tour-gutter)), calc(100svh - var(--tour-top)));
  }
  .tour-fullscreen .tour-sticky {
    height: var(--tour-stage-height);
    max-height: calc(100svh - var(--tour-top));
  }
  .tour-status { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 8px 12px; font-size: 13px; }
}

/* A complete mobile scene, rather than a short film above an empty scroll track.
   The decoration belongs to the sticky stage and never changes the film crop. */
@media (max-width: 767px) and (orientation: portrait) {
  body[data-page="home"] .tour-fullscreen {
    --tour-stage-height: calc(100svh - var(--tour-top));
    --tour-mobile-gutter: 16px;
    --tour-mobile-frame-height: calc((100vw - 2 * var(--tour-mobile-gutter)) * .564263323);
  }
  .tour-fullscreen .tour-sticky {
    height: var(--tour-stage-height);
    max-height: none;
    overflow: clip;
    border-radius: 28px;
    background: #f1f4eb;
  }
  .tour-fullscreen .tour-sticky::before,
  .tour-fullscreen .tour-sticky::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: calc((100% - var(--tour-mobile-frame-height)) / 2);
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .tour-fullscreen .tour-sticky::before {
    top: 0;
    background-image: url('/assets/decor/tour-mobile-top.svg');
    background-position: center bottom;
  }
  .tour-fullscreen .tour-sticky::after {
    bottom: 0;
    background-image: url('/assets/decor/tour-mobile-bottom.svg');
    background-position: center top;
  }
  .tour-fullscreen .tour-frame,
  .tour-fullscreen.is-scroll-video .tour-frame {
    z-index: 1;
    inset: 50% var(--tour-mobile-gutter) auto;
    width: calc(100% - 2 * var(--tour-mobile-gutter));
    height: var(--tour-mobile-frame-height);
    margin: 0;
    transform: translateY(-50%);
    border-radius: 18px;
    box-shadow: 0 12px 32px #123f2e1c, 0 0 0 4px #fffefb;
  }
}