/* ==========================================================================
   CLVING — motion layer (official site)
   Everything here degrades to a static, fully readable page when the visitor
   asks for reduced motion, and nothing is hidden until JS confirms it can
   reveal it again.
   ========================================================================== */

/* ---- scroll reveals -------------------------------------------------------
   .js-motion is set on <html> by an inline script the moment the page parses,
   so content is only ever hidden when we know JS is alive to bring it back. */
.js-motion [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.js-motion [data-reveal="left"] { transform:translateX(-34px) }
.js-motion [data-reveal="right"]{ transform:translateX(34px) }
.js-motion [data-reveal="zoom"] { transform:scale(.94) }
.js-motion [data-reveal="fade"] { transform:none }

.js-motion [data-reveal].is-in{
  opacity:1;
  transform:none;
}

/* staggered children — the delay is set inline by JS as --i */
.js-motion [data-stagger] > *{
  opacity:0;
  transform:translateY(20px) scale(.98);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i, 0) * 42ms);
}
.js-motion [data-stagger].is-in > *{ opacity:1; transform:none }

/* ---- hero video ---------------------------------------------------------- */
.hero-video{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:var(--ink);
}
.hero-video video,
.hero-video img.hero-poster{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.06);
  animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{ transform:scale(1.06) translate3d(0,0,0) }
  to  { transform:scale(1.14) translate3d(0,-1.6%,0) }
}
/* legibility scrim — the copy sits on top of moving footage */
.hero-video::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(43,33,30,.22) 0%, rgba(43,33,30,.44) 55%, rgba(43,33,30,.66) 100%),
    radial-gradient(120% 90% at 78% 12%, rgba(196,97,74,.26) 0%, transparent 62%);
}
.hero-cinema{ position:relative; isolation:isolate; color:#fff }
.hero-cinema .wrap{ position:relative; z-index:2 }
.hero-cinema .eyebrow{ color:#F0C4B6 }
.hero-cinema p{ color:rgba(255,255,255,.86) }
.hero-cinema .btn-ghost{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.42); color:#fff }
.hero-cinema .btn-ghost:hover{ background:#fff; color:var(--ink); border-color:#fff }
.hero-cinema .trust{ border-top-color:rgba(255,255,255,.22); color:rgba(255,255,255,.80) }
.hero-cinema .trust b{ color:#F0C4B6 }

.hero-inner{ min-height:clamp(560px, 78vh, 780px); display:grid; align-content:center; padding:110px 0 54px }
.hero-cinema h1{ font-size:clamp(44px,6.6vw,86px); margin:16px 0 20px; text-wrap:balance }
.hero-cinema .lede{ font-size:clamp(17px,1.9vw,20px); max-width:52ch }

/* sound/motion toggle for the hero */
.video-toggle{
  position:absolute; z-index:3; inset-block-end:22px; inset-inline-end:22px;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.34);
  color:#fff; display:grid; place-items:center; backdrop-filter:blur(8px);
  transition:.2s;
}
.video-toggle:hover{ background:rgba(255,255,255,.28) }

/* ---- word-by-word headline ---------------------------------------------- */
.js-motion .split-line{ display:block; overflow:hidden }
.js-motion .split-word{
  display:inline-block;
  transform:translateY(105%) rotate(2deg);
  opacity:0;
  transition:transform .8s cubic-bezier(.22,.61,.36,1), opacity .8s ease;
  transition-delay:calc(var(--w, 0) * 70ms);
}
.js-motion .is-in .split-word,
.js-motion .split-line.is-in .split-word{ transform:none; opacity:1 }

/* ---- counters ------------------------------------------------------------ */
.counter{ font-variant-numeric:tabular-nums }

/* ---- shade wall shimmer -------------------------------------------------- */
.shade .swatch{ position:relative; overflow:hidden }
.shade .swatch::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .7s ease;
}
.shade:hover .swatch::after{ transform:translateX(120%) }

/* ---- marquee ------------------------------------------------------------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:var(--white); padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 34s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
.marquee span{
  padding-inline:30px; font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap; display:inline-flex; align-items:center; gap:30px;
}
html[dir="rtl"] .marquee span{ letter-spacing:0; text-transform:none; font-size:15px }
.marquee span::after{ content:'✦'; color:var(--copper-soft); font-size:11px }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
html[dir="rtl"] .marquee-track{ animation-name:marqueeRtl }
@keyframes marqueeRtl{ from{ transform:translateX(0) } to{ transform:translateX(50%) } }

/* ---- card hover lift ----------------------------------------------------- */
.card{ transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s }
.card .card-media img{ transition:transform .55s cubic-bezier(.22,.61,.36,1) }
.card:hover .card-media img{ transform:scale(1.07) rotate(-1deg) }

/* ---- section rule draw --------------------------------------------------- */
.rule{ height:1px; background:var(--line); transform-origin:center; }
.js-motion .rule{ transform:scaleX(0); transition:transform 1s cubic-bezier(.22,.61,.36,1) }
.js-motion .rule.is-in{ transform:scaleX(1) }

/* ---- parallax ------------------------------------------------------------ */
.js-motion [data-parallax]{ will-change:transform }

/* ---- scroll progress ----------------------------------------------------- */
.progress{
  position:fixed; inset-block-start:0; inset-inline:0; height:2px; z-index:70;
  background:linear-gradient(90deg,var(--copper),var(--copper-soft));
  transform:scaleX(0); transform-origin:left center;
}
html[dir="rtl"] .progress{ transform-origin:right center }

/* ==========================================================================
   Reduced motion — one switch turns the whole layer off.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .js-motion [data-reveal],
  .js-motion [data-stagger] > *,
  .js-motion .split-word{ opacity:1 !important; transform:none !important; transition:none !important }
  .js-motion .rule{ transform:none !important }
  .hero-video video, .hero-video img.hero-poster{ animation:none; transform:scale(1.02) }
  .marquee-track{ animation:none }
  .shade .swatch::after{ display:none }
  .card:hover .card-media img{ transform:none }
  .progress{ display:none }
}

/* --------------------------------------------------------------------------
   Light hero — for the bright cream brand footage. The original dark scrim
   assumed dark footage; over high-key video the white copy disappears, so
   this variant veils the video in cream and flips the copy to ink.
   -------------------------------------------------------------------------- */
.hero-light .hero-video{ background:var(--cream) }
.hero-light .hero-video::after{
  background:
    linear-gradient(to bottom, rgba(251,246,243,.34) 0%, rgba(251,246,243,.58) 46%, rgba(253,250,248,.84) 100%),
    radial-gradient(135% 88% at 50% 118%, rgba(255,255,255,.60) 0%, transparent 62%);
}
.hero-light.hero-cinema{ color:var(--ink) }
.hero-light.hero-cinema h1,
.hero-light.hero-cinema .lede,
.hero-light.hero-cinema .eyebrow{ text-shadow:0 1px 16px rgba(255,255,255,.72) }
.hero-light.hero-cinema .eyebrow{ color:var(--copper-deep) }
.hero-light.hero-cinema p{ color:var(--ink-2) }
.hero-light.hero-cinema .btn-ghost{ background:rgba(255,255,255,.78); border-color:var(--line); color:var(--ink) }
.hero-light.hero-cinema .btn-ghost:hover{ background:#fff; color:var(--copper); border-color:var(--copper) }
.hero-light.hero-cinema .trust{ border-top-color:rgba(43,33,30,.16); color:var(--ink-2); text-shadow:0 1px 14px rgba(255,255,255,.7) }
.hero-light.hero-cinema .trust b{ color:var(--copper-deep) }
.hero-light .video-toggle{ background:rgba(255,255,255,.55); border-color:rgba(43,33,30,.18); color:var(--ink) }
.hero-light .video-toggle:hover{ background:#fff }