/* ============================================================
   AURUM — Heritage Luxury Perfume House (Golden Edition)
   Shell agent stylesheet. Obsidian noir + liquid gold.
   Designed by pixelprairiefm.com Fargo.
   ============================================================ */

:root{
  --bg:#060608;
  --bg-2:#0a0b0d;
  --ink:#f3ede0;
  --ink-dim:#8c929a;
  --gold:#c5a059;
  --gold-bright:#e6c587;
  --gold-deep:#8c6b2d;
  --amber:#caa14e;
  --line:rgba(197,160,89,0.15);
  --maxw:1320px;

  --serif:'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --sans:'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ease:cubic-bezier(0.22,1,0.36,1);
  --pad:clamp(20px, 5vw, 80px);

  --accent:#caa14e; /* per-chapter override via inline style */
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; overflow-x:clip; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  letter-spacing:0.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; }

/* deep noir gradient base so screen is never flat black */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(212,175,55,0.06), transparent 55%),
    radial-gradient(90% 70% at 80% 110%, rgba(200,119,47,0.04), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 65%, var(--bg) 100%);
  pointer-events:none;
}
/* faint film grain */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.04;
  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");
}

/* ---------- 3D canvas ---------- */
#webgl{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:2; display:block; pointer-events:auto; cursor:grab;
}

/* ============================================================
   REVEAL PATTERN — visible by default, hidden ONLY under html.js
   ============================================================ */
html.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  will-change:opacity, transform;
}
html.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor{
  position:fixed; top:0; left:0; z-index:200;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid var(--gold);
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode:screen;
  transition:width .28s var(--ease), height .28s var(--ease),
             background-color .28s var(--ease), border-color .28s var(--ease), opacity .3s;
  opacity:0;
}
html.js .cursor.is-active{ opacity:1; }
.cursor.is-grow{
  width:60px; height:60px; margin:-30px 0 0 -30px;
  background:rgba(200,161,78,0.10);
  border-color:var(--gold-bright);
}
/* hide native cursor only when custom is live and pointer is fine */
@media (pointer:fine){
  html.js.cursor-on, html.js.cursor-on a, html.js.cursor-on button{ cursor:none; }
}
@media (pointer:coarse){ .cursor{ display:none; } }

/* ============================================================
   LOADER / ENTER GATE
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(124,94,38,0.20), transparent 60%),
    var(--bg);
  transition:opacity 1.1s var(--ease), visibility 1.1s;
}
#loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner{
  text-align:center; padding:0 24px; max-width:640px;
  display:flex; flex-direction:column; align-items:center; gap:34px;
}
.loader-brand{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.loader-logo{ width:clamp(150px,20vw,230px); height:auto; display:block; mix-blend-mode:screen; filter:drop-shadow(0 8px 44px rgba(200,161,78,0.22)); }
.loader-brand-mark{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(54px, 12vw, 132px);
  letter-spacing:0.22em; text-indent:0.22em;
  line-height:0.9;
  color:var(--ink);
  background:linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.loader-brand-sub{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(10px,1.4vw,13px);
  letter-spacing:0.5em; text-indent:0.5em;
  text-transform:uppercase; color:var(--ink-dim);
}
.loader-meter{ display:flex; flex-direction:column; align-items:center; gap:14px; width:min(340px, 70vw); }
.loader-line{ position:relative; width:100%; height:1px; background:var(--line); overflow:hidden; }
.loader-bar{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transition:width .5s var(--ease);
}
.loader-progress{
  font-family:var(--serif); font-size:clamp(28px,5vw,46px); font-weight:300;
  color:var(--gold-bright); letter-spacing:0.05em;
}
.loader-progress::after{ content:"%"; font-size:0.45em; color:var(--ink-dim); margin-left:2px; vertical-align:super; }

.enter-btn{
  position:relative;
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  padding:6px 4px;
  opacity:0.35; pointer-events:none;
  transition:opacity .6s var(--ease), transform .4s var(--ease);
}
.enter-btn:not([disabled]){ opacity:1; pointer-events:auto; }
.enter-btn-label{
  font-family:var(--sans); font-weight:400;
  font-size:14px; letter-spacing:0.42em; text-indent:0.42em;
  text-transform:uppercase; color:var(--ink);
}
.enter-btn-rule{ display:block; width:0; height:1px; background:var(--gold-bright); transition:width .5s var(--ease); }
.enter-btn:not([disabled]):hover .enter-btn-rule,
.enter-btn:not([disabled]):focus-visible .enter-btn-rule{ width:100%; }
.enter-btn:not([disabled]):hover{ transform:translateY(-2px); }
.loader-note{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(15px,2.2vw,19px); color:var(--ink-dim); letter-spacing:0.02em;
}

/* ============================================================
   NAV
   ============================================================ */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--pad);
  transition:transform .5s var(--ease), background-color .5s var(--ease),
             padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
