/* ==========================================================================
   NEXR Cinema — front-page cinematic experience.
   Loaded only on the front page, after luxury.css. Everything here renders
   correctly with NO JavaScript (cinema.js only adds motion on top), and all
   animation is transform/opacity-only so the compositor stays at 60fps.
   ========================================================================== */

:root {
  --cine-red: #C8102E;                       /* campaign red (EVOKE set)      */
  --cine-black: #050505;                     /* film black, darker than ink   */
  --cine-hero-h: calc(100vh - 72px);         /* under the sticky black header */
}
@supports (height: 100svh) {
  :root { --cine-hero-h: calc(100svh - 72px); }
}

/* ---- Hero film ----------------------------------------------------------- */
.cine-hero {
  position: relative;
  height: var(--cine-hero-h);
  min-height: 33rem;
  overflow: clip;
  background: var(--cine-black);
  color: var(--c-ivory);
}
.cine-hero__media {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.cine-hero__video,
.cine-hero__media noscript img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
}
/* Soft light that drifts with the cursor (screen-blended, desktop only) */
.cine-hero__light {
  position: absolute; inset: -18%;
  z-index: 1;
  background: radial-gradient(42% 46% at 66% 34%, rgba(255, 92, 48, .22), transparent 70%);
  mix-blend-mode: screen;
  opacity: .55;
  pointer-events: none;
  will-change: transform, opacity;
}
/* Base cinematic grade — always on, blends the black header into the film */
.cine-hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.44) 0%, rgba(0,0,0,.06) 30%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.66) 100%),
    linear-gradient(90deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 55%);
}
/* Deepening layer — GSAP drives opacity 0 → .72 as you scroll away */
.cine-hero__scrim-deep {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--cine-black);
  opacity: 0;
}
.cine-hero__container {
  position: relative; z-index: 4;
  height: 100%;
  display: flex; align-items: flex-end;
}
.cine-hero__content {
  max-width: 46rem;
  padding-block-end: clamp(4.5rem, 13vh, 8rem);
  will-change: transform;
}
.cine-hero__eyebrow { color: rgba(255,255,255,.85); }
.cine-hero__title {
  font-size: var(--step-7);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--c-ivory);
  margin-block-start: .35em;
}
/* Word-reveal wrappers injected by cinema.js. Padding absorbs descenders
   (Latin g/y and Arabic ى ر) that overflow:hidden would otherwise clip. */
.cine-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block-end: .14em; margin-block-end: -.14em; }
.cine-w__i { display: inline-block; will-change: transform; }
.cine-hero__lead {
  max-width: 30rem;
  color: rgba(255,255,255,.82);
  margin-block-start: var(--space-m);
  font-size: var(--step-1);
}
.cine-hero__cta {
  margin-block-start: var(--space-l);
  display: flex; gap: var(--space-s); flex-wrap: wrap;
}
.cine-hero__scroll {
  position: absolute; z-index: 4;
  inset-block-end: 1.75rem; inset-inline-start: 50%;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: .6rem;
  pointer-events: none;
}
.cine-hero__scroll-label {
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.cine-hero__scroll-line {
  width: 1px; height: 2.6rem;
  background: rgba(255,255,255,.45);
  transform-origin: top;
  animation: cine-scroll 2.4s var(--ease-out) infinite;
}
@keyframes cine-scroll {
  0%, 100% { transform: scaleY(.25); opacity: .25; }
  50%      { transform: scaleY(1);   opacity: 1; }
}
@media (max-width: 768px) {
  .cine-hero { min-height: 30rem; }
  .cine-hero__content { padding-block-end: clamp(5rem, 15vh, 7rem); }
}

/* ---- Typography divider (black editorial pause) --------------------------- */
.cine-divider {
  position: relative;
  overflow: clip;
  padding-block: clamp(6.5rem, 20vh, 11rem);
  text-align: center;
}
.cine-divider__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(64% 90% at 50% 118%, rgba(200,16,46,.26), transparent 70%);
}
.cine-divider__text {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 6rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--c-ivory);
  max-width: 16ch;
  margin-inline: auto;
  padding-inline: var(--gutter);
  will-change: transform, opacity;
}

/* ---- Minimal quote (light editorial pause) -------------------------------- */
.cine-quote {
  padding-block: clamp(5.5rem, 15vh, 9rem);
  text-align: center;
  background: var(--bg);
}
.cine-quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--c-ink);
  max-width: 22ch;
  margin-inline: auto;
  padding-inline: var(--gutter);
  will-change: transform, opacity;
}

