/* Home page films: scroll-scrubbed shots and ambient loops. Film only, no copy. */
.scrub { position: relative; height: var(--scrub-h, 400vh); background: #C9B48C; }
.scrub-stage { position: sticky; top: var(--header-h, 64px); height: calc(100vh - var(--header-h, 64px)); height: calc(100svh - var(--header-h, 64px)); overflow: hidden; background: #C9B48C; }
.scrub-poster, .scrub-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scrub-poster { background: #C9B48C center / cover no-repeat; }
.scrub-stage video { opacity: 0; transform: translateZ(0); will-change: transform; transition: opacity .5s var(--ease); }
.scrub.is-ready .scrub-stage video { opacity: 1; }
.scrub.is-failed .scrub-stage video { display: none; }
.scrub-ring { position: absolute; right: 24px; bottom: 24px; width: 32px; height: 32px; color: #3A2416; opacity: .6; transition: opacity .4s var(--ease); }
.scrub.is-ready .scrub-ring, .scrub.is-failed .scrub-ring { opacity: 0; }
.scrub-still { display: none; }

/* Phones, portrait tablets, short landscape phones and reduced motion get the resting frame instead of the scroll film. */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) {
  .scrub { height: auto; }
  .scrub-stage { display: none; }
  .scrub-still { display: block; width: 100%; height: auto; }
}
@media (max-height: 560px) { .scrub-ring { display: none; } }

.loop-band { position: relative; height: min(78vh, 640px); min-height: 360px; overflow: hidden; background: #D7B888; }
/* The hero is the film's own 21:9 shape on every device: as tall as the screen is wide divided by 2.333, so the whole frame always shows. */
.loop-hero { height: auto; min-height: 0; aspect-ratio: 2200 / 943; }
.loop-hero img, .loop-hero video { object-fit: contain; object-position: 50% 50%; }
.loop-band img, .loop-band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.loop-figure { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: #D7B888; aspect-ratio: 3 / 4; }
.loop-figure img, .loop-figure video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loop-band video, .loop-figure video { opacity: 0; transition: opacity .6s var(--ease); }
.loop-band.is-playing video, .loop-figure.is-playing video { opacity: 1; }
@media (max-width: 720px) { .loop-band:not(.loop-hero) { height: 56vh; } }
@media (prefers-reduced-motion: reduce) { .loop-band video, .loop-figure video { display: none; } }