/*
Theme Name: Amber Hour Stats Vibe — Visual Tune
Theme URI: https://mahnooraftab.com
Author: Mahnoor Aftab
Author URI: https://mahnooraftab.com
Description: A cinematic, scroll-driven one-page WordPress theme built for a candle & home-fragrance brand. Numbered chapter reveals, alternating photo/text layout, and a signature animated "wick" scroll-progress indicator.
Version: 2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amber-hour
*/

:root{
  --charcoal: #17130f;
  --charcoal-deep: #0e0b08;
  --cream: #f4ead9;
  --cream-dim: #cabfae;
  --amber: #c9863f;
  --amber-bright: #e6a85c;
  --wine: #4a2e22;
  --line: rgba(244,234,217,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--charcoal);
  color:var(--cream);
  font-family:'Manrope', sans-serif;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--amber); color:var(--charcoal-deep); }

.serif{ font-family:'Playfair Display', serif; }
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.08em; text-transform:uppercase; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

/* ---------- Wick progress indicator (signature element) ---------- */
.wick{
  position:fixed;
  right:28px;
  top:50%;
  transform:translateY(-50%);
  height:38vh;
  width:2px;
  background:var(--line);
  z-index:50;
}
.wick-fill{
  position:absolute;
  bottom:0; left:0; width:100%;
  height:0%;
  background:linear-gradient(to top, var(--amber), var(--amber-bright));
  box-shadow:0 0 12px 2px rgba(230,168,92,0.6);
  transition:height 0.1s linear;
}
.wick-flame{
  position:absolute;
  left:50%;
  bottom:0%;
  transform:translate(-50%, 50%);
  width:10px; height:14px;
  background:radial-gradient(ellipse at 50% 70%, var(--amber-bright) 0%, var(--amber) 55%, transparent 75%);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  filter:blur(0.3px);
  animation:flicker 2.4s ease-in-out infinite;
}
@keyframes flicker{
  0%,100%{ opacity:1; transform:translate(-50%,50%) scaleY(1) rotate(0deg); }
  30%{ opacity:0.85; transform:translate(-50%,50%) scaleY(1.08) rotate(-2deg); }
  55%{ opacity:0.95; transform:translate(-50%,50%) scaleY(0.94) rotate(2deg); }
  80%{ opacity:0.9; transform:translate(-50%,50%) scaleY(1.04) rotate(-1deg); }
}
@media (max-width: 780px){ .wick{ display:none; } }

/* ---------- Nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 5vw;
  background:linear-gradient(to bottom, rgba(14,11,8,0.75), transparent);
}
.brand-mark{ font-size:15px; letter-spacing:0.16em; display:flex; align-items:center; }
.brand-mark img{ height:46px; width:auto; display:block; }
.footer-mark img{ height:30px; width:auto; display:block; opacity:0.9; }
@media (max-width:780px){ .brand-mark img{ height:36px; } }
.nav-links{ display:flex; gap:32px; font-size:12px; }
.nav-links a{ opacity:0.75; transition:opacity 0.3s; }
.nav-links a:hover{ opacity:1; }
@media (max-width:780px){ .nav-links{ display:none; } }

/* ---------- Section base ---------- */
section{ position:relative; padding:min(14vh,140px) 7vw; }
.reveal{ opacity:0; transform:translateY(36px); transition:opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal.d1{ transition-delay:0.08s; }
.reveal.d2{ transition-delay:0.18s; }
.reveal.d3{ transition-delay:0.28s; }

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:120px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 52% 45% at 78% 30%, rgba(201,134,63,0.16), transparent 64%),
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(74,46,34,0.35), transparent 65%);
  pointer-events:none;
  z-index:-3;
}
.hero-product-scene{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(60vw, 1120px);
  z-index:-2;
  overflow:hidden;
}
.hero-product-scene::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--charcoal) 0%, rgba(23,19,15,.82) 13%, rgba(23,19,15,.28) 35%, rgba(23,19,15,0) 60%);
  z-index:2;
  pointer-events:none;
}
.hero-product-scene::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,11,8,.18), transparent 22%, transparent 76%, rgba(23,19,15,.25));
  z-index:2;
  pointer-events:none;
}
.hero-product-scene img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  filter:saturate(.92) contrast(1.03);
  transform:scale(1);
}
.hero > .eyebrow,
.hero > h1,
.hero > .hero-sub,
.hero > .hero-cta{
  position:relative;
  z-index:2;
}
.eyebrow{ font-size:11px; color:var(--amber-bright); margin-bottom:22px; }
.hero h1{
  font-size:clamp(48px, 7.2vw, 108px);
  line-height:0.98;
  font-weight:500;
  max-width:13ch;
  text-wrap:balance;
}
.hero h1 em{ font-style:italic; font-weight:500; color:var(--amber-bright); }
.hero-sub{
  margin-top:28px;
  max-width:36ch;
  font-size:16px;
  line-height:1.7;
  color:var(--cream-dim);
}
.hero-cta{ display:flex; gap:18px; margin-top:44px; flex-wrap:wrap; }
.btn{
  padding:15px 30px;
  border:1px solid var(--line);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
  display:inline-block;
}
.btn.solid{ background:var(--amber); border-color:var(--amber); color:var(--charcoal-deep); font-weight:500; }
.btn.solid:hover{ background:var(--amber-bright); border-color:var(--amber-bright); }
.btn.ghost:hover{ border-color:var(--cream); }