/* ---- Fullscreen campaign breaks ------------------------------------------- */
.cine-break {
  position: relative;
  min-height: 92svh;
  overflow: clip;
  display: flex; align-items: flex-end;
  background: var(--cine-black);
  color: var(--c-ivory);
}
.cine-break__media { position: absolute; inset: 0; display: block; }
.cine-break__media img {
  position: absolute; inset-inline: 0; inset-block-start: -7%;
  width: 100%; height: 114%;
  object-fit: cover; object-position: 50% 45%;
  will-change: transform;
}
.cine-break__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.04) 38%, rgba(0,0,0,.58) 100%);
}
.cine-break__inner {
  position: relative; z-index: 2;
  padding-block-end: clamp(4rem, 12vh, 7.5rem);
}
.cine-break__eyebrow { color: rgba(255,255,255,.85); }
.cine-break__title {
  font-size: clamp(2.4rem, 6.5vw, 5.5rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-ivory);
  max-width: 13ch;
  margin-block-start: .3em;
  will-change: transform, opacity;
}
.cine-break__cta { margin-block-start: var(--space-l); }
@media (max-width: 768px) {
  .cine-break { min-height: 74svh; }
}

/* ---- Brand story ----------------------------------------------------------- */
.cine-story { padding-block: clamp(4.5rem, 13vh, 8.5rem); background: var(--bg); }
.cine-story__grid {
  display: grid; gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 960px) {
  .cine-story__grid { grid-template-columns: 5fr 6fr; gap: var(--space-3xl); }
}
.cine-story__media {
  position: relative; overflow: clip;
  aspect-ratio: 3 / 4; margin: 0;
  background: var(--c-surface-2);
}
.cine-story__media img {
  position: absolute; inset-inline: 0; inset-block-start: -6%;
  width: 100%; height: 112%;
  object-fit: cover; object-position: 50% 30%;
  will-change: transform;
}
.cine-story__title {
  font-size: var(--step-5);
  text-transform: uppercase;
  line-height: 1.04;
  margin-block: .4em .6em;
}
.cine-story__text { max-width: 34rem; line-height: var(--lh-body); }
.cine-story__text--muted { color: var(--text-muted); margin-block-start: .8em; }
.cine-story__cta { margin-block-start: var(--space-l); }

/* ---- Collections ------------------------------------------------------------ */
.cine-collections { display: grid; gap: var(--space-m); }
@media (min-width: 720px) { .cine-collections { grid-template-columns: 1fr 1fr; } }
.cine-collection {
  position: relative; display: block;
  aspect-ratio: 4 / 5;
  overflow: clip;
  background: var(--c-ink);
}
.cine-collection img,
.cine-collection picture img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
  will-change: transform;
}
.cine-collection:hover img { transform: scale(1.05); }
.cine-collection__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 46%, rgba(0,0,0,.62) 100%);
}
.cine-collection__label {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: var(--space-l);
  display: grid; gap: .35rem;
  color: #fff;
}
.cine-collection__label strong {
  font-family: var(--font-display);
  font-size: var(--step-3);
  text-transform: uppercase;
  line-height: 1.05;
}
.cine-collection__label span {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.cine-arrivals { margin-block-start: var(--space-2xl); }
.lux-section__head--sub { margin-block-end: var(--space-m); }
.lux-section__head--sub h3 { font-size: var(--step-3); text-transform: uppercase; }

/* ---- Final premium CTA -------------------------------------------------------- */
.cine-final {
  position: relative;
  overflow: clip;
  padding-block: clamp(6.5rem, 18vh, 11rem);
  text-align: center;
  background: var(--cine-black);
}
.cine-final__glow {
  position: absolute; inset: -28% -18%; pointer-events: none;
  background: radial-gradient(48% 56% at 50% 52%, rgba(200,16,46,.30), transparent 72%);
  opacity: .55;
  will-change: transform, opacity;
}
.cine-final__inner {
  position: relative; z-index: 2;
  display: grid; justify-items: center; gap: var(--space-s);
}
.cine-final__title {
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-ivory);
  will-change: transform, opacity;
}
.cine-final__lead { color: rgba(255,255,255,.72); }
.cine-final__cta { margin-block: var(--space-s) var(--space-m); }
.newsletter-form--dark { max-width: 30rem; width: 100%; }
.newsletter-form--dark input {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.26);
  color: #fff;
}
.newsletter-form--dark input::placeholder { color: rgba(255,255,255,.5); }

/* ---- Section rhythm -------------------------------------------------------------- */
.cine-first-light { padding-block-start: var(--space-2xl); }

/* ---- Reduced motion: everything static, video stays on its poster ---------------- */
@media (prefers-reduced-motion: reduce) {
  .cine-hero__scroll-line { animation: none; }
  .cine-hero__light { opacity: .35; }
}

/* ---- Mobile: full-bleed film filling the whole hero, copy overlaid on top -------- */
@media (max-width: 768px) {
  .cine-hero__video,
  .cine-hero__media noscript img {
    object-fit: cover;
    object-position: 50% 32%;
  }
  /* Stronger bottom gradient so the headline + buttons stay readable over film. */
  .cine-hero__scrim {
    background:
      linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.05) 26%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.86) 100%);
  }
}