/* =========================================================================
   Lusso — scroll film
   A full-bleed deep-navy cinematic section dropped into the light editorial
   site. It owns its own dark palette (--film-*) so nothing here leaks into
   the rest of the page, and fades into the page background at both ends so
   the join with the light sections is invisible.
   ========================================================================= */

/* Declared on :root, not on .film — the intro/outro gradients are SIBLINGS of
   .film, so a palette scoped to .film would leave their var() references
   unresolved and silently drop the whole background declaration. */
:root {
  --film-bg:    #1B3351;
  --film-text:  #F6F1E7;
  --film-dim:   rgba(246, 241, 231, 0.58);
  --film-gold:  #C6A15B;
  --film-gold-b:#E2C285;
}

.film {
  position: relative;
  background: var(--film-bg);
  color: var(--film-text);
}

/* ── the scroll track ── */
.film-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.film-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.9s var(--ease, ease);
}
.film.is-loaded .film-canvas { opacity: 1; }

/* Vignette + top/bottom scrims: darkens the edges so the huge type always
   has contrast, and hides the seam where the film meets the light page. */
.film-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 82% at 50% 48%, transparent 42%, rgba(20, 38, 61, 0.86) 100%),
    linear-gradient(to bottom, rgba(20, 38, 61, 0.80), transparent 26%, transparent 62%, rgba(20, 38, 61, 0.88));
}

/* ── loader ── */
.film-loader {
  position: absolute;
  left: 50%;
  bottom: 3.4rem;
  transform: translateX(-50%);
  z-index: 6;
  width: 150px;
  height: 1px;
  background: rgba(198, 161, 91, 0.22);
  overflow: hidden;
  transition: opacity 0.6s ease;
}
.film.is-loaded .film-loader { opacity: 0; }
.film-loadbar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--film-gold);
  transition: width 0.25s ease;
}

/* ── captions ── */
.film-cap {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  will-change: opacity, transform;
  max-width: min(54rem, 86vw);
}
/* Hidden ONLY when the engine is confirmed to be driving them (see the inline
   flag in partials/scrollfilm.php). Scoping this to .film-js is what stops a
   missing frames.json from leaving the headline invisible forever. */
.film.film-js .film-cap { opacity: 0; }
.film-cap .kicker {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  text-transform: uppercase;
  color: var(--film-gold);
  margin-bottom: 1.15rem;
}
.film-cap h1,
.film-cap h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--film-text);
  text-wrap: balance;
  /* the film has bright passages (white exhibition halls) that the vignette
     does not reach in the centre — this keeps the type readable over them */
  text-shadow: 0 2px 44px rgba(20, 38, 61, 0.62);
}
/* h1 carries the page's real headline — a full sentence, not a product name —
   so it is sized to wrap in three lines rather than fill the viewport. */
.film-cap h1 { font-size: clamp(2.2rem, 5.1vw, 4.6rem); }
.film-cap h2 { font-size: clamp(2.1rem, 4.6vw, 4.1rem); }
.film-cap p {
  margin-top: 1.15rem;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.6;
  color: var(--film-dim);
  max-width: 38ch;
  text-shadow: 0 1px 26px rgba(20, 38, 61, 0.7);
}
.film-cap .gold { color: var(--film-gold-b); }

.cap-center { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.cap-center p { margin-left: auto; margin-right: auto; }
.cap-left   { left: 7vw;  top: 50%; transform: translateY(-50%); }
.cap-right  { right: 7vw; top: 50%; transform: translateY(-50%); text-align: right; }
.cap-right p { margin-left: auto; }
.cap-top    { left: 50%; top: 13vh; transform: translateX(-50%); text-align: center; }
.cap-bottom { left: 50%; bottom: 12vh; transform: translateX(-50%); text-align: center; }

/* ── film CTA (dark-surface variant of .btn) ── */
.film-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 2rem;
  padding: 0.95rem 2.4rem;
  border: 1px solid rgba(198, 161, 91, 0.55);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--film-gold-b);
  text-decoration: none;
  transition: background 0.35s var(--ease, ease), color 0.35s var(--ease, ease);
}
.film-cta:hover { background: var(--film-gold); color: #1B3351; border-color: var(--film-gold); }

/* ── chrome: chapter index, progress rail, scroll cue ── */
.film-index {
  position: absolute;
  top: calc(var(--nav-h, 84px) + 1.4rem);
  left: 7vw;
  z-index: 5;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  color: var(--film-dim);
}

.film-progress {
  position: absolute;
  left: 7vw;
  right: 7vw;
  bottom: 2.2rem;
  height: 2px;
  z-index: 5;
  background: rgba(246, 241, 231, 0.14);
  border-radius: 2px;
  overflow: hidden;
}
.film-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--film-gold);
}