@media (max-width:980px){
  .hero{padding-bottom:60px;}
  .hero-product-scene{width:62vw; opacity:.72;}
  .hero-product-scene::before{background:linear-gradient(90deg, var(--charcoal) 0%, rgba(23,19,15,.9) 20%, rgba(23,19,15,.42) 52%, rgba(23,19,15,.12) 100%);}
  .hero h1{max-width:10ch;}
}
@media (max-width:780px){
  .hero-product-scene{
    top:auto; left:0; right:0; bottom:0;
    width:100%; height:48vh;
    opacity:.7;
  }
  .hero-product-scene::before{background:linear-gradient(180deg, var(--charcoal) 0%, rgba(23,19,15,.58) 24%, rgba(23,19,15,.18) 70%, rgba(23,19,15,.48));}
  .hero{justify-content:flex-start; padding-top:118px; padding-bottom:48vh;}
  .hero h1{font-size:clamp(44px, 14vw, 72px); max-width:9ch;}
}

/* ---------- Intro strip ---------- */
.intro{
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:70px 7vw;
}
.intro p{ font-size:20px; line-height:1.65; color:var(--cream-dim); font-weight:300; }
.intro .label{ font-size:11px; color:var(--amber-bright); }
@media (max-width:780px){ .intro{ grid-template-columns:1fr; gap:20px; } }

/* ---------- Chapter (feature) sections ---------- */
.chapter{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:6vw;
  align-items:center;
  padding-top:min(16vh,150px); padding-bottom:min(16vh,150px);
}
.chapter.reverse{ direction:rtl; }
.chapter.reverse > *{ direction:ltr; }
.chapter-visual{
  aspect-ratio:4/5;
  border-radius:2px;
  position:relative;
  overflow:hidden;
  background:var(--charcoal-deep);
}
.chapter-visual img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.03);
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.chapter-visual:hover img{ transform:scale(1.08); }
.chapter-visual .frame{
  position:absolute; inset:16px;
  border:1px solid rgba(244,234,217,0.18);
  pointer-events:none;
}
.chapter-num{ font-size:12px; color:var(--amber-bright); margin-bottom:18px; }
.chapter h2{ font-size:clamp(30px,4vw,52px); font-weight:500; line-height:1.05; margin-bottom:18px; }
.chapter h2 em{ font-style:italic; color:var(--amber-bright); }
.chapter p{ font-size:16px; line-height:1.75; color:var(--cream-dim); max-width:44ch; }
.chapter .notes{ margin-top:26px; display:flex; gap:10px; flex-wrap:wrap; }
.note-pill{ font-size:11px; padding:7px 14px; border:1px solid var(--line); color:var(--cream-dim); }
@media (max-width:780px){
  .chapter, .chapter.reverse{ grid-template-columns:1fr; direction:ltr; }
}


/* ---------- Diffuser section refinement only ---------- */
.chapter-diffuser{
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:5vw;
}
.chapter-diffuser .chapter-visual{
  aspect-ratio:972/800;
  min-height:0;
  background:var(--charcoal-deep);
  overflow:hidden;
}
.chapter-diffuser .chapter-visual img{
  width:100%; height:100%;
  object-fit:contain;
  object-position:center;
  transform:none;
  transition:filter .5s ease;
}
.chapter-diffuser .chapter-visual:hover img{
  transform:none;
  filter:brightness(1.04);
}
.chapter-diffuser .chapter-visual .frame{ inset:14px; }
@media (max-width:780px){
  .chapter-diffuser{grid-template-columns:1fr;}
  .chapter-diffuser .chapter-visual{aspect-ratio:972/800;}
}

/* ---------- Quote sections ---------- */
.quote-sec{ padding:min(10vh,90px) 7vw; text-align:center; }
.quote-sec .stars{ color:var(--amber-bright); font-size:14px; margin-bottom:20px; letter-spacing:0.2em; }
.quote-sec blockquote{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-size:clamp(22px,3vw,34px);
  max-width:20ch;
  margin:0 auto;
  line-height:1.4;
}
.quote-sec .who{ margin-top:20px; font-size:12px; color:var(--cream-dim); }

/* ---------- Craft / stats strip ---------- */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
  border-top:1px solid var(--line);
  padding:80px 7vw;
}
.stat-num{ font-family:'Playfair Display',serif; font-size:clamp(36px,4.4vw,58px); color:var(--amber-bright); }
.stat-label{ font-size:12px; color:var(--cream-dim); margin-top:8px; }
@media (max-width:780px){ .stats{ grid-template-columns:1fr; gap:36px; } }