#nav.is-solid{
  background:rgba(8,4,5,0.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding-top:18px; padding-bottom:18px;
}
#nav.is-hidden{ transform:translateY(-104%); }
.nav-brand{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(22px,3vw,28px); letter-spacing:0.28em; text-indent:0.28em;
  color:var(--ink);
}
.nav-links{ display:flex; gap:clamp(20px,3vw,48px); }
.nav-links a{
  position:relative;
  font-size:12px; font-weight:400; letter-spacing:0.26em; text-indent:0.26em;
  text-transform:uppercase; color:var(--ink-dim);
  padding:4px 0; transition:color .4s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold-bright); transition:width .45s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
#scene-root{ position:relative; z-index:3; }
section{ position:relative; z-index:3; background:transparent; }
#webgl:active{ cursor:grabbing; }
/* Distinct per-section background, crossfading behind the transparent 3D bottle */
#stage-bg{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; background:#070504; }
.stage-bg-layer{
  position:absolute; inset:0; background-size:cover; background-position:center; opacity:0;
  transition:opacity 1.1s ease; will-change:opacity;
  filter: brightness(0.45) saturate(1.0) contrast(1.05);
}
.stage-bg-layer.is-on{ opacity:1; }
.stage-bg-scrim{ position:absolute; inset:0; background:radial-gradient(130% 130% at 50% 42%, rgba(7,5,4,0.10), rgba(7,5,4,0.36) 76%, rgba(7,5,4,0.68)); }

.section-head{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;
}
.section-kicker{
  font-size:12px; font-weight:400; letter-spacing:0.5em; text-indent:0.5em;
  text-transform:uppercase; color:var(--gold);
}
.section-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,7vw,86px); line-height:1.02; letter-spacing:0.01em;
  color:var(--ink);
}
.section-lede{
  max-width:54ch; font-size:clamp(15px,1.8vw,18px); color:var(--ink-dim);
  font-weight:300; line-height:1.8;
}

/* text scrim so copy stays legible over the 3D bottles */
.text-scrim, .hero-inner, .scent-head, .scent-detail,
.manifesto-inner, .craft-inner, .closing-inner{
  position:relative;
}

/* ============================================================
   HERO
   ============================================================ */
#hero{
  min-height:100svh; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px var(--pad) 60px;
}
.hero-inner{
  display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.6vw,26px);
  padding:42px clamp(20px,5vw,70px);
}
.hero-inner::before{
  content:""; position:absolute; inset:-10% -20%;
  background:radial-gradient(60% 60% at 50% 50%, rgba(7,5,4,0.66), transparent 72%);
  z-index:-1; pointer-events:none;
}
.hero-eyebrow{
  font-size:12px; font-weight:400; letter-spacing:0.5em; text-indent:0.5em;
  text-transform:uppercase; color:var(--gold);
}
.hero-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(78px,22vw,260px); line-height:0.84;
  letter-spacing:0.16em; text-indent:0.16em;
  background:linear-gradient(178deg, var(--ink) 6%, var(--gold-bright) 46%, var(--gold) 66%, var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 12px 50px rgba(200,161,78,0.18));
}
.hero-tagline{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(20px,3.4vw,38px); color:var(--ink); letter-spacing:0.04em;
}
.hero-intro{
  max-width:40ch; font-size:clamp(14px,1.8vw,17px); color:var(--ink-dim);
  font-weight:300; letter-spacing:0.06em;
}
.scroll-cue{
  margin-top:clamp(30px,6vw,70px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.scroll-cue-text{
  font-size:10px; letter-spacing:0.42em; text-indent:0.42em;
  text-transform:uppercase; color:var(--ink-dim);
}
.scroll-cue-line{
  width:1px; height:54px;
  background:linear-gradient(180deg, var(--gold), transparent);
  position:relative; overflow:hidden;
}
.scroll-cue-line::after{
  content:""; position:absolute; left:0; top:-50%; width:100%; height:50%;
  background:var(--gold-bright); animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(300%);} }

/* ============================================================
   MANIFESTO
   ============================================================ */
#manifesto{
  padding:clamp(90px,16vh,180px) var(--pad);
  display:flex; justify-content:center;
}
.manifesto-inner{
  max-width:1040px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:34px;
}
.manifesto-mark{
  font-size:12px; letter-spacing:0.5em; text-indent:0.5em;
  text-transform:uppercase; color:var(--gold);
}
.manifesto-body{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(24px,4.6vw,52px); line-height:1.28; color:var(--ink);
  letter-spacing:0.005em;
}

