/* ============================================================
   QUILLON — CINEMA (homepage only)
   One continuous, pinned 3-act scroll sequence.
   The document system persists & transforms across acts:
   ACT 1 hero  →  ACT 2 separate (what's in a pack)  →  ACT 3 gather (complete pack)
   ============================================================ */

/* the pinned stage lives inside a tall section; scroll length = section height */
.cinema{
  position:relative;
  height:460vh;
  background:
    radial-gradient(125% 80% at 72% 2%, #ffffff 0%, #f6f3ec 55%, #efeadd 100%);
  z-index:1;
}
[data-theme="dark"] .cinema{
  background:radial-gradient(125% 80% at 72% 2%, #242019 0%, #18150f 52%, #131009 100%);
}
.cinema__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  perspective:1300px; perspective-origin:50% 44%;
}

/* persistent 3D document layer */
.cinema__scene{ position:absolute; inset:0; z-index:1; }

/* ambient overhead light + grain */
.cinema__light{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 42% at 50% -2%, rgba(255,255,255,.85), transparent 62%),
    radial-gradient(40% 40% at 74% 6%, rgba(34,80,63,.06), transparent 70%);
}
[data-theme="dark"] .cinema__light{
  background:
    radial-gradient(54% 46% at 50% -2%, rgba(96,86,64,.4), transparent 64%),
    radial-gradient(40% 40% at 74% 6%, rgba(58,138,106,.14), transparent 72%);
}
.cinema__grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- acts (absolute overlay; opacity/visibility driven by scroll) ---- */
.act{ position:absolute; inset:0; z-index:4; display:grid; }
.act__wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.4rem,4vw,3.5rem); }

/* ACT 1 — editorial, centered, product-launch */
.act--1{ place-items:center; text-align:center; }
.act--1::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(46% 48% at 50% 49%, rgba(246,243,236,.8), rgba(246,243,236,.4) 52%, transparent 78%);
}
[data-theme="dark"] .act--1::before{
  background:radial-gradient(46% 50% at 50% 49%, rgba(19,16,11,.92), rgba(19,16,11,.55) 52%, transparent 80%);
}
.act--1 .act__wrap{ display:flex; flex-direction:column; align-items:center; }
.cine-eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--tick); display:inline-flex; align-items:center; gap:.8em; margin-bottom:1.7rem;
}
.cine-eyebrow::before, .cine-eyebrow::after{ content:""; width:30px; height:1px; background:var(--tick); opacity:.5; }
[data-theme="dark"] .cine-eyebrow{ color:var(--tick-soft); }
.cine-h1{
  font-family:var(--font-serif); font-weight:500; color:var(--t-strong);
  font-size:clamp(2.7rem, 7.4vw, 7.4rem); line-height:.94; letter-spacing:-.035em;
  margin:0;
}
.cine-h1 .ln{ display:block; overflow:hidden; }
.cine-h1 .ln > span{ display:block; }
.cine-h1 .em{ font-style:italic; color:var(--tick); }
[data-theme="dark"] .cine-h1{ color:var(--t-strong); }
[data-theme="dark"] .cine-h1 .em{ color:var(--tick-soft); }
.cine-sub{
  font-size:clamp(1.05rem,1.5vw,1.32rem); line-height:1.5; color:var(--t-body);
  max-width:46ch; margin:1.9rem auto 0; text-wrap:balance;
}
.cine-cta{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:2.4rem; pointer-events:auto; }

/* ACT 2 — separate: copy column left, documents fan out right */
.act--2{ align-items:center; }
.act--2 .act__wrap{ display:grid; grid-template-columns:minmax(0,30rem) 1fr; gap:2rem; align-items:center; }
.act--2 .cine-col{ position:relative; z-index:2; }
.act--2 h2{ font-size:clamp(2rem,3.6vw,3.1rem); margin:.9rem 0 0; color:var(--t-strong); letter-spacing:-.02em; }
[data-theme="dark"] .act--2 h2{ color:var(--t-strong); }
.cine-list{ margin-top:2rem; border-top:1px solid var(--ink-line); }
.cine-item{
  display:flex; gap:1rem; padding:.95rem 0; border-bottom:1px solid var(--ink-line);
  opacity:.28; transform:translateX(-10px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.cine-item.on{ opacity:1; transform:none; }
.cine-item__no{ font-family:var(--font-mono); font-size:.72rem; color:var(--tick); padding-top:.3em; min-width:1.8em; }
[data-theme="dark"] .cine-item__no{ color:var(--tick-soft); }
.cine-item h3{ font-family:var(--font-serif); font-size:1.12rem; color:var(--t-strong); margin:0 0 .14em; font-weight:600; }
.cine-item p{ font-size:.9rem; color:var(--t-body); line-height:1.4; margin:0; }

/* ACT 3 — gather: the finished pack, shown as a product shot (copy left, pack right) */
.act--3{ align-items:center; }
.act--3 .act__wrap{ display:grid; grid-template-columns:minmax(0,34rem) 1fr; gap:2rem; align-items:center; }
.act--3 .cine-col{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; position:relative; z-index:2; }
.cine-badge{
  position:relative;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--tick); padding:.7em 1.2em; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(246,243,236,.5));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
}
[data-theme="dark"] .cine-badge{
  color:var(--tick-soft);
  background:linear-gradient(180deg, rgba(30,27,22,.6), rgba(18,16,12,.5));
  border-color:rgba(234,229,217,.12);
}
.act--3 h2{ font-family:var(--font-serif); font-weight:500; font-size:clamp(2.2rem,4.6vw,4rem); color:var(--t-strong); letter-spacing:-.03em; margin:1.4rem 0 0; line-height:1; }
[data-theme="dark"] .act--3 h2{ color:var(--t-strong); }
.act--3 h2 .em{ font-style:italic; color:var(--tick); }
[data-theme="dark"] .act--3 h2 .em{ color:var(--tick-soft); }
.act--3 .cine-sub{ margin:1.5rem 0 0; max-width:36ch; }
.act--3 .cine-cta{ justify-content:flex-start; margin-top:2rem; }