/* ---------- Closing ---------- */
.closing{
  min-height:90svh;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  position:relative;
  border-top:1px solid var(--line);
}
.closing::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 55% 50% at 25% 60%, rgba(201,134,63,0.16), transparent 65%);
  pointer-events:none;
}
.closing .eyebrow{ margin-bottom:22px; }
.closing h2{ font-size:clamp(36px,6.4vw,86px); font-weight:500; line-height:1.02; max-width:18ch; }
.closing h2 em{ font-style:italic; color:var(--amber-bright); }
.closing-grid{
  margin-top:60px;
  display:flex; gap:60px; flex-wrap:wrap;
  font-size:13px; color:var(--cream-dim);
}
.closing-grid strong{ display:block; color:var(--cream); font-size:13px; margin-bottom:6px; font-weight:500; }

footer.site-footer{
  display:flex; justify-content:space-between; align-items:center;
  padding:30px 7vw; border-top:1px solid var(--line);
  font-size:11px; color:var(--cream-dim); flex-wrap:wrap; gap:14px;
}
footer.site-footer a{ opacity:0.8; }
footer.site-footer a:hover{ opacity:1; color:var(--amber-bright); }

.side-tag{
  position:fixed; left:24px; bottom:24px; z-index:40;
  font-size:10px; color:var(--cream-dim);
  letter-spacing:0.1em;
  writing-mode:vertical-rl;
  opacity:0.5;
  pointer-events:none;
}
@media (max-width:780px){ .side-tag{ display:none; } }


/* ============================================================
   Motion + aesthetic polish (v1.1)
   Visual layer only: no content, sizing or section-order changes.
   ============================================================ */

/* A softer, cinematic navigation state once the page starts moving. */
nav{
  transition:background .45s ease, border-color .45s ease, backdrop-filter .45s ease, padding .35s ease;
  border-bottom:1px solid transparent;
}
nav.is-scrolled{
  background:linear-gradient(to bottom, rgba(14,11,8,.92), rgba(14,11,8,.72));
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  border-bottom-color:rgba(230,168,92,.08);
}
.brand-mark img{ transition:filter .35s ease, transform .35s ease; }
.brand-mark:hover img{ filter:drop-shadow(0 0 10px rgba(230,168,92,.25)); transform:translateY(-1px); }
.nav-links a{ position:relative; }
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:100%; bottom:-7px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--amber-bright), transparent);
  transition:right .35s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover::after{ right:0; }

/* Hero: slow light breathing + gentle image parallax. */
.hero::before{
  animation:amberGlowBreath 7s ease-in-out infinite alternate;
}
.hero-product-scene{
  animation:heroSceneFloat 9s ease-in-out infinite alternate;
  will-change:transform;
}
.hero-product-scene::after{
  animation:heroLightPulse 5.8s ease-in-out infinite alternate;
}
.hero-product-scene img{
  transform:translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) scale(1.012);
  transition:transform .55s cubic-bezier(.2,.72,.3,1), filter .45s ease;
  will-change:transform;
}
.hero:hover .hero-product-scene img{
  filter:saturate(.98) contrast(1.045) brightness(1.025);
}
.hero h1 em{
  position:relative;
  text-shadow:0 0 30px rgba(230,168,92,.06);
  animation:accentWarmth 5s ease-in-out infinite alternate;
}

/* Tiny ambient embers are created by JS only inside the hero. */
.ambient-embers{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.ambient-ember{
  position:absolute;
  left:var(--left);
  bottom:-14px;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,210,143,.95) 0%, rgba(230,168,92,.55) 45%, rgba(201,134,63,0) 72%);
  opacity:0;
  filter:blur(.2px);
  animation:emberRise var(--duration) linear var(--delay) infinite;
}

/* Buttons: restrained premium sheen without changing their geometry. */
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:border-color .3s, background .3s, color .3s, transform .3s ease, box-shadow .3s ease;
}
.btn::after{
  content:"";
  position:absolute;
  top:-80%; bottom:-80%;
  left:-55%;
  width:34%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-18deg);
  transition:left .72s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
  z-index:-1;
}
.btn:hover{ transform:translateY(-2px); }
.btn:hover::after{ left:125%; }
.btn.solid:hover{ box-shadow:0 12px 28px rgba(201,134,63,.13); }

/* Existing scroll reveals feel a touch more dimensional, same trigger/order. */
.reveal{
  filter:blur(2px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1), filter .9s ease;
}
.reveal.in{ filter:blur(0); }

/* Product images: subtle cinematic depth without changing their crop/layout. */
.chapter-visual{
  box-shadow:0 18px 44px rgba(0,0,0,.12);
  transition:box-shadow .45s ease, border-color .45s ease;
}
.chapter-visual::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 25%, rgba(230,168,92,.075) 48%, transparent 70%);
  transform:translateX(-120%);
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.chapter-visual:hover::before{ transform:translateX(120%); }
.chapter-visual:hover{ box-shadow:0 24px 56px rgba(0,0,0,.2), 0 0 34px rgba(201,134,63,.035); }
.chapter-visual .frame{
  z-index:3;
  transition:border-color .4s ease, inset .4s ease;
}
.chapter-visual:hover .frame{ border-color:rgba(230,168,92,.28); }