/* ============================================================
   SCENT CHAPTERS
   ============================================================ */
.chapter--scent{
  min-height:100svh; min-height:100vh;
  display:flex; align-items:center;
  padding:clamp(110px,16vh,180px) var(--pad);
}
/* Single text column on ONE side; the 3D bottle is panned to the opposite side
   by the engine so copy and bottle never overlap (works for light bottles too). */
.scent-grid{
  display:flex; flex-direction:column;
  gap:clamp(24px,3.2vw,40px);
  width:100%; max-width:clamp(420px,46vw,560px); margin:0;
}
.chapter--scent{ justify-content:flex-start; }
.chapter--scent[data-index="2"],
.chapter--scent[data-index="4"]{ justify-content:flex-end; text-align:right; }
.chapter--scent[data-index="2"] .scent-notes > *,
.chapter--scent[data-index="4"] .scent-notes > *{ text-align:right; }
.chapter--scent[data-index="2"] .scent-story,
.chapter--scent[data-index="4"] .scent-story{ margin-left:auto; }

.scent-head{ display:flex; flex-direction:column; gap:14px; }
.scent-head::before, .scent-detail::before{
  content:""; position:absolute; inset:-8% -10%;
  background:radial-gradient(70% 70% at 30% 40%, rgba(7,5,4,0.7), transparent 75%);
  z-index:-1; pointer-events:none;
}
.scent-num{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(48px,9vw,120px); line-height:0.8; color:var(--accent);
  opacity:0.9; letter-spacing:0.02em;
}
.scent-name{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(40px,7vw,84px); line-height:1.0; color:var(--ink);
  letter-spacing:0.01em;
}
.scent-subtitle{
  font-size:12px; letter-spacing:0.4em; text-indent:0.4em;
  text-transform:uppercase; color:var(--gold);
}
.scent-accord{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(17px,2.4vw,24px); color:var(--ink-dim);
}
.scent-detail{ display:flex; flex-direction:column; gap:clamp(26px,4vw,42px); }
.scent-notes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,34px);
}
.note-group{ display:flex; flex-direction:column; gap:12px; }
.note-label{
  font-size:11px; font-weight:500; letter-spacing:0.34em; text-indent:0.34em;
  text-transform:uppercase; color:var(--accent);
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.note-group ul{ display:flex; flex-direction:column; gap:8px; }
.note-group li{
  font-size:clamp(13px,1.6vw,15px); color:var(--ink); font-weight:300; letter-spacing:0.02em;
}
.scent-story{
  font-size:clamp(15px,1.9vw,17px); line-height:1.85; color:var(--ink-dim);
  font-weight:300; max-width:52ch;
}

/* fallback bottle images: hidden until no-webgl */
.scent-fallback{
  display:none;
  position:absolute; right:6%; top:50%; transform:translateY(-50%);
  width:min(34vw,360px); height:auto; opacity:0.95;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,0.6));
}

/* ============================================================
   ROOMS — pinned horizontal gallery (copy left / bottle centre / image plate right)
   ============================================================ */