/* scroll cue (act 1) */
.cine-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:6;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--t-mute); display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.cine-cue .ln{ width:1px; height:42px; background:linear-gradient(var(--tick), transparent); animation:cue 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%{ transform:scaleY(0);} 40%{ transform:scaleY(1);} 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* a small progress read-out, bottom-right (premium, not a bar) */
.cine-prog{
  position:fixed; right:clamp(1rem,3vw,2.2rem); bottom:clamp(1rem,3vw,2rem); z-index:90;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; color:var(--t-mute);
  display:flex; align-items:center; gap:.7em; opacity:0; transition:opacity .5s var(--ease); pointer-events:none;
}
.cine-prog.show{ opacity:.8; }
.cine-prog__track{ width:46px; height:2px; background:var(--ink-line); border-radius:2px; overflow:hidden; }
.cine-prog__fill{ height:100%; width:0%; background:var(--tick); }
[data-theme="dark"] .cine-prog__fill{ background:var(--tick-soft); }

/* ---- section emergence: each following section rises over the previous ---- */
.rise{
  position:relative; z-index:2;
  border-top-left-radius:clamp(20px,3vw,40px);
  border-top-right-radius:clamp(20px,3vw,40px);
  margin-top:clamp(-44px,-4vw,-30px);
  box-shadow:0 -36px 70px -40px rgba(26,20,10,.45);
}
.rise + .rise{ z-index:3; }
.rise + .rise + .rise{ z-index:4; }
.rise + .rise + .rise + .rise{ z-index:5; }
[data-theme="dark"] .rise{ box-shadow:0 -40px 80px -44px rgba(0,0,0,.7); }

/* ---- short viewports: keep the hero composed, never clipped ---- */
@media(min-width:861px) and (max-height:780px){
  .cine-h1{ font-size:clamp(2.4rem,5.4vw,4.4rem); }
  .cine-eyebrow{ margin-bottom:1.1rem; }
  .cine-sub{ margin-top:1.2rem; font-size:1.02rem; }
  .cine-cta{ margin-top:1.5rem; }
  .cine-cue{ display:none; }
}

/* ============================================================
   MOBILE / REDUCED-MOTION — unpin into a clean stacked layout
   ============================================================ */
@media(max-width:860px){
  .cinema{ height:auto; }
  .cinema__stage{ position:static; height:auto; display:block; padding-bottom:2rem; }
  .cinema__scene{ position:relative; height:52vh; margin-top:5.5rem; }
  .cinema__light{ position:absolute; height:60vh; }
  .act{ position:relative; inset:auto; opacity:1 !important; visibility:visible !important; display:block; padding:3.2rem 0; }
  .act--1{ padding-top:1.5rem; }
  .act--1::before{ display:none; }
  .cine-h1{ font-size:clamp(2.8rem,13vw,4.4rem); }
  .act--2 .act__wrap, .act--3 .act__wrap{ grid-template-columns:1fr; }
  .cine-item{ opacity:1; transform:none; }
  .cine-cue{ display:none; }
  .cine-prog{ display:none; }
}
@media(prefers-reduced-motion:reduce){
  .cinema{ height:auto; }
  .cinema__stage{ position:static; height:auto; display:block; }
  .cinema__scene{ position:relative; height:56vh; margin-top:5rem; }
  .act{ position:relative; inset:auto; opacity:1 !important; visibility:visible !important; display:block; padding:3.5rem 0; }
  .act--1::before{ display:none; }
  .cine-item{ opacity:1; transform:none; }
  .cine-cue, .cine-prog{ display:none; }
}