/* Diffuser: all three products stay fully visible; only tiny optical movement. */
.chapter-diffuser .chapter-visual{
  box-shadow:0 24px 58px rgba(0,0,0,.2), inset 0 0 50px rgba(201,134,63,.025);
}
.chapter-diffuser .chapter-visual::after{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(circle at 62% 42%, rgba(230,168,92,.12), transparent 38%);
  opacity:.45;
  animation:diffuserGlow 6.5s ease-in-out infinite alternate;
}
.chapter-diffuser .chapter-visual img{
  z-index:1;
  transform:translate3d(var(--diff-x, 0px), var(--diff-y, 0px), 0) scale(.985);
  transition:transform .55s cubic-bezier(.2,.72,.3,1), filter .5s ease;
  will-change:transform;
}
.chapter-diffuser .chapter-visual:hover img{
  transform:translate3d(var(--diff-x, 0px), var(--diff-y, 0px), 0) scale(.99);
  filter:brightness(1.045) saturate(1.025);
}
.chapter-diffuser .chapter-visual .frame{ z-index:4; }
.chapter-diffuser .note-pill{
  transition:border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease;
}
.chapter-diffuser .note-pill:hover{
  border-color:rgba(230,168,92,.35);
  color:var(--cream);
  background:rgba(201,134,63,.045);
  transform:translateY(-2px);
}

/* A little warmth in quote/stats hover states; dimensions remain identical. */
.quote-sec .stars{ text-shadow:0 0 20px rgba(230,168,92,.08); }
.stat-num{ transition:text-shadow .35s ease, transform .35s ease; }
.stats > div:hover .stat-num{ transform:translateY(-2px); text-shadow:0 0 24px rgba(230,168,92,.12); }

@keyframes amberGlowBreath{
  0%{ opacity:.8; filter:saturate(.92); }
  100%{ opacity:1; filter:saturate(1.08); }
}
@keyframes heroSceneFloat{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(0,-7px,0); }
}
@keyframes heroLightPulse{
  0%{ opacity:.72; }
  100%{ opacity:1; }
}
@keyframes accentWarmth{
  0%{ color:var(--amber-bright); text-shadow:0 0 20px rgba(230,168,92,.025); }
  100%{ color:#efb86f; text-shadow:0 0 34px rgba(230,168,92,.1); }
}
@keyframes emberRise{
  0%{ transform:translate3d(0,0,0) scale(.6); opacity:0; }
  12%{ opacity:.42; }
  75%{ opacity:.16; }
  100%{ transform:translate3d(var(--drift), -68vh, 0) scale(1.1); opacity:0; }
}
@keyframes diffuserGlow{
  0%{ transform:translate3d(-1.5%,1%,0) scale(.98); opacity:.25; }
  100%{ transform:translate3d(1.5%,-1%,0) scale(1.03); opacity:.58; }
}

@media (max-width:780px){
  .hero-product-scene{ animation-duration:11s; }
  .ambient-ember:nth-child(n+6){ display:none; }
  .chapter-visual::before{ display:none; }
  .reveal{ filter:none; }
}



/* ---------- v1.4 visual tuning: hero + the three scent chapters only ---------- */
/* Hero scene uses the full composed product group without a cover crop. */
.hero-product-scene{
  top:88px;
  right:0;
  bottom:28px;
  width:min(59vw, 1120px);
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-left:2vw;
}
.hero-product-scene::before{
  left:-1px;
  background:linear-gradient(90deg,
    var(--charcoal) 0%,
    rgba(23,19,15,.96) 9%,
    rgba(23,19,15,.68) 23%,
    rgba(23,19,15,.22) 43%,
    rgba(23,19,15,0) 64%);
}
.hero-product-scene::after{
  background:
    linear-gradient(180deg, rgba(14,11,8,.26), transparent 13%, transparent 82%, rgba(23,19,15,.28)),
    radial-gradient(circle at 62% 48%, rgba(230,168,92,.08), transparent 34%);
}
.hero-product-scene img{
  width:100%;
  height:auto;
  max-height:calc(100svh - 118px);
  object-fit:contain;
  object-position:right center;
  transform:translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) scale(1);
  filter:saturate(.96) contrast(1.035) brightness(.98);
}
.hero:hover .hero-product-scene img{
  filter:saturate(1) contrast(1.05) brightness(1.02);
}
.hero h1{max-width:10.5ch;}

/* The 3 scent chapters use the source images' natural square composition and less vertical padding.
   This removes the large dead zone without changing any wording or section order. */
.chapter-scent{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:min(5vw,72px);
  padding-top:min(10vh,96px);
  padding-bottom:min(10vh,96px);
}
.chapter-scent .chapter-visual{
  aspect-ratio:1/1;
  max-height:650px;
  width:100%;
}
.chapter-scent .chapter-visual img{
  object-fit:cover;
  object-position:center;
}
.chapter-scent > .reveal.d2{
  max-width:560px;
}
.chapter-scent.reverse > .reveal.d2{
  justify-self:end;
}