#rooms{ position:relative; height:100vh; overflow:hidden; padding:0; pointer-events:none; }
/* GSAP's pin wrapper sits over the canvas; make it click-through so drag-to-rotate reaches the bottle */
.pin-spacer, .pin-spacer .rooms-content-track{ pointer-events:none; }
/* v3 horizontal content track (bottle shows through the transparent centre; drag to rotate) */
.rooms-content-track{ display:flex; flex-wrap:nowrap; height:100vh; width:max-content; will-change:transform; pointer-events:none; }
.room-content{ position:relative; flex:0 0 100vw; width:100vw; height:100vh; display:flex; align-items:center; padding:0 clamp(28px,6vw,116px); }
.room-content .room-copy{ position:relative; z-index:3; width:min(42%,560px); display:flex; flex-direction:column; gap:clamp(12px,1.7vw,22px); pointer-events:auto; }
.room-copy.glass{ padding:clamp(22px,3vw,40px); border-radius:20px;
  background:linear-gradient(150deg, rgba(22,15,9,0.46), rgba(8,6,4,0.28));
  border:1px solid rgba(200,161,78,0.24);
  box-shadow:0 36px 100px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,236,196,0.08);
  -webkit-backdrop-filter:blur(18px) saturate(125%); backdrop-filter:blur(18px) saturate(125%); }
