/* ============================================================
   DRIP — FRONT END, REBUILT
   Dark editorial. One idea per screen, one hero-tier effect
   (the scroll-driven devices) and everything else held quiet.
   ============================================================ */

:root{
  --ink:#07080b;            /* the page */
  --ink-2:#0d1015;          /* raised surface */
  --ink-3:#161a21;          /* line / border */
  --paper:#f4f6f8;          /* primary text */
  --paper-2:rgba(244,246,248,.62);
  --paper-3:rgba(244,246,248,.38);
  --holo:linear-gradient(104deg,#ff9ec7 0%,#c9a7ff 22%,#9ec7ff 46%,#8ff0e0 68%,#d8ffb0 86%,#ffd59e 100%);
  --blue:#6db6f5;
  --nav-h:64px;
  --maxw:1240px;
  --ease:cubic-bezier(.16,1,.3,1);   /* ONE easing token, reused everywhere */
  --pad:clamp(20px,6vw,84px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--ink); }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font:400 16px/1.6 Manrope,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
/* a class `display:` silently beats the HTML `hidden` attribute — without
   this the age gate simply refuses to close */
[hidden]{ display:none!important; }
img,video,canvas{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:#9ec7ff; color:#07080b; }

.wrap{ width:min(var(--maxw),100%); margin:0 auto; padding-inline:var(--pad); }
.holo{
  background:var(--holo); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------------- nav: centred wordmark, minimal ---------------- */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:80;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding-inline:var(--pad);
  background:linear-gradient(rgba(7,8,11,.92), rgba(7,8,11,0));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.nav-links{ display:flex; gap:clamp(14px,2.2vw,30px); }
.nav-links a, .nav-right a{
  font:800 10px/1 Montserrat,sans-serif; letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper-3); text-decoration:none; transition:color .3s var(--ease);
}
.nav-links a:hover, .nav-right a:hover, .nav-links a.is-active{ color:var(--paper); }
.nav-mark{ justify-self:center; }
.nav-mark img{ width:66px; filter:invert(1) brightness(1.7); }
.nav-right{ justify-self:end; }
@media (max-width:760px){
  .nav{ grid-template-columns:1fr auto 1fr; }
  .nav-links{ display:none; }
}

/* ---------------- hero ---------------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--nav-h) + 6vh) var(--pad) 12vh;
  overflow:hidden;
}
.hero-glow{
  position:absolute; left:50%; top:46%; translate:-50% -50%;
  width:min(96vw,1000px); aspect-ratio:1.6; border-radius:50%;
  background:radial-gradient(closest-side, rgba(109,182,245,.20), rgba(109,182,245,0) 70%);
  filter:blur(28px); pointer-events:none;
}
.hero-eyebrow{
  margin:0 0 26px; font:800 10px/1 Montserrat,sans-serif;
  letter-spacing:.5em; text-transform:uppercase; color:var(--paper-3);
}
.hero h1{
  margin:0 0 22px; max-width:16ch;
  font:900 clamp(46px,9vw,132px)/.90 Montserrat,sans-serif; letter-spacing:-.045em;
}
.hero-sub{
  margin:0 0 40px; max-width:46ch;
  font:500 clamp(15px,1.7vw,19px)/1.6 Manrope,sans-serif; color:var(--paper-2);
}
.hero-cta{
  display:inline-flex; align-items:center; gap:12px;
  padding:17px 34px; border-radius:999px; text-decoration:none;
  background:var(--paper); color:var(--ink);
  font:800 11px/1 Montserrat,sans-serif; letter-spacing:.2em; text-transform:uppercase;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hero-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -14px rgba(158,199,255,.7); }
.hero-cta i{ font-style:normal; }

.scrollcue{
  position:absolute; left:50%; bottom:30px; translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scrollcue span{ font:700 9px/1 Montserrat,sans-serif; letter-spacing:.42em; color:var(--paper-3); }
.scrollcue i{
  width:1px; height:38px; background:linear-gradient(var(--paper-3), transparent);
  animation:cue 2s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ scale:1 .35; opacity:.3 } 50%{ scale:1 1; opacity:.85 } }

/* ---------------- section furniture ---------------- */
.sec{ padding:clamp(84px,13vw,180px) 0; }
.kicker{
  margin:0 0 18px; font:800 10px/1 Montserrat,sans-serif;
  letter-spacing:.42em; text-transform:uppercase; color:var(--paper-3);
}
.sec h2{
  margin:0 0 20px; font:900 clamp(32px,5.4vw,72px)/.98 Montserrat,sans-serif; letter-spacing:-.035em;
}
.sec .lede{ margin:0; max-width:52ch; font-size:clamp(15px,1.6vw,18px); color:var(--paper-2); }
.rule{ height:1px; background:var(--ink-3); border:0; margin:0; }

/* ---------------- reveal (one pattern, reused) ---------------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s } .rv-d3{ transition-delay:.24s }

/* ---------------- craft grid ---------------- */
.craft{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(14px,2vw,26px); margin-top:clamp(40px,6vw,72px); }
.craft figure{
  margin:0; border:1px solid var(--ink-3); border-radius:16px; overflow:hidden; background:var(--ink-2);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.craft figure:hover{ border-color:rgba(244,246,248,.24); transform:translateY(-4px); }
.craft img{ width:100%; aspect-ratio:4/3; object-fit:cover; filter:saturate(.85) contrast(1.05); }
.craft figcaption{ padding:20px; }
.craft b{ display:block; font:800 15px/1.2 Montserrat,sans-serif; margin-bottom:7px; }
.craft span{ font-size:13px; color:var(--paper-3); }

/* ---------------- stats ---------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,3vw,34px); }
.stats div{ text-align:center; }
.stats b{ display:block; font:900 clamp(30px,5.6vw,64px)/1 Montserrat,sans-serif; letter-spacing:-.04em; }
.stats span{ display:block; margin-top:10px; font:600 10px/1.5 Manrope,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-3); }
@media (max-width:680px){ .stats{ grid-template-columns:repeat(2,1fr); row-gap:34px; } }

/* ---------------- films ---------------- */
.films{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,60px); align-items:center; }
.reels{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.reel{ position:relative; border-radius:14px; overflow:hidden; background:var(--ink-2); border:1px solid var(--ink-3); }
.reel video{ width:100%; aspect-ratio:9/16; object-fit:cover; }
.reel button{
  position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.24); background:rgba(7,8,11,.62); color:#fff;
  cursor:pointer; font-size:13px; backdrop-filter:blur(6px);
}
@media (max-width:860px){ .films{ grid-template-columns:1fr; } }

/* ---------------- gallery ---------------- */
.gal{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; margin-top:clamp(34px,5vw,60px); }
.gal img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; border:1px solid var(--ink-3); filter:saturate(.9); transition:transform .5s var(--ease), filter .5s var(--ease); }
.gal img:hover{ transform:scale(1.03); filter:saturate(1.1); }

/* ---------------- about / footer ---------------- */
.about{ text-align:center; padding:clamp(84px,13vw,170px) 0; }
.about-logo{ width:min(150px,40vw); margin:0 auto 26px; filter:invert(1) brightness(1.7); }
.about h2{ margin:0 0 14px; }
.foot{
  border-top:1px solid var(--ink-3); padding:34px 0;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--paper-3);
}
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--paper); }