@media (min-width:1400px){
  .chapter-scent{padding-top:88px;padding-bottom:88px;}
  .chapter-scent .chapter-visual{max-height:620px;}
}
@media (max-width:980px){
  .hero-product-scene{
    top:96px;
    bottom:24px;
    width:63vw;
    opacity:.82;
  }
  .hero-product-scene img{max-height:calc(100svh - 130px);}
}
@media (max-width:780px){
  .hero-product-scene{
    top:auto;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:45vh;
    padding:0;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    opacity:.78;
  }
  .hero-product-scene img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:contain;
    object-position:center bottom;
  }
  .hero-product-scene::before{
    background:linear-gradient(180deg, var(--charcoal) 0%, rgba(23,19,15,.72) 20%, rgba(23,19,15,.12) 66%, rgba(23,19,15,.38) 100%);
  }
  .hero{padding-bottom:43vh;}
  .chapter-scent,
  .chapter-scent.reverse{
    grid-template-columns:1fr;
    gap:34px;
    padding-top:68px;
    padding-bottom:68px;
  }
  .chapter-scent .chapter-visual{max-height:none;aspect-ratio:1/1;}
  .chapter-scent.reverse > .reveal.d2{justify-self:stretch;}
}

@media (prefers-reduced-motion:reduce){
  .hero::before,
  .hero-product-scene,
  .hero-product-scene::after,
  .hero h1 em,
  .ambient-ember,
  .chapter-diffuser .chapter-visual::after{
    animation:none !important;
  }
  .ambient-embers{ display:none !important; }
  .hero-product-scene img,
  .chapter-diffuser .chapter-visual img{
    transform:none !important;
  }
  .reveal{ filter:none !important; }
}


/* =========================================================
   v1.6 HERO IMPACT LAYER
   Scope: hero only. All site content/sections remain unchanged.
   ========================================================= */

.hero{
  --hero-seam: 43%;
}

/* Pull the product scene toward the copy so the center reads as one composition. */
.hero-product-scene{
  width:min(68vw, 1260px) !important;
  right:-1.5vw !important;
  overflow:visible !important;
  animation:heroSceneBreath 8.5s ease-in-out infinite alternate;
}

/* Stronger, smoother seam: removes the awkward empty stripe between copy and image. */
.hero-product-scene::before{
  left:-22% !important;
  width:122% !important;
  background:
    linear-gradient(90deg,
      var(--charcoal) 0%,
      rgba(23,19,15,.98) 12%,
      rgba(23,19,15,.86) 25%,
      rgba(23,19,15,.38) 43%,
      rgba(23,19,15,.08) 60%,
      transparent 76%) !important;
}

/* Warm living-light overlay over the product scene. */
.hero-product-scene::after{
  background:
    radial-gradient(circle at 32% 49%, rgba(230,168,92,.24), transparent 15%),
    radial-gradient(circle at 66% 40%, rgba(201,134,63,.14), transparent 21%),
    linear-gradient(180deg, rgba(14,11,8,.14), transparent 20%, transparent 75%, rgba(23,19,15,.22)) !important;
  animation:heroGlowPulse 4.8s ease-in-out infinite;
}

.hero-product-scene img{
  transform:translate3d(var(--hero-x,0px), var(--hero-y,0px),0) scale(1.025) !important;
  transform-origin:58% 50%;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease !important;
  filter:saturate(1.02) contrast(1.035) brightness(.98) !important;
}

.hero:hover .hero-product-scene img{
  transform:translate3d(var(--hero-x,0px), var(--hero-y,0px),0) scale(1.045) !important;
}

/* Visible editorial graphics — intentionally behind the live text. */
.hero::after{
  content:"";
  position:absolute;
  z-index:1;
  left:36%;
  top:18%;
  width:34vw;
  max-width:560px;
  aspect-ratio:1;
  border:1px solid rgba(230,168,92,.14);
  border-radius:50%;
  box-shadow:
    0 0 0 36px rgba(230,168,92,.025),
    0 0 0 78px rgba(230,168,92,.018);
  pointer-events:none;
  animation:heroOrbitDrift 11s ease-in-out infinite alternate;
}

/* Extra rings and light sweep generated without changing the markup. */
.hero .hero-product-scene{
  border-left:1px solid rgba(230,168,92,.08);
}

.hero .hero-product-scene > img{
  position:relative;
  z-index:1;
}

.hero > .eyebrow,
.hero > h1,
.hero > .hero-sub,
.hero > .hero-cta{
  max-width:540px;
}

/* Animate the real live headline, not text baked into the image. */
.hero > .eyebrow{
  animation:heroTextIn .7s .05s both;
}
.hero > h1{
  animation:heroTextIn .9s .12s both;
}
.hero > .hero-sub{
  animation:heroTextIn .9s .22s both;
}
.hero > .hero-cta{
  animation:heroTextIn .9s .31s both;
}

/* More visible premium button motion. */
.hero .btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero .btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(110deg, transparent 30%, rgba(255,244,218,.25) 48%, transparent 65%);
  transform:translateX(-140%);
  transition:transform .75s ease;
  z-index:-1;
}
.hero .btn:hover::after{
  transform:translateX(140%);
}