.room-copy.glass::before{ display:none; }
.no-gsap .rooms-content-track{ flex-direction:column; width:auto; transform:none !important; }
.no-gsap .room-content{ flex:0 0 auto; height:100vh; }
/* v4: bottle centred + CLEAR (draggable); copy split into two flanking liquid-glass pills */
.room-content{ justify-content:space-between; align-items:center; gap:clamp(16px,3vw,56px); }
.room-side{ position:relative; z-index:3; width:clamp(258px,27vw,358px); pointer-events:auto; display:flex; flex-direction:column; gap:14px; }
.glass-pill{
  padding:clamp(20px,1.9vw,30px) clamp(20px,1.9vw,32px); border-radius:26px;
  background:linear-gradient(155deg, rgba(30,23,15,0.32), rgba(10,8,6,0.14));
  border:1px solid rgba(236,200,135,0.20);
  box-shadow:0 26px 76px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,240,205,0.10);
  -webkit-backdrop-filter:blur(22px) saturate(130%); backdrop-filter:blur(22px) saturate(130%);
}
.room-side .scent-num{ font-size:clamp(28px,3.2vw,44px); line-height:1; }
.room-side .scent-name{ font-size:clamp(26px,3.2vw,44px); line-height:1.03; }
.room-side .scent-subtitle{ font-size:10px; letter-spacing:0.34em; }
.room-side .scent-accord{ font-size:clamp(13px,1.3vw,16px); }
.room-side .scent-notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.room-side .note-label{ font-size:10px; letter-spacing:0.22em; padding-bottom:7px; }
.room-side .note-group li{ font-size:12px; }
.room-side .scent-story{ font-size:13px; line-height:1.7; max-width:none; }
.btn.buy-now{ margin-top:8px; align-self:flex-start; display:inline-flex; align-items:center; padding:12px 28px; border-radius:999px;
  border:1px solid var(--accent,#c8a14e); color:var(--ink); font-size:11px; letter-spacing:0.26em; text-transform:uppercase;
  background:linear-gradient(120deg, color-mix(in srgb, var(--accent,#c8a14e) 24%, transparent), transparent);
  transition:background .4s ease, transform .4s ease; }
.btn.buy-now:hover{ background:linear-gradient(120deg, color-mix(in srgb, var(--accent,#c8a14e) 58%, transparent), color-mix(in srgb, var(--accent,#c8a14e) 12%, transparent)); transform:translateY(-2px); }

/* Testimonials */
#testimonials{ min-height:auto; padding:clamp(90px,14vh,150px) var(--pad); }
.testimonial-grid{ max-width:var(--maxw); margin:48px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testimonial{ display:flex; flex-direction:column; gap:18px; padding:34px; border-radius:24px; }
.testimonial blockquote{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300; font-size:clamp(17px,1.7vw,22px); line-height:1.5; color:var(--ink); margin:0; }
.testimonial figcaption{ font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); }

/* ============================================================
   v5 — Goddess hero, scroll-illuminated headings, vibrancy, AURA trust
   ============================================================ */
/* Scroll-illuminate: dim, then brighten + gold glow as a heading enters view (filter-based so it works on gradient text too) */
html.js .hero-title, html.js .hero-tagline, html.js .section-title, html.js .craft-title,
html.js .closing-line, html.js .manifesto-body, html.js .scent-name, html.js .testimonial blockquote{
  filter:brightness(0.56) saturate(0.82);
  transition:filter 1.3s var(--ease);
}
html.js .hero-title.lit, html.js .hero-tagline.lit, html.js .section-title.lit, html.js .craft-title.lit,
html.js .closing-line.lit, html.js .manifesto-body.lit, html.js .scent-name.lit, html.js .testimonial blockquote.lit{
  filter:brightness(1.06) saturate(1.05) drop-shadow(0 0 26px rgba(232,200,135,0.30));
}
/* Vibrancy: lift the dull body/lede text across sections */
.section-lede, .craft-body, .manifesto-body, .scent-story, .scent-accord{ color:#d9d0bb; }
.section-kicker, .closing-kicker, .manifesto-mark{ color:var(--gold-bright); }

/* Goddess hero: copy on the LEFT over the scent-trail, goddess on the right */
#hero{ position:relative; }
#hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(7,5,4,0.88) 0%, rgba(7,5,4,0.55) 40%, rgba(7,5,4,0) 64%); }
#hero .hero-inner.hero-left{ position:relative; z-index:2; align-self:flex-start; align-items:flex-start; text-align:left;
  max-width:min(640px,56vw); margin-left:clamp(20px,5vw,80px); padding-left:0; padding-right:0; }
/* Contain the giant wordmark so PRAIRIE always reads in full (no edge clipping) and sits over the dark scent-trail */
#hero .hero-title{ font-size:clamp(56px,14.5vw,200px); letter-spacing:0.05em; text-indent:0.05em; line-height:0.86; white-space:nowrap; }
#hero .hero-eyebrow{ color:var(--gold-bright); }
#hero .hero-intro{ color:var(--ink-dim); }
#hero .scroll-cue{ position:relative; z-index:2; }
.hero-trust{ display:flex; align-items:center; gap:14px; margin-top:28px; }
.trust-faces{ display:flex; }
.trust-faces .face{ width:38px; height:38px; border-radius:50%; margin-left:-12px; border:2px solid var(--bg);
  background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--bg-2)); box-shadow:0 6px 16px rgba(0,0,0,0.45); }
.trust-faces .face:first-child{ margin-left:0; }
.trust-faces .face:nth-child(2){ background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--bg)); }
.trust-faces .face:nth-child(3){ background:radial-gradient(circle at 35% 30%, var(--gold), var(--bg-2)); }
.trust-faces .face:nth-child(4){ background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-deep)); }
.trust-meta{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-bright); }
.hero-cta-row{ display:flex; align-items:center; gap:26px; margin-top:30px; flex-wrap:wrap; }
.btn.hero-shop{ display:inline-flex; align-items:center; padding:15px 36px; border-radius:999px;
  background:linear-gradient(120deg, var(--gold), var(--gold-bright)); color:var(--bg); font-weight:600;
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase; box-shadow:0 14px 40px rgba(46,204,113,0.22);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.btn.hero-shop:hover{ transform:translateY(-2px); box-shadow:0 22px 56px rgba(46,204,113,0.38); }
.hero-rating{ display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--ink-dim); }
.hero-rating .stars{ color:var(--gold-bright); letter-spacing:3px; }
.hero-card{ position:absolute; right:clamp(20px,5vw,72px); bottom:clamp(44px,11vh,96px); z-index:2;
  width:min(300px,30vw); padding:24px 26px; }
.hero-card-top{ display:flex; justify-content:space-between; font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); }
.hero-card-title{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:26px; margin:14px 0 8px; color:var(--ink); }
.hero-card-body{ font-size:13px; line-height:1.6; color:var(--ink-dim); }
.hero-card-foot{ display:flex; justify-content:space-between; font-size:9px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold-bright); margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }
@media (max-width:900px){
  #hero .hero-inner.hero-left{ max-width:100%; }
  #hero::after{ background:linear-gradient(180deg, rgba(7,5,4,0.5), rgba(7,5,4,0.86)); }
  .hero-card{ display:none; }
}