.film-cue {
  position: absolute;
  left: 50%;
  bottom: 3.4rem;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--film-dim);
  transition: opacity 0.5s ease;
}
.film-cue::after {
  content: "";
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--film-gold), transparent);
  animation: film-cue 1.9s ease-in-out infinite;
}
@keyframes film-cue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(8px); opacity: 0.35; }
}

/* ── the joins with the light page above and below ── */
.film-intro {
  position: relative;
  height: 16vh;
  margin-bottom: -1px;
  background: linear-gradient(to bottom, var(--ink, #FBFAF7), var(--film-bg));
}
.film-outro {
  position: relative;
  height: 22vh;
  margin-top: -1px;
  background: linear-gradient(to bottom, var(--film-bg), var(--ink, #FBFAF7));
}

/* ── nav inversion while the film is behind the header ── */
.nav.nav--on-film {
  background: linear-gradient(to bottom, rgba(20, 38, 61, 0.72), transparent);
  border-bottom-color: transparent;
  box-shadow: none;
}
.nav.nav--on-film .brand span b,
.nav.nav--on-film .brand span small,
.nav.nav--on-film .nav-links a,
.nav.nav--on-film .nav-account { color: rgba(246, 241, 231, 0.82); }
.nav.nav--on-film .nav-links a:hover,
.nav.nav--on-film .nav-links a.active,
.nav.nav--on-film .nav-account:hover { color: #FFF; }
.nav.nav--on-film .nav-links a::after,
.nav.nav--on-film .nav-account span::after { background: var(--brass-soft); }
.nav.nav--on-film .nav-toggle span,
.nav.nav--on-film .nav-toggle span::before,
.nav.nav--on-film .nav-toggle span::after { background: rgba(246, 241, 231, 0.9); }

/* ── no-frames fallback ── */
.film.is-fallback .film-stage {
  background: linear-gradient(140deg, #24405F, var(--film-bg));
}

/* ── unscripted fallback ────────────────────────────────────────────────────
   No JS, or the frame manifest failed to load. The pinned scroll track makes no
   sense without an engine to drive it — six absolutely-positioned captions
   would simply stack on top of each other — so the whole thing collapses into
   an ordinary dark editorial section with the captions flowing in order.
   This is also what a crawler that renders CSS but not our JS ends up reading,
   and on the homepage it carries the only <h1> on the page. */
.film:not(.film-js) { height: auto !important; }
.film:not(.film-js) .film-stage {
  position: static;
  height: auto;
  overflow: visible;
  padding: clamp(4rem, 10vw, 8rem) 7vw;
  background: linear-gradient(140deg, #24405F, var(--film-bg));
}
.film:not(.film-js) .film-canvas,
.film:not(.film-js) .film-veil,
.film:not(.film-js) .film-loader,
.film:not(.film-js) .film-progress,
.film:not(.film-js) .film-cue,
.film:not(.film-js) .film-index { display: none; }

.film:not(.film-js) .film-cap {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  max-width: 60ch;
  margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
}
.film:not(.film-js) .film-cap:last-of-type { margin-bottom: 0; }
.film:not(.film-js) .cap-center,
.film:not(.film-js) .cap-right { text-align: left; }
.film:not(.film-js) .cap-right p { margin-left: 0; }

/* ── mobile ── */
@media (max-width: 820px) {
  .cap-left, .cap-right {
    left: 6vw; right: 6vw; text-align: left;
    max-width: none;
  }
  .cap-right p { margin-left: 0; }
  .film-index { left: 6vw; }
  .film-progress { left: 6vw; right: 6vw; }
  .film-veil {
    background:
      radial-gradient(ellipse 96% 74% at 50% 48%, transparent 34%, rgba(20, 38, 61, 0.88) 100%),
      linear-gradient(to bottom, rgba(20, 38, 61, 0.86), transparent 30%, transparent 55%, rgba(20, 38, 61, 0.92));
  }
}

/* On short viewports the opening card reaches the bottom of the stage, where
   the cue would sit on top of its supporting line. */
@media (max-height: 700px) {
  .film-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .film-cue::after { animation: none; }
  .film-canvas { transition: none; }
}