/* JS-created visual accents. */
.hero-impact-graphics{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.hero-impact-line{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(230,168,92,.45), transparent);
  transform-origin:left center;
  opacity:.65;
}
.hero-impact-line.l1{left:34%;top:31%;width:24%;transform:rotate(-10deg);animation:lineFloatA 7s ease-in-out infinite alternate;}
.hero-impact-line.l2{left:31%;top:70%;width:31%;transform:rotate(7deg);animation:lineFloatB 9s ease-in-out infinite alternate;}
.hero-impact-dot{
  position:absolute;
  width:6px;height:6px;border-radius:50%;
  background:var(--amber-bright);
  box-shadow:0 0 18px 5px rgba(230,168,92,.22);
  opacity:.75;
  animation:impactDot 4.2s ease-in-out infinite;
}
.hero-impact-dot.d1{left:52%;top:24%;animation-delay:-1s;}
.hero-impact-dot.d2{left:43%;top:63%;width:4px;height:4px;animation-delay:-2.4s;}
.hero-impact-dot.d3{left:67%;top:18%;width:3px;height:3px;animation-delay:-.4s;}

@keyframes heroSceneBreath{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-8px,-3px,0)}
}
@keyframes heroGlowPulse{
  0%,100%{opacity:.72}
  50%{opacity:1}
}
@keyframes heroOrbitDrift{
  from{transform:translate3d(-8px,8px,0) rotate(-2deg);opacity:.55}
  to{transform:translate3d(12px,-8px,0) rotate(3deg);opacity:.9}
}
@keyframes heroTextIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes lineFloatA{
  from{transform:translate3d(-8px,0,0) rotate(-10deg);opacity:.25}
  to{transform:translate3d(18px,-7px,0) rotate(-7deg);opacity:.72}
}
@keyframes lineFloatB{
  from{transform:translate3d(10px,4px,0) rotate(7deg);opacity:.2}
  to{transform:translate3d(-16px,-3px,0) rotate(4deg);opacity:.62}
}
@keyframes impactDot{
  0%,100%{transform:scale(.65);opacity:.3}
  50%{transform:scale(1.35);opacity:1}
}

@media (max-width:1180px){
  .hero-product-scene{width:64vw !important;right:-5vw !important;}
  .hero::after{left:39%;width:36vw;}
}

@media (max-width:980px){
  .hero-product-scene{width:66vw !important;right:-10vw !important;}
  .hero::after{left:37%;top:24%;width:42vw;}
}

@media (max-width:780px){
  .hero-product-scene{
    width:100% !important;
    right:0 !important;
    overflow:hidden !important;
  }
  .hero::after{
    left:42%;top:auto;bottom:9%;width:66vw;
  }
  .hero-impact-line.l1{left:18%;top:64%;width:46%;}
  .hero-impact-line.l2{left:32%;top:82%;width:42%;}
  .hero-impact-dot.d1{left:68%;top:58%;}
  .hero-impact-dot.d2{left:28%;top:76%;}
}

@media (prefers-reduced-motion:reduce){
  .hero-product-scene,
  .hero-product-scene::after,
  .hero::after,
  .hero > .eyebrow,
  .hero > h1,
  .hero > .hero-sub,
  .hero > .hero-cta,
  .hero-impact-line,
  .hero-impact-dot{
    animation:none !important;
  }
}


/* =========================================================
   v1.7 SCENT SECTION NORMALIZATION
   Goal: make Fig & Smoke, Amber Dusk and Linen & Sage feel
   visually matched in spacing/typographic layout.
   ========================================================= */