@media (max-width:900px){
  .room-content{ flex-direction:column; justify-content:center; gap:18px; padding:88px var(--pad); }
  .room-side{ width:100%; }
  .testimonial-grid{ grid-template-columns:1fr; }
}
.rooms-track{ display:flex; flex-wrap:nowrap; height:100vh; width:max-content; will-change:transform; }
.room{
  position:relative; flex:0 0 100vw; width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(28px,6vw,112px);
}
.room-copy{
  position:relative; z-index:2; width:min(40%,520px);
  display:flex; flex-direction:column; gap:clamp(14px,2vw,24px);
}
.room-copy::before{
  content:""; position:absolute; inset:-10% -16% -10% -45%;
  background:radial-gradient(80% 80% at 22% 45%, rgba(6,4,3,0.86), transparent 78%);
  z-index:-1; pointer-events:none;
}
.room-plate{
  position:relative; z-index:2; width:min(33%,440px); height:min(72vh,620px);
  background-image:var(--img); background-size:cover; background-position:center;
  border:1px solid var(--line); box-shadow:0 50px 130px rgba(0,0,0,0.62);
  overflow:hidden;
}
.room-plate::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(155deg, color-mix(in srgb, var(--accent) 26%, transparent), rgba(6,4,3,0.45) 60%, rgba(6,4,3,0.88));
}
.room-plate::before{
  content:""; position:absolute; inset:12px; z-index:1; pointer-events:none;
  border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
}

/* No-GSAP fallback: rooms stack vertically (also the mobile/touch path) */
html.no-gsap #rooms{ height:auto; overflow:visible; pointer-events:auto; }
html.no-gsap .rooms-track{ flex-direction:column; width:auto; transform:none !important; }
html.no-gsap .room{ flex:0 0 auto; height:100vh; }
/* current DOM uses .rooms-content-track / .room-content — stack them for the vertical fallback.
   height:auto is critical: the base track is height:100vh, which would clip the column to one
   screen and let rooms 2..n overflow and collide with the sections below. */
html.no-gsap .rooms-content-track{ flex-direction:column; width:auto; height:auto; transform:none !important; }
html.no-gsap .room-content{ flex:0 0 auto; width:100%; height:auto; min-height:100svh; padding:84px var(--pad); }
@media (prefers-reduced-motion:reduce){ .stage-bg-layer{ transition:none; } }