/* ---------------- 21+ gate ---------------- */
#ageGate{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(7,8,11,.94); backdrop-filter:blur(16px); padding:22px;
}
.gate-card{
  width:min(430px,100%); text-align:center; padding:44px 34px;
  border:1px solid var(--ink-3); border-radius:22px; background:var(--ink-2);
}
.gate-card img{ width:104px; margin:0 auto 26px; filter:invert(1) brightness(1.7); }
.gate-card .kicker{ margin-bottom:14px; }
.gate-card h2{ margin:0 0 12px; font:800 clamp(21px,3vw,27px)/1.2 Montserrat,sans-serif; }
.gate-card p{ margin:0 0 26px; font-size:13px; color:var(--paper-3); }
.gate-btns{ display:flex; gap:10px; justify-content:center; }
.gate-btns button, .gate-btns a{
  padding:14px 26px; border-radius:999px; cursor:pointer; text-decoration:none;
  font:800 11px/1 Montserrat,sans-serif; letter-spacing:.16em; text-transform:uppercase;
}
#ageYes{ background:var(--paper); color:var(--ink); border:0; }
.gate-no{ background:transparent; color:var(--paper-2); border:1px solid var(--ink-3); }
.gate-note{ margin:24px 0 0; font-size:11px; color:var(--paper-3); }

/* ---------------- boot loader (owned by app-v2.js) ---------------- */
#boot{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:var(--ink); transition:opacity .7s var(--ease), visibility .7s;
}
#boot.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.boot-in{ text-align:center; }
.boot-in img{ width:120px; margin:0 auto 28px; filter:invert(1) brightness(1.7); }
.boot-bar{ width:min(200px,52vw); height:2px; margin:0 auto; background:rgba(244,246,248,.12); border-radius:2px; overflow:hidden; }
.boot-bar i{ display:block; height:100%; width:0; background:var(--holo); transition:width .3s linear; }
#bootPct{ display:block; margin-top:15px; font:700 9px/1 Montserrat,sans-serif; letter-spacing:.36em; color:var(--paper-3); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; transition:none; }
  .scrollcue i{ animation:none; }
}

/* ---------------- scroll-scrubbed film (PDF §3.5, the Apple effect) ----------------
   The section is tall; the film is pinned inside it and its playhead is
   driven by scroll position. The encode is all-keyframe so seeks land
   instantly instead of stuttering to the nearest keyframe. */
.vs{ position:relative; height:320vh; }
.vs-pin{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; display:grid; place-items:center;
}
.vs-pin canvas{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  filter:saturate(.9) contrast(1.06);
}
.vs-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* light enough to read type over, light enough to still see the product */
  background:
    linear-gradient(rgba(7,8,11,.42), rgba(7,8,11,.06) 42%, rgba(7,8,11,.55)),
    radial-gradient(78% 62% at 50% 50%, transparent 34%, rgba(7,8,11,.34) 100%);
}
.vs-copy{
  position:relative; z-index:2; text-align:center; padding:0 var(--pad);
  /* NOT `ch` — it resolves against this element's 16px font, which gave the
     104px headline a 234px box and broke it one letter per line. */
  width:min(1000px, 92vw);
}
.vs-copy .kicker{ opacity:calc(1 - var(--scrub,0) * 1.6); transition:opacity .2s linear; }
.vs-copy h2{
  margin:0; font:900 clamp(38px,7.6vw,104px)/.94 Montserrat,sans-serif; letter-spacing:-.045em;
}
.vs-copy p{ margin:20px auto 0; max-width:38ch; color:rgba(255,255,255,.86); font-size:clamp(14px,1.6vw,17px); text-shadow:0 1px 12px rgba(7,8,11,.6); }
/* a thin playhead so it reads as film, not a static image */
.vs-bar{
  position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:rgba(244,246,248,.12);
}
.vs-bar::after{
  content:''; position:absolute; inset:0; transform-origin:left;
  transform:scaleX(var(--scrub,0)); background:var(--holo);
}
@media (prefers-reduced-motion:reduce){
  .vs{ height:auto; }
  .vs-pin{ position:static; height:70vh; }
}