.chapter-scent{
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr) !important;
  gap:clamp(34px,4vw,58px) !important;
  align-items:center !important;
}
.chapter-scent .chapter-visual{
  max-width:760px;
  justify-self:start;
}
.chapter-scent.reverse .chapter-visual{
  justify-self:end;
}
.chapter-scent > .reveal.d2,
.chapter-scent.reverse > .reveal.d2{
  width:100%;
  max-width:540px;
  justify-self:start !important;
}
.chapter-scent .chapter-num{margin-bottom:20px;}
.chapter-scent h2{margin-bottom:20px;}
.chapter-scent p{
  max-width:34ch;
  min-height:0;
}
.chapter-scent .notes{
  margin-top:28px;
}
@media (max-width:780px){
  .chapter-scent,
  .chapter-scent.reverse{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  .chapter-scent .chapter-visual,
  .chapter-scent.reverse .chapter-visual,
  .chapter-scent > .reveal.d2,
  .chapter-scent.reverse > .reveal.d2{
    max-width:none;
    justify-self:stretch !important;
  }
  .chapter-scent p{max-width:40ch;}
}


/* =========================================================
   v1.8 HERO + DIFFUSER TIGHTENING
   Fixes: remove awkward central gaps in hero and diffuser section
   while keeping the approved imagery/content intact.
   ========================================================= */
.hero{
  overflow:hidden;
}
/* Hero: pull the product scene toward the copy and reduce the dead seam. */
.hero-product-scene{
  width:min(76vw, 1380px) !important;
  right:-9vw !important;
  top:74px !important;
  bottom:18px !important;
}
.hero-product-scene::before{
  left:-10% !important;
  width:110% !important;
  background:linear-gradient(90deg,
    rgba(23,19,15,.94) 0%,
    rgba(23,19,15,.82) 10%,
    rgba(23,19,15,.46) 22%,
    rgba(23,19,15,.14) 34%,
    rgba(23,19,15,0) 48%) !important;
}
.hero-product-scene img{
  object-position:57% center !important;
  max-height:calc(100svh - 92px) !important;
}
/* Keep the motion graphics but make them less intrusive / less like empty padding. */
.hero::after{
  left:18% !important;
  top:14% !important;
  width:min(31vw, 440px) !important;
  max-width:440px !important;
  box-shadow:
    0 0 0 26px rgba(230,168,92,.020),
    0 0 0 56px rgba(230,168,92,.014) !important;
  opacity:.72;
}
.hero-impact-line.l1{left:23% !important; top:28% !important; width:33% !important;}
.hero-impact-line.l2{left:20% !important; top:72% !important; width:37% !important;}
.hero-impact-dot.d1{left:46% !important; top:26% !important;}
.hero-impact-dot.d2{left:33% !important; top:62% !important;}
.hero-impact-dot.d3{left:58% !important; top:17% !important;}

/* Diffuser pairing: make the right visual sit closer to the copy and remove the huge horizontal dead zone. */
.chapter-diffuser{
  grid-template-columns:minmax(0, 1.12fr) minmax(0, .88fr) !important;
  gap:clamp(26px, 2.8vw, 40px) !important;
  align-items:center !important;
}
.chapter-diffuser .chapter-visual{
  max-width:780px;
  justify-self:start;
}
.chapter-diffuser > .reveal.d2{
  max-width:540px;
  justify-self:start;
}
.chapter-diffuser p{
  max-width:31ch;
}

@media (max-width: 1180px){
  .hero-product-scene{
    width:min(74vw, 1220px) !important;
    right:-11vw !important;
  }
  .chapter-diffuser{
    grid-template-columns:minmax(0, 1.06fr) minmax(0, .94fr) !important;
  }
}
@media (max-width: 980px){
  .hero-product-scene{
    width:72vw !important;
    right:-16vw !important;
    top:88px !important;
  }
  .hero::after{
    left:12% !important;
    width:min(42vw, 380px) !important;
  }
}
@media (max-width: 780px){
  .hero-product-scene{
    width:100% !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
  }
  .hero::after{left:8% !important; top:auto !important; bottom:10% !important; width:64vw !important;}
  .chapter-diffuser{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .chapter-diffuser .chapter-visual,
  .chapter-diffuser > .reveal.d2{
    max-width:none;
    justify-self:stretch;
  }
  .chapter-diffuser p{max-width:40ch;}
}


/* =========================================================
   v1.9 DIFFUSER VISIBILITY + TIGHT LAYOUT FIX
   Ensures the diffuser image always shows and keeps the layout compact.
   ========================================================= */
.chapter-diffuser{
  grid-template-columns:minmax(0, 1fr) minmax(340px, 0.92fr) !important;
  gap:clamp(28px, 3vw, 42px) !important;
  align-items:center !important;
}
.chapter-diffuser > .reveal.d2{
  max-width:520px !important;
  justify-self:start !important;
}
.chapter-diffuser .chapter-visual,
.chapter-diffuser .chapter-visual.reveal{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:none !important;
  position:relative !important;
  justify-self:end !important;
  align-self:center !important;
  width:min(100%, 700px) !important;
  min-height:460px !important;
  aspect-ratio:1.22 / 1 !important;
  overflow:hidden !important;
}
.chapter-diffuser .chapter-visual img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  opacity:1 !important;
  visibility:visible !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:translate3d(var(--diff-x, 0px), var(--diff-y, 0px), 0) scale(.985) !important;
}
.chapter-diffuser .chapter-visual::after{ opacity:.35 !important; }
.chapter-diffuser p{max-width:32ch !important;}

@media (max-width: 980px){
  .chapter-diffuser{
    grid-template-columns:minmax(0, 1fr) minmax(300px, .95fr) !important;
    gap:28px !important;
  }
  .chapter-diffuser .chapter-visual,
  .chapter-diffuser .chapter-visual.reveal{
    width:min(100%, 620px) !important;
    min-height:400px !important;
  }
}
@media (max-width: 780px){
  .chapter-diffuser{
    grid-template-columns:1fr !important;
    gap:26px !important;
  }
  .chapter-diffuser .chapter-visual,
  .chapter-diffuser .chapter-visual.reveal{
    justify-self:stretch !important;
    width:100% !important;
    min-height:340px !important;
    aspect-ratio:1.18 / 1 !important;
  }
  .chapter-diffuser > .reveal.d2{
    max-width:none !important;
  }
}


/* =========================================================
   v2.0 STATS VIBE LAYER
   Scope: stats section only. No other sections changed.
   ========================================================= */
.stats-vibe{
  position:relative;
  overflow:hidden;
  gap:clamp(24px, 3vw, 48px) !important;
  align-items:stretch;
  isolation:isolate;
}
.stats-vibe::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 58%, rgba(201,134,63,.13), transparent 18%),
    radial-gradient(circle at 14% 26%, rgba(201,134,63,.06), transparent 12%),
    radial-gradient(circle at 86% 30%, rgba(201,134,63,.06), transparent 12%);
  pointer-events:none;
  z-index:0;
}
.stats-vibe::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:min(58vw, 760px);
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  border-radius:50%;
  border:1px solid rgba(201,134,63,.10);
  box-shadow:0 0 0 38px rgba(201,134,63,.02), 0 0 0 82px rgba(201,134,63,.015);
  opacity:.55;
  pointer-events:none;
  z-index:0;
  animation:statsOrbit 14s ease-in-out infinite alternate;
}
.stats-vibe .stat-card{
  position:relative;
  z-index:1;
  min-height:184px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:30px 26px 28px;
  border:1px solid rgba(201,134,63,.10);
  background:linear-gradient(180deg, rgba(17,12,9,.38), rgba(17,12,9,.14));
  backdrop-filter:blur(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease, background .35s ease;
  overflow:hidden;
}
.stats-vibe .stat-card::before{
  content:"";
  position:absolute;
  inset:auto -24% -70% auto;
  width:170px; height:170px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(201,134,63,.18), rgba(201,134,63,0) 68%);
  opacity:.42;
  pointer-events:none;
  animation:statsGlowFloat 8s ease-in-out infinite alternate;
}
.stats-vibe .stat-card::after{
  content:"";
  position:absolute;
  left:0; right:100%; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(242,188,110,.8), transparent);
  transition:right .7s cubic-bezier(.22,.61,.36,1);
}
.stats-vibe .stat-card:hover,
.stats-vibe .stat-card:focus-within{
  transform:translateY(-4px);
  border-color:rgba(201,134,63,.18);
  box-shadow:0 18px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
  background:linear-gradient(180deg, rgba(17,12,9,.46), rgba(17,12,9,.18));
}
.stats-vibe .stat-card:hover::after,
.stats-vibe .stat-card:focus-within::after{ right:0; }
.stats-vibe .stat-card--focus{
  border-color:rgba(201,134,63,.16);
  background:linear-gradient(180deg, rgba(26,18,13,.44), rgba(17,12,9,.16));
}
.stats-vibe .stat-card--focus .stat-num{ text-shadow:0 0 22px rgba(201,134,63,.08); }
.stats-vibe .stat-num{
  font-size:clamp(40px, 4.8vw, 64px);
  line-height:.95;
  letter-spacing:-.02em;
  margin-bottom:10px;
}
.stats-vibe .stat-label{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.stats-vibe .countup{display:inline-block;}
.stats-vibe .stat-card:nth-child(1){animation:statsFloatA 9s ease-in-out infinite alternate;}
.stats-vibe .stat-card:nth-child(2){animation:statsFloatB 10s ease-in-out infinite alternate;}
.stats-vibe .stat-card:nth-child(3){animation:statsFloatA 11s ease-in-out infinite alternate-reverse;}
.stats-vibe .stats-dot{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--amber-bright); box-shadow:0 0 16px rgba(201,134,63,.28);
  opacity:.7; pointer-events:none; z-index:0;
}
.stats-vibe .stats-dot.dot-1{left:18%; top:24%; animation:statsDot 5.5s ease-in-out infinite;}
.stats-vibe .stats-dot.dot-2{left:50%; top:16%; width:4px; height:4px; animation:statsDot 6.4s ease-in-out infinite -1s;}
.stats-vibe .stats-dot.dot-3{left:79%; top:68%; width:3px; height:3px; animation:statsDot 5.9s ease-in-out infinite -2s;}
.stats-vibe .stats-line{
  position:absolute; height:1px; pointer-events:none; z-index:0; opacity:.35;
  background:linear-gradient(90deg, transparent, rgba(201,134,63,.45), transparent);
}
.stats-vibe .stats-line.line-1{left:12%; top:38%; width:26%; transform:rotate(-8deg); animation:statsLineA 8s ease-in-out infinite alternate;}
.stats-vibe .stats-line.line-2{left:62%; top:58%; width:18%; transform:rotate(10deg); animation:statsLineB 9s ease-in-out infinite alternate;}
@keyframes statsOrbit{from{transform:translate(-50%,-50%) rotate(-2deg) scale(.985);}to{transform:translate(-50%,-50%) rotate(3deg) scale(1.02);}}
@keyframes statsGlowFloat{from{transform:translate3d(0,0,0);}to{transform:translate3d(-8px,-10px,0);}}
@keyframes statsFloatA{from{transform:translate3d(0,0,0);}to{transform:translate3d(0,-4px,0);}}
@keyframes statsFloatB{from{transform:translate3d(0,0,0);}to{transform:translate3d(0,4px,0);}}
@keyframes statsDot{0%,100%{transform:scale(.75);opacity:.35;}50%{transform:scale(1.3);opacity:1;}}
@keyframes statsLineA{from{transform:translate3d(-6px,0,0) rotate(-8deg);}to{transform:translate3d(12px,-4px,0) rotate(-6deg);}}
@keyframes statsLineB{from{transform:translate3d(8px,0,0) rotate(10deg);}to{transform:translate3d(-10px,3px,0) rotate(7deg);}}
@media (max-width:780px){
  .stats-vibe{gap:18px !important;}
  .stats-vibe .stat-card{min-height:154px; padding:24px 22px;}
  .stats-vibe::after{width:88vw;}
}
@media (prefers-reduced-motion:reduce){
  .stats-vibe::after,
  .stats-vibe .stat-card,
  .stats-vibe .stat-card::before,
  .stats-vibe .stats-dot,
  .stats-vibe .stats-line{animation:none !important;}
}