@media (max-width:900px){
  .room{ flex-direction:column; justify-content:center; gap:26px; padding:96px var(--pad); }
  .room-copy{ width:100%; }
  .room-copy::before{ inset:-6% -8%; background:linear-gradient(180deg, rgba(6,4,3,0.86), rgba(6,4,3,0.5) 58%, rgba(6,4,3,0.88)); }
  .room-plate{ width:100%; height:30vh; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
#marquee{
  padding:clamp(40px,8vh,90px) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap;
  background:linear-gradient(180deg, transparent, rgba(13,9,7,0.5), transparent);
}
.marquee-track{
  display:inline-flex; align-items:center; gap:clamp(28px,5vw,70px);
  animation:marquee 38s linear infinite; will-change:transform;
}
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }
.marquee-item{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(30px,7vw,76px); color:transparent;
  -webkit-text-stroke:1px rgba(200,161,78,0.4);
  letter-spacing:0.02em; display:inline-flex; align-items:center; gap:clamp(28px,5vw,70px);
}
.marquee-item em{ font-style:normal; color:var(--gold); -webkit-text-stroke:0; font-size:0.5em; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============================================================
   COLLECTION
   ============================================================ */
#collection{ padding:clamp(100px,16vh,180px) 0; }
#collection .section-head{ margin-bottom:clamp(50px,8vh,90px); }
.collection-list{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  border-top:1px solid var(--line);
}
.collection-row{ border-bottom:1px solid var(--line); }
.collection-row a{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:clamp(16px,3vw,40px);
  padding:clamp(22px,3.4vw,40px) clamp(6px,1.6vw,20px);
  position:relative; overflow:hidden;
  transition:padding-left .5s var(--ease);
}
.collection-row a::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg, rgba(200,161,78,0.10), transparent);
  transition:width .55s var(--ease); z-index:-1;
}
.collection-row a:hover::before{ width:100%; }
.collection-row a:hover{ padding-left:clamp(16px,3vw,40px); }
.collection-num{
  font-family:var(--serif); font-size:clamp(18px,2.4vw,26px);
  color:var(--accent); width:2.4ch;
}
.collection-name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,5vw,56px); color:var(--ink); line-height:1; letter-spacing:0.01em;
  transition:color .4s var(--ease), transform .5s var(--ease);
}
.collection-row a:hover .collection-name{ color:var(--gold-bright); transform:translateX(8px); }
.collection-accord{
  font-size:12px; letter-spacing:0.3em; text-indent:0.3em;
  text-transform:uppercase; color:var(--ink-dim); text-align:right;
}
.collection-arrow{
  font-size:22px; color:var(--gold);
  transform:translateX(-6px); opacity:0;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.collection-row a:hover .collection-arrow{ transform:translateX(0); opacity:1; }

/* ============================================================
   CRAFT / HERITAGE
   ============================================================ */
#craft{
  padding:clamp(110px,18vh,200px) var(--pad);
  display:flex; justify-content:center;
}
.craft-inner{
  max-width:1100px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:clamp(24px,3.6vw,40px);
}
.craft-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(32px,6vw,72px); line-height:1.08; color:var(--ink);
  max-width:18ch;
}
.craft-body{
  max-width:60ch; font-size:clamp(15px,1.9vw,18px); line-height:1.9;
  color:var(--ink-dim); font-weight:300;
}
.craft-stats{
  margin-top:clamp(30px,5vw,56px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px);
  width:100%; border-top:1px solid var(--line); padding-top:clamp(34px,5vw,56px);
}
.craft-stat{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.craft-stat > span:first-child{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(40px,6vw,72px); color:var(--gold-bright); line-height:1;
}
.craft-stat-suffix{ font-size:0.5em; color:var(--gold); margin-left:2px; }
.craft-stat-label{
  font-size:11px; letter-spacing:0.3em; text-indent:0.3em;
  text-transform:uppercase; color:var(--ink-dim);
}

/* ============================================================
   CLOSING / CTA
   ============================================================ */
#closing{
  min-height:92svh; min-height:92vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:clamp(110px,18vh,200px) var(--pad);
}
.closing-inner{
  display:flex; flex-direction:column; align-items:center; gap:clamp(28px,4vw,46px);
  padding:clamp(30px,5vw,60px);
}
.closing-inner::before{
  content:""; position:absolute; inset:-10% -20%;
  background:radial-gradient(60% 70% at 50% 50%, rgba(124,94,38,0.20), rgba(7,5,4,0.6) 60%, transparent 80%);
  z-index:-1; pointer-events:none;
}
.closing-kicker{
  font-family:var(--serif); font-size:clamp(20px,3vw,30px);
  letter-spacing:0.4em; text-indent:0.4em; color:var(--gold);
}
.closing-line{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(44px,10vw,140px); line-height:0.96; color:var(--ink);
  letter-spacing:0.01em; max-width:16ch;
  background:linear-gradient(178deg, var(--ink), var(--gold-bright) 60%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* button */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:18px 44px; overflow:hidden;
  border:1px solid var(--gold); color:var(--ink);
  font-size:12px; font-weight:500; letter-spacing:0.34em; text-indent:0.34em;
  text-transform:uppercase;
  transition:color .5s var(--ease), border-color .5s var(--ease);
  will-change:transform;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover{ color:var(--bg); border-color:var(--gold-bright); }
.btn:hover::before{ transform:translateY(0); }
.btn-label{ position:relative; z-index:1; }

/* ============================================================
   FOOTER
   ============================================================ */
#footer{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  padding:clamp(60px,9vh,100px) var(--pad) clamp(30px,4vh,44px);
  background:rgba(7,5,4,0.7);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.footer-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(30px,5vw,60px);
}
.footer-brand{ display:flex; flex-direction:column; gap:12px; }
.footer-mark{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(34px,5vw,52px); letter-spacing:0.22em; text-indent:0.22em; color:var(--ink);
}
.footer-tag{
  font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink-dim);
}
.footer-col{ display:flex; flex-direction:column; gap:14px; }
.footer-col-title{
  font-size:11px; letter-spacing:0.32em; text-indent:0.32em;
  text-transform:uppercase; color:var(--gold); margin-bottom:6px;
}
.footer-col a{
  font-size:14px; color:var(--ink-dim); font-weight:300;
  position:relative; width:fit-content; transition:color .4s var(--ease);
}
.footer-col a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--gold); transition:width .4s var(--ease);
}
.footer-col a:hover{ color:var(--ink); }
.footer-col a:hover::after{ width:100%; }
.footer-base{
  max-width:var(--maxw); margin:clamp(40px,6vh,70px) auto 0;
  padding-top:26px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.footer-copy, .footer-fine{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-dim);
}

/* ============================================================
   NO-WEBGL FALLBACK STAGE
   ============================================================ */
html.no-webgl #webgl{ display:none; }
html.no-webgl body::before{
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(200,161,78,0.16), transparent 55%),
    radial-gradient(80% 60% at 78% 108%, rgba(200,119,47,0.12), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%, var(--bg) 100%);
}
html.no-webgl .chapter--scent{
  padding-right:clamp(20px,5vw,80px);
}
html.no-webgl .scent-fallback{ display:block; }
/* on small screens, stack the fallback bottle below copy */
@media (max-width:900px){
  html.no-webgl .scent-fallback{
    position:static; transform:none; margin:36px auto 0;
    width:min(60vw,260px);
  }
}
/* give the fallback bottle a soft branded halo */
html.no-webgl .chapter--scent::after{
  content:""; position:absolute; right:6%; top:50%; transform:translate(0,-50%);
  width:min(40vw,440px); height:min(40vw,440px);
  background:radial-gradient(circle, rgba(200,161,78,0.18), transparent 65%);
  z-index:0; pointer-events:none;
}
@media (max-width:900px){ html.no-webgl .chapter--scent::after{ display:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .craft-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .scent-grid{ max-width:none; width:100%; gap:clamp(28px,6vw,44px); position:relative; }
  .scent-grid::before{ content:""; position:absolute; inset:-7vw -8vw; z-index:-1;
    background:linear-gradient(180deg, rgba(5,4,3,0.84), rgba(5,4,3,0.5) 55%, rgba(5,4,3,0.86)); }
  .chapter--scent,
  .chapter--scent[data-index="2"],
  .chapter--scent[data-index="4"]{ justify-content:flex-start; text-align:left; }
  .chapter--scent[data-index="2"] .scent-notes > *,
  .chapter--scent[data-index="4"] .scent-notes > *{ text-align:left; }
  .chapter--scent[data-index="2"] .scent-story,
  .chapter--scent[data-index="4"] .scent-story{ margin-left:0; }
  .scent-head::before, .scent-detail::before{ inset:-6% -6%; }
}
@media (max-width:680px){
  #nav{ padding:18px var(--pad); }
  .nav-links{ gap:18px; }
  .nav-links a{ font-size:10px; letter-spacing:0.18em; text-indent:0.18em; }
  .scent-notes{ grid-template-columns:1fr; gap:22px; }
  .note-group{ border-bottom:1px solid var(--line); padding-bottom:18px; }
  .note-group:last-child{ border-bottom:none; }
  .collection-row a{
    grid-template-columns:auto 1fr; grid-template-rows:auto auto;
    row-gap:6px;
  }
  .collection-accord{ grid-column:1 / -1; text-align:left; padding-left:3.4ch; }
  .collection-arrow{ display:none; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .footer-base{ flex-direction:column; gap:10px; }
}
@media (max-width:390px){
  :root{ --pad:18px; }
  .hero-title{ letter-spacing:0.1em; text-indent:0.1em; }
  .craft-stats{ grid-template-columns:1fr 1fr; gap:18px; }
  .btn{ padding:16px 30px; letter-spacing:0.24em; text-indent:0.24em; }
}
@media (max-width:360px){
  .hero-title{ font-size:min(20vw,70px); }
  .scent-name{ font-size:34px; }
  .marquee-item{ font-size:42px; }
}

/* keep things visible if fonts fail (fallback stack already in vars) */
.no-js .cursor{ display:none; }