:root {
  --bg: #050407;
  --bg-2: #0b0910;
  --ink: #f8f1e4;
  --muted: rgba(248, 241, 228, .66);
  --muted-2: rgba(248, 241, 228, .42);
  --gold: #ddb76c;
  --gold-soft: #f1d9a0;
  --line: rgba(229, 194, 124, .16);
  --line-strong: rgba(229, 194, 124, .32);
  --glass: rgba(10, 8, 14, .58);
  --panel: rgba(16, 13, 22, .72);
  --shadow: 0 24px 80px rgba(0,0,0,.42);
  --radius: 30px;
  --max: 1240px;
  --header-h: 80px;
  --ease: cubic-bezier(.2,.75,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% -10%, rgba(105, 74, 148, .14), transparent 26%),
    radial-gradient(circle at 80% 10%, rgba(20, 89, 150, .12), transparent 24%),
    linear-gradient(180deg, #040306 0%, #08060b 48%, #050407 100%);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.has-intro { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 4px;
}
::selection { background: rgba(221, 183, 108, .28); color: #fff; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .16;
  background-image:
    radial-gradient(circle at 20% 20%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 10%, rgba(221,183,108,.9) 0 .8px, transparent 1.3px),
    radial-gradient(circle at 40% 80%, rgba(122,154,255,.85) 0 .8px, transparent 1.4px);
  background-size: 190px 190px, 270px 270px, 330px 330px;
}

h1,h2,h3,h4,.brand-type b,.hero-price strong,.card-price strong,blockquote {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}
p { line-height: 1.75; }
main { position: relative; z-index: 1; }

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: #020203;
  transition: opacity .6s var(--ease), visibility .6s;
}
.page-transition span {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(143,89,255,.22), transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(221,183,108,.18), transparent 42%);
  transform: scale(.5);
  opacity: 0;
  transition: transform .8s var(--ease), opacity .8s var(--ease);
}
.page-transition.active { opacity: 1; visibility: visible; }
.page-transition.active span { transform: scale(1.7); opacity: 1; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1200;
  min-height: var(--header-h);
  padding: 14px clamp(18px, 4vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  transition: transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease), opacity .8s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(5,4,8,.72);
  border-color: rgba(229,194,124,.12);
  backdrop-filter: blur(18px) saturate(125%);
}
.site-header.hidden { transform: translateY(-110%); }
.is-home.has-intro .site-header { opacity: 0; pointer-events: none; }
.is-home.intro-complete .site-header { opacity: 1; pointer-events: auto; }

.brand-lockup { display: inline-flex; align-items: center; gap: 11px; min-width: 180px; }
.brand-mark {
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(221,183,108,.22);
  box-shadow: inset 0 0 26px rgba(86,58,139,.15), 0 0 24px rgba(221,183,108,.07);
  background: #040306;
}
.brand-mark img { width: 58px; max-width: none; }
.brand-type { display: flex; flex-direction: column; line-height: 1; }
.brand-type b { font-size: 1.05rem; letter-spacing: .045em; }
.brand-type small { margin-top: 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .24em; font-size: .59rem; }

.main-nav { display: flex; align-items: center; gap: clamp(14px,2.2vw,32px); }
.main-nav > a {
  color: rgba(248,241,228,.72);
  font-size: .84rem;
  letter-spacing: .04em;
  position: relative;
  padding: 12px 0;
  transition: color .25s ease;
}
.main-nav > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: transform .35s var(--ease);
}
.main-nav > a:hover,.main-nav > a.active { color: #fff; }
.main-nav > a:hover::after,.main-nav > a.active::after { transform: scaleX(1); transform-origin: left; }
.nav-icon-link { display: flex; align-items: center; gap: 7px; }
.nav-icon-link i { font-style: normal; color: var(--gold-soft); font-size: .78rem; }
.cart-count {
  min-width: 19px;
  height: 19px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  font-size: .65rem;
  background: var(--gold);
  color: #17110a;
}
.nav-toggle { display: none; color: #fff; background: none; border: 0; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 1px; background: currentColor; margin: 5px 0; transition: transform .3s ease, opacity .3s ease; }
.nav-toggle em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mobile-nav-backdrop { display: none; }

.flash-message {
  position: fixed;
  z-index: 1500;
  right: 22px;
  top: 96px;
  max-width: min(390px, calc(100vw - 44px));
  padding: 15px 18px;
  border-radius: 15px;
  border: 1px solid var(--line-strong);
  background: rgba(11,9,15,.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(15px);
  animation: flashIn .5s var(--ease), flashOut .6s var(--ease) 4.4s forwards;
}
.flash-success { border-color: rgba(92,210,142,.45); }
.flash-error { border-color: rgba(240,99,99,.45); }
@keyframes flashIn { from { opacity:0; transform:translateY(-15px); } }
@keyframes flashOut { to { opacity:0; transform:translateY(-15px); visibility:hidden; } }

.eyebrow {
  margin: 0 0 18px;
  color: var(--gold-soft);
  text-transform: uppercase;
  letter-spacing: .23em;
  font-size: .69rem;
  font-weight: 600;
  line-height: 1.4;
}
.eyebrow::before { content:""; display:inline-block; width: 34px; height: 1px; margin-right: 12px; vertical-align: middle; background: linear-gradient(90deg,transparent,var(--gold)); }
.button {
  min-height: 50px;
  padding: 0 25px;
  border-radius: 999px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: transparent;
  font-size: .82rem;
  letter-spacing: .04em;
  font-weight: 650;
  transition: transform .28s var(--ease), box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary {
  color: #17120c;
  background: linear-gradient(110deg,#c99849,#f0d69d 48%,#cf9f54);
  box-shadow: 0 12px 38px rgba(210,165,87,.20), inset 0 1px rgba(255,255,255,.52);
}
.button-primary:hover { box-shadow: 0 18px 48px rgba(210,165,87,.28), inset 0 1px rgba(255,255,255,.62); }
.button-ghost { border-color: rgba(248,241,228,.18); background: rgba(255,255,255,.025); backdrop-filter: blur(10px); }
.button-ghost:hover { border-color: rgba(221,183,108,.42); background: rgba(221,183,108,.07); }
.button-small { min-height: 42px; padding: 0 19px; font-size: .75rem; }
.icon-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(248,241,228,.15);
  color: #fff;
  background: rgba(255,255,255,.03);
  font-size: 1.2rem;
  transition: all .25s ease;
}
.icon-button:hover { border-color: var(--gold); background: rgba(221,183,108,.10); transform: rotate(90deg); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-soft);
  margin-top: 22px;
  font-size: .83rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.text-link::after { content:"→"; transition: transform .25s ease; }
.text-link:hover::after { transform: translateX(5px); }

/* Cosmic intro */
.cosmic-intro {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  background: #010103;
  opacity: 1;
  visibility: visible;
  transition: opacity 1.45s var(--ease), visibility 1.45s;
}
.cosmic-intro.finished { opacity: 0; visibility: hidden; pointer-events: none; }
#introCanvas { position:absolute; inset:0; width:100%; height:100%; }
.intro-smoke {
  position:absolute;
  width: 54vw;
  height: 54vw;
  max-width: 780px;
  max-height: 780px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .18;
  mix-blend-mode: screen;
  animation: introSmoke 10s ease-in-out infinite alternate;
}
.smoke-a { left:-12%; top:4%; background: radial-gradient(circle,rgba(58,98,158,.38),rgba(36,40,80,.05) 58%,transparent 72%); }
.smoke-b { right:-10%; bottom:-10%; background: radial-gradient(circle,rgba(131,64,133,.31),rgba(96,44,54,.04) 58%,transparent 72%); animation-delay:-4s; }
.intro-nebula {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(70vw,850px);
  aspect-ratio:1;
  transform: translate(-50%,-50%) scale(.25);
  opacity:0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,247,224,.92) 0 1%,rgba(255,186,87,.42) 4%,transparent 10%),
    radial-gradient(ellipse at center,transparent 22%,rgba(62,126,255,.30) 26%,rgba(174,74,195,.27) 37%,rgba(237,121,68,.20) 45%,transparent 56%);
  filter: blur(4px) saturate(140%);
  animation: nebulaOpen 6.8s var(--ease) 1.15s forwards;
}
.intro-logo-stage { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.intro-line-logo {
  position:absolute;
  width:min(48vw,390px);
  max-height:68vh;
  color:#f0ce86;
  filter: drop-shadow(0 0 8px rgba(237,190,98,.55)) drop-shadow(0 0 30px rgba(120,86,255,.15));
  opacity:0;
  transform:scale(.92);
  animation: lineLogoIn 1.1s ease 1.55s forwards;
}
.intro-line-logo path,.intro-line-logo ellipse {
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: drawLogo 4.3s var(--ease) 1.65s forwards;
}
.intro-final-logo {
  position:absolute;
  width:min(68vw,560px);
  opacity:0;
  transform:scale(.94);
  filter: drop-shadow(0 0 38px rgba(70,96,255,.16));
  animation: finalLogoIn 2s var(--ease) 5.2s forwards;
}
.intro-caption {
  position:absolute;
  bottom:8vh;
  margin:0;
  color:rgba(248,241,228,.70);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.62rem;
  opacity:0;
  animation: captionIn 1.2s ease 5.9s forwards;
}
.intro-skip {
  position:absolute;
  right:28px;
  bottom:24px;
  z-index:2;
  border:1px solid rgba(248,241,228,.16);
  color:rgba(248,241,228,.72);
  background:rgba(5,4,8,.45);
  border-radius:99px;
  padding:11px 16px;
  letter-spacing:.08em;
  font-size:.72rem;
  opacity:0;
  animation:captionIn .6s ease 2s forwards;
}
@keyframes introSmoke { to { transform:translate3d(7vw,-4vh,0) scale(1.12); opacity:.27; } }
@keyframes nebulaOpen { 0%{opacity:0;transform:translate(-50%,-50%) scale(.22) rotate(-12deg)} 35%{opacity:.75} 100%{opacity:1;transform:translate(-50%,-50%) scale(1.14) rotate(8deg)} }
@keyframes lineLogoIn { to { opacity:1; transform:scale(1); } }
@keyframes drawLogo { to { stroke-dashoffset:0; } }
@keyframes finalLogoIn { 0%{opacity:0} 45%{opacity:.95} 100%{opacity:1;transform:scale(1)} }
@keyframes captionIn { to { opacity:1; } }

/* Main scent universe */
.scent-universe {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb,var(--scene-accent,#8d4f18) 19%, transparent), transparent 37%),
    linear-gradient(180deg,#050407 0%,#09070c 60%,#050407 100%);
}
.universe-canvas,.scene-color-wash,.scene-nebula,.scene-grain { position:absolute; inset:0; pointer-events:none; }
.universe-canvas { width:100%;height:100%;z-index:-1; }
.scene-color-wash {
  z-index:-3;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb,var(--scene-accent,#8d4f18) 34%,transparent),transparent 35%),
    radial-gradient(circle at 20% 40%,rgba(59,107,255,.13),transparent 27%),
    radial-gradient(circle at 83% 20%,rgba(145,73,191,.14),transparent 26%);
  transition: background 1.1s var(--ease);
}
.scene-nebula { z-index:-2; border-radius:50%; filter:blur(65px); opacity:.32; mix-blend-mode:screen; }
.nebula-one { width:42vw;height:42vw;left:-14vw;top:18vh;background:radial-gradient(circle,color-mix(in srgb,var(--scene-accent,#8d4f18) 60%,#ffad56),transparent 68%); animation:nebulaDrift 14s ease-in-out infinite alternate; }
.nebula-two { width:46vw;height:46vw;right:-16vw;bottom:-16vh;background:radial-gradient(circle,color-mix(in srgb,var(--scene-accent,#8d4f18) 45%,#665dff),transparent 70%); animation:nebulaDrift 18s ease-in-out infinite alternate-reverse; }
.scene-grain {
  z-index:2;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
@keyframes nebulaDrift { to { transform:translate3d(4vw,-3vh,0) scale(1.1); } }
.hero-content {
  width:min(calc(100% - 48px),1480px);
  min-height:100svh;
  margin:0 auto;
  padding:calc(var(--header-h) + 58px) 0 66px;
  display:grid;
  grid-template-columns:minmax(280px,.76fr) minmax(520px,1.48fr) minmax(190px,.48fr);
  gap:clamp(18px,3vw,52px);
  align-items:center;
  position:relative;
  z-index:3;
}
.hero-copy { max-width:430px; z-index:20; }
.hero-copy h1 { margin:0 0 24px; font-size:clamp(3.25rem,6vw,6.6rem); line-height:.90; letter-spacing:-.055em; }
.hero-copy h1 span { display:block; background:linear-gradient(115deg,#fff8e8 0%,#efd59f 50%,#c9a2ff 110%); color:transparent; -webkit-background-clip:text; background-clip:text; }
.hero-description { max-width:390px; color:var(--muted); font-size:1rem; margin:0 0 24px; }
.hero-price { display:flex;align-items:center;gap:12px;margin:0 0 26px; }
.hero-price s { color:var(--muted-2);font-size:.9rem; }
.hero-price strong { font-size:2rem;color:var(--gold-soft); }
.hero-price span { color:var(--muted);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; }
.hero-actions { display:flex;flex-wrap:wrap;gap:11px; }
.hero-actions form { margin:0; }

.orbit-theatre {
  position:relative;
  width:100%;
  height:min(78vh,830px);
  min-height:620px;
  transform-style:preserve-3d;
  perspective:1400px;
  isolation:isolate;
  display:grid;
  place-items:center;
}
.orbit-theatre::before {
  content:"";
  position:absolute;
  width:52%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,211,.17),color-mix(in srgb,var(--scene-accent,#8d4f18) 22%,transparent) 25%,rgba(83,80,190,.08) 49%,transparent 72%);
  filter:blur(14px);
  animation:heroAura 7s ease-in-out infinite;
}
@keyframes heroAura { 50%{transform:scale(1.09);opacity:.72} }
.orbit-light-ring {
  position:absolute;
  left:50%;top:50%;
  border:1px solid color-mix(in srgb,var(--active-accent,#d9aa58) 38%,transparent);
  border-radius:50%;
  transform:translate(-50%,-50%) rotateX(67deg);
  opacity:.38;
  box-shadow:0 0 30px color-mix(in srgb,var(--active-accent,#d9aa58) 10%,transparent);
  transition:border-color .9s ease;
}
.ring-a { width:82%;height:42%;animation:ringSpin 20s linear infinite; }
.ring-b { width:68%;height:34%;animation:ringSpin 14s linear infinite reverse; }
.ring-c { width:94%;height:50%;opacity:.17;animation:ringPulse 8s ease-in-out infinite; }
@keyframes ringSpin { to { transform:translate(-50%,-50%) rotateX(67deg) rotateZ(360deg); } }
@keyframes ringPulse { 50%{transform:translate(-50%,-50%) rotateX(67deg) scale(1.08);opacity:.3} }
.atmosphere-layer,.orbit-layer { position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none; }
.orbit-object {
  position:absolute;
  left:50%;top:50%;
  width:min(31vw,360px);
  height:auto;
  max-width:none;
  transform-origin:center;
  will-change:transform,filter,opacity;
  pointer-events:none;
  user-select:none;
}
.orbit-object::selection { background:transparent; }
.atmosphere-asset {
  position:absolute;
  left:50%;top:50%;
  width:min(58vw,700px);
  max-width:none;
  transform:translate(-50%,-50%);
  opacity:.28;
  pointer-events:none;
  will-change:transform,opacity,filter;
}
.amber-smoke,.red-smoke,.white-mist,.cream-mist { animation:atmosphereFloat 10s ease-in-out infinite alternate; }
.particle-sweep { width:min(76vw,900px);opacity:.30;mix-blend-mode:screen;animation:particleDrift 14s linear infinite; }
@keyframes atmosphereFloat { to { transform:translate(-48%,-53%) scale(1.08) rotate(3deg);opacity:.42; } }
@keyframes particleDrift { to { transform:translate(-52%,-48%) rotate(12deg) scale(1.05); } }
.hero-bottle {
  position:relative;
  z-index:1000;
  width:min(31vw,390px);
  max-height:78%;
  object-fit:contain;
  filter:drop-shadow(0 38px 52px rgba(0,0,0,.44)) drop-shadow(0 0 18px color-mix(in srgb,var(--active-accent,#d9aa58) 16%,transparent));
  transform:translate3d(var(--bottle-x,0),var(--bottle-y,0),0) rotateX(var(--bottle-rx,0deg)) rotateY(var(--bottle-ry,0deg));
  transition:opacity .55s var(--ease),filter .8s ease;
  will-change:transform;
}
.bottle-shadow {
  position:absolute;
  left:50%;bottom:10%;
  width:38%;height:6%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(0,0,0,.74),transparent 68%);
  filter:blur(13px);
  z-index:450;
}
.bottle-reflection {
  position:absolute;
  left:50%;bottom:4%;
  width:26%;height:20%;
  transform:translateX(-50%) scaleY(-1);
  opacity:.12;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center bottom;
  filter:blur(3px);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 70%);
}
.bottle-glint {
  position:absolute;
  z-index:1200;
  left:50%;top:22%;
  width:11%;height:52%;
  transform:translateX(-90%) rotate(7deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  filter:blur(3px);
  opacity:.38;
  animation:glint 6s ease-in-out infinite;
}
@keyframes glint { 0%,65%,100%{transform:translateX(-180%) rotate(7deg);opacity:0} 78%{opacity:.45} 92%{transform:translateX(70%) rotate(7deg);opacity:0} }
.note-whisper {
  position:absolute;
  z-index:1600;
  max-width:210px;
  padding:10px 14px;
  border:1px solid rgba(248,241,228,.12);
  border-radius:999px;
  background:rgba(5,4,8,.42);
  backdrop-filter:blur(14px);
  color:rgba(248,241,228,.72);
  font-size:.66rem;
  letter-spacing:.035em;
  opacity:.85;
  transition:opacity .45s ease,transform .45s var(--ease);
}
.note-whisper-a { left:7%;top:26%; }
.note-whisper-b { right:2%;top:34%; }
.note-whisper-c { left:15%;bottom:17%; }

.scent-navigation { align-self:center; display:flex;flex-direction:column;gap:8px;z-index:20; }
.scent-tab {
  width:100%;
  padding:14px 14px 14px 0;
  border:0;
  border-bottom:1px solid rgba(248,241,228,.08);
  color:rgba(248,241,228,.42);
  background:transparent;
  text-align:left;
  display:grid;
  grid-template-columns:34px 1fr;
  align-items:center;
  gap:10px;
  transition:color .3s ease,transform .3s var(--ease),border-color .3s ease;
}
.scent-tab span { font-size:.59rem;letter-spacing:.1em; }
.scent-tab b { font-family:Georgia,serif;font-weight:400;font-size:1.05rem; }
.scent-tab:hover,.scent-tab.is-active { color:#fff;border-color:rgba(221,183,108,.34);transform:translateX(-5px); }
.scent-tab.is-active span { color:var(--gold-soft); }
.replay-intro {
  position:absolute;
  right:0;
  bottom:34px;
  border:0;
  background:none;
  color:rgba(248,241,228,.48);
  font-size:.67rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.scroll-cue {
  position:absolute;
  left:50%;bottom:24px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:11px;
  color:rgba(248,241,228,.42);
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:.56rem;
}
.scroll-cue span { width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));animation:scrollCue 1.5s ease-in-out infinite; }
@keyframes scrollCue { 50%{transform:scaleX(1.6);transform-origin:right;opacity:.5} }

/* Story sections */
.fragrance-stories,.collection-section,.manifesto-section,.trust-section,.newsletter-section,.page-shell,.site-footer { position:relative;z-index:2; }
.fragrance-stories { padding:140px 0 60px; background:linear-gradient(180deg,#050407,#09070c 35%,#050407); }
.story-intro,.section-heading {
  width:min(calc(100% - 44px),900px);
  margin:0 auto 90px;
  text-align:center;
}
.story-intro h2,.section-heading h2,.manifesto-section blockquote,.newsletter-section h2,.page-hero h1 {
  margin:0;
  font-size:clamp(2.5rem,5.8vw,5.4rem);
  letter-spacing:-.045em;
  line-height:.98;
}
.story-intro > p:last-child,.section-heading > p:last-child { max-width:660px;margin:24px auto 0;color:var(--muted); }
.story-chapter {
  width:min(calc(100% - 44px),var(--max));
  min-height:78vh;
  margin:0 auto 90px;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,7vw,100px);
  align-items:center;
}
.story-chapter:nth-of-type(odd) .chapter-visual { order:2; }
.chapter-visual {
  min-height:620px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(248,241,228,.07);
  background:
    radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--scene) 42%,transparent),transparent 42%),
    linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  box-shadow:var(--shadow);
}
.chapter-visual::before { content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 42%); }
.chapter-glow { position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%);filter:blur(24px);animation:heroAura 7s ease-in-out infinite; }
.chapter-orbit { position:absolute;width:78%;height:42%;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:50%;transform:rotateX(68deg);opacity:.45;box-shadow:0 0 35px color-mix(in srgb,var(--accent) 12%,transparent); }
.chapter-visual img { position:relative;z-index:2;width:min(72%,440px);max-height:530px;object-fit:contain;filter:drop-shadow(0 35px 46px rgba(0,0,0,.43));transition:transform .8s var(--ease); }
.chapter-visual:hover img { transform:translateY(-9px) scale(1.02); }
.chapter-index { position:absolute;right:28px;top:24px;color:rgba(248,241,228,.22);font-family:Georgia,serif;font-size:4.4rem;line-height:1; }
.chapter-copy h2 { margin:0 0 24px;font-size:clamp(3rem,6vw,6.4rem);line-height:.9;letter-spacing:-.055em; }
.chapter-story { color:var(--muted);font-size:1.04rem;max-width:560px; }
.notes-lineup { margin-top:32px;border-top:1px solid rgba(248,241,228,.10); }
.notes-lineup div { display:grid;grid-template-columns:80px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid rgba(248,241,228,.08); }
.notes-lineup small { color:var(--gold-soft);text-transform:uppercase;letter-spacing:.17em;font-size:.58rem; }
.notes-lineup span { color:rgba(248,241,228,.78);font-size:.83rem;line-height:1.45; }

.collection-section { padding:110px 0 130px; }
.product-grid { width:min(calc(100% - 44px),var(--max));margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px; }
.product-card {
  min-height:590px;
  border-radius:var(--radius);
  border:1px solid rgba(248,241,228,.07);
  background:linear-gradient(160deg,rgba(255,255,255,.034),rgba(255,255,255,.008));
  overflow:hidden;
  box-shadow:0 22px 66px rgba(0,0,0,.25);
  transition:transform .5s var(--ease),border-color .4s ease,box-shadow .5s ease;
}
.product-card:hover { transform:translateY(-8px);border-color:color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:0 32px 82px rgba(0,0,0,.34); }
.product-card-media { height:410px;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--scene) 40%,transparent),transparent 53%); }
.card-cosmos { position:absolute;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%);filter:blur(18px);transition:transform .7s var(--ease); }
.product-card:hover .card-cosmos { transform:scale(1.16); }
.product-card-media img { position:relative;z-index:1;max-height:340px;width:auto;filter:drop-shadow(0 28px 42px rgba(0,0,0,.38));transition:transform .65s var(--ease); }
.product-card:hover .product-card-media img { transform:translateY(-7px) scale(1.035); }
.product-card-copy { padding:28px 30px 30px; }
.product-card-copy > p { margin:0;color:var(--muted);font-size:.78rem; }
.product-card-copy h3 { margin:9px 0 18px;font-size:2.25rem; }
.card-price { display:flex;align-items:center;gap:11px;margin-bottom:20px; }
.card-price s { color:var(--muted-2);font-size:.84rem; }
.card-price strong { color:var(--gold-soft);font-size:1.55rem; }
.card-price span { color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.6rem; }
.card-actions { display:flex;align-items:center;gap:11px; }

.manifesto-section {
  width:min(calc(100% - 44px),var(--max));
  margin:0 auto 130px;
  min-height:620px;
  padding:80px clamp(28px,8vw,110px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid rgba(248,241,228,.07);
  border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(255,255,255,.025),rgba(255,255,255,.006));
  overflow:hidden;
}
.manifesto-cosmos { position:absolute;inset:-20%;background:radial-gradient(circle at 50% 50%,rgba(76,103,255,.14),rgba(134,66,153,.10) 24%,rgba(221,183,108,.09) 38%,transparent 58%);filter:blur(20px);animation:manifestoSpin 22s linear infinite; }
@keyframes manifestoSpin { to { transform:rotate(360deg); } }
.manifesto-section > *:not(.manifesto-cosmos) { position:relative;z-index:1; }
.manifesto-section blockquote { max-width:980px;margin:0; }
.manifesto-section > p:last-child { max-width:620px;color:var(--muted);margin:28px auto 0; }

.trust-section { width:min(calc(100% - 44px),var(--max));margin:0 auto 130px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(248,241,228,.09);border-bottom:1px solid rgba(248,241,228,.09); }
.trust-section div { padding:34px 25px;min-height:180px;border-right:1px solid rgba(248,241,228,.08); }
.trust-section div:last-child { border-right:0; }
.trust-section span { color:var(--gold-soft);font-size:.58rem;letter-spacing:.18em; }
.trust-section strong { display:block;margin:28px 0 7px;font-family:Georgia,serif;font-weight:400;font-size:1.3rem; }
.trust-section p { margin:0;color:var(--muted);font-size:.78rem;line-height:1.55; }

.newsletter-section { width:min(calc(100% - 44px),var(--max));margin:0 auto 140px;display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:end;padding:55px;border-radius:var(--radius);border:1px solid rgba(248,241,228,.08);background:radial-gradient(circle at 20% 30%,rgba(221,183,108,.10),transparent 30%),linear-gradient(150deg,rgba(255,255,255,.028),rgba(255,255,255,.008)); }
.newsletter-section h2 { font-size:clamp(3rem,5vw,5rem); }
.newsletter-section > div > p:last-child { color:var(--muted); }
.newsletter-form { display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end; }
.newsletter-form label { display:block; }
.newsletter-form label span { display:flex;justify-content:space-between;margin:0 0 9px;color:var(--muted);font-size:.67rem;text-transform:uppercase;letter-spacing:.12em; }
.newsletter-form label em { color:var(--muted-2);font-style:normal;text-transform:none;letter-spacing:0; }
input,select,textarea {
  width:100%;
  min-height:50px;
  padding:0 15px;
  border:1px solid rgba(248,241,228,.12);
  border-radius:14px;
  color:#fff;
  background:rgba(255,255,255,.025);
  outline:none;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
textarea { min-height:130px;padding:14px;resize:vertical; }
input:focus,select:focus,textarea:focus { border-color:rgba(221,183,108,.52);background:rgba(221,183,108,.035);box-shadow:0 0 0 4px rgba(221,183,108,.06); }

.reveal-on-scroll { opacity:0;transform:translateY(38px);transition:opacity .85s var(--ease),transform .85s var(--ease); }
.reveal-on-scroll.visible { opacity:1;transform:translateY(0); }

/* Inner pages */
.inner-page { padding-top:var(--header-h); }
.page-shell { width:min(calc(100% - 44px),var(--max));margin:0 auto;padding:80px 0 130px; }
.page-hero { max-width:930px;margin:0 auto 70px;text-align:center; }
.page-hero h1 { margin-bottom:22px; }
.page-hero p { max-width:690px;margin:0 auto;color:var(--muted); }
.catalog-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px; }
.catalog-card { border:1px solid rgba(248,241,228,.07);border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.018); }
.catalog-card-media { min-height:430px;display:grid;place-items:center;position:relative;background:radial-gradient(circle,color-mix(in srgb,var(--scene) 38%,transparent),transparent 52%); }
.catalog-card-media img { max-height:360px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.4));transition:transform .6s var(--ease); }
.catalog-card:hover .catalog-card-media img { transform:translateY(-8px) scale(1.02); }
.catalog-card-copy { padding:28px; }
.catalog-card-copy h2 { font-size:2.3rem;margin:5px 0 12px; }
.catalog-card-copy p { color:var(--muted); }
.catalog-actions { display:flex;gap:10px;flex-wrap:wrap;align-items:center; }

/* Product detail */
.product-detail { padding-bottom:130px; }
.product-campaign {
  width:min(calc(100% - 44px),var(--max));
  min-height:73vh;
  margin:34px auto 26px;
  border-radius:var(--radius);
  overflow:hidden;
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  align-items:flex-end;
  box-shadow:var(--shadow);
}
.product-campaign::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 18%,rgba(3,2,5,.18) 50%,rgba(3,2,5,.88) 100%); }
.campaign-copy { position:relative;z-index:1;max-width:700px;padding:clamp(28px,6vw,72px); }
.campaign-copy h1 { margin:0 0 16px;font-size:clamp(4rem,8vw,8.5rem);line-height:.84;letter-spacing:-.06em; }
.campaign-copy p:last-child { color:rgba(255,255,255,.80);font-size:1rem; }
.product-purchase { width:min(calc(100% - 44px),var(--max));margin:0 auto 85px;display:grid;grid-template-columns:.95fr 1.05fr;gap:22px; }
.purchase-visual,.purchase-panel { border:1px solid rgba(248,241,228,.07);border-radius:var(--radius);background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,.008)); }
.purchase-visual { min-height:650px;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--scene) 46%,transparent),transparent 48%),rgba(255,255,255,.012); }
.purchase-visual::after { content:"";position:absolute;width:72%;height:36%;border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);border-radius:50%;transform:rotateX(68deg);opacity:.36; }
.purchase-visual img { position:relative;z-index:2;max-height:540px;filter:drop-shadow(0 34px 55px rgba(0,0,0,.46)); }
.purchase-panel { padding:clamp(28px,5vw,62px);display:flex;flex-direction:column;justify-content:center; }
.purchase-panel h2 { margin:0 0 18px;font-size:clamp(3rem,5vw,5.4rem);line-height:.9; }
.purchase-panel > p { color:var(--muted); }
.stock-line { color:var(--gold-soft)!important;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em; }
.quantity-row { display:flex;align-items:center;gap:12px;margin:22px 0; }
.quantity-control { display:inline-flex;align-items:center;border:1px solid rgba(248,241,228,.14);border-radius:999px;overflow:hidden; }
.quantity-control button { width:42px;height:42px;border:0;color:#fff;background:transparent; }
.quantity-control input { width:52px;min-height:42px;border:0;border-radius:0;text-align:center;padding:0;appearance:textfield; }
.purchase-buttons { display:flex;gap:10px;flex-wrap:wrap; }
.detail-section { width:min(calc(100% - 44px),var(--max));margin:0 auto 100px; }
.detail-heading { max-width:740px;margin-bottom:42px; }
.detail-heading h2 { font-size:clamp(2.6rem,5vw,5rem);margin:0;line-height:.95; }
.note-cards { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.note-card { padding:30px;border:1px solid rgba(248,241,228,.07);border-radius:24px;background:rgba(255,255,255,.018);min-height:240px; }
.note-card small { color:var(--gold-soft);text-transform:uppercase;letter-spacing:.18em;font-size:.58rem; }
.note-card h3 { font-size:1.55rem;line-height:1.15;margin:28px 0 14px; }
.note-card p { color:var(--muted);font-size:.84rem; }
.ingredient-cloud { display:flex;flex-wrap:wrap;gap:12px; }
.ingredient-cloud span { border:1px solid rgba(248,241,228,.12);border-radius:999px;padding:13px 18px;color:rgba(248,241,228,.75);background:rgba(255,255,255,.018); }
.related-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.related-card { border:1px solid rgba(248,241,228,.07);border-radius:24px;padding:18px;display:grid;grid-template-columns:120px 1fr;gap:15px;align-items:center;background:rgba(255,255,255,.015); }
.related-card img { height:160px;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.related-card h3 { margin:0 0 9px;font-size:1.3rem; }
.related-card p { margin:0;color:var(--muted);font-size:.76rem;line-height:1.5; }
.faq-list { border-top:1px solid rgba(248,241,228,.10); }
.faq-item { border-bottom:1px solid rgba(248,241,228,.10); }
.faq-item button { width:100%;padding:20px 0;border:0;background:none;color:#fff;text-align:left;display:flex;justify-content:space-between;gap:18px;font-family:Georgia,serif;font-size:1.15rem; }
.faq-item div { max-height:0;overflow:hidden;color:var(--muted);transition:max-height .4s ease; }
.faq-item.open div { max-height:180px; }
.faq-item div p { margin:0 0 20px; }

/* Commerce forms */
.commerce-layout { display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:start; }
.commerce-card { border:1px solid rgba(248,241,228,.07);border-radius:var(--radius);background:rgba(255,255,255,.016);padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.18); }
.commerce-card h2 { margin:0 0 22px;font-size:2rem; }
.cart-item { display:grid;grid-template-columns:110px 1fr auto auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(248,241,228,.08); }
.cart-item img { width:96px;height:120px;object-fit:contain; }
.cart-item h3 { margin:0 0 7px;font-size:1.25rem; }
.cart-item p { margin:0;color:var(--muted);font-size:.8rem; }
.cart-summary-row { display:flex;justify-content:space-between;gap:15px;padding:12px 0;color:var(--muted); }
.cart-summary-row.total { color:#fff;font-size:1.2rem;border-top:1px solid rgba(248,241,228,.11);margin-top:8px;padding-top:20px; }
.checkout-steps { display:flex;gap:8px;margin-bottom:28px; }
.checkout-steps span { flex:1;padding:11px;border-radius:999px;border:1px solid rgba(248,241,228,.08);color:var(--muted-2);font-size:.65rem;text-align:center;text-transform:uppercase;letter-spacing:.08em; }
.checkout-steps span.active { color:#fff;border-color:rgba(221,183,108,.42);background:rgba(221,183,108,.06); }
.form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.form-grid .full { grid-column:1/-1; }
.form-field label { display:block;margin:0 0 8px;color:var(--muted);font-size:.73rem; }
.payment-option { display:flex;gap:12px;align-items:flex-start;padding:18px;border:1px solid rgba(248,241,228,.10);border-radius:18px;margin-bottom:10px; }
.payment-option.disabled { opacity:.45; }
.payment-option strong { display:block;margin-bottom:4px; }
.payment-option span { color:var(--muted);font-size:.75rem; }
.empty-state { min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(248,241,228,.07);border-radius:var(--radius);background:rgba(255,255,255,.015);padding:30px; }
.empty-state h2 { font-size:2.4rem;margin:0 0 12px; }
.empty-state p { color:var(--muted); }

/* Auth and dashboards */
.auth-shell { width:min(calc(100% - 44px),560px);margin:60px auto 120px; }
.auth-card { border:1px solid rgba(248,241,228,.08);border-radius:var(--radius);background:radial-gradient(circle at 50% 0,rgba(221,183,108,.08),transparent 30%),rgba(255,255,255,.018);padding:clamp(28px,6vw,52px);box-shadow:var(--shadow); }
.auth-card h1 { font-size:3.2rem;margin:0 0 12px; }
.auth-card > p { color:var(--muted);margin-bottom:28px; }
.auth-card .form-field { margin-bottom:16px; }
.auth-links { display:flex;justify-content:space-between;gap:12px;margin-top:18px;color:var(--muted);font-size:.77rem; }
.dashboard-shell { width:min(calc(100% - 44px),1400px);margin:40px auto 130px;display:grid;grid-template-columns:240px 1fr;gap:24px; }
.dashboard-nav { position:sticky;top:105px;align-self:start;border:1px solid rgba(248,241,228,.07);border-radius:24px;padding:18px;background:rgba(255,255,255,.015); }
.dashboard-nav h3 { margin:8px 10px 18px;font-size:1.35rem; }
.dashboard-nav a { display:block;padding:11px 12px;border-radius:12px;color:var(--muted);font-size:.79rem; }
.dashboard-nav a:hover,.dashboard-nav a.active { color:#fff;background:rgba(221,183,108,.07); }
.dashboard-main { min-width:0; }
.dashboard-header { display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:28px; }
.dashboard-header h1 { margin:0;font-size:3.2rem; }
.dashboard-header p { color:var(--muted);margin:8px 0 0; }
.stat-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px; }
.stat-card { border:1px solid rgba(248,241,228,.07);border-radius:20px;padding:22px;background:rgba(255,255,255,.015); }
.stat-card span { color:var(--muted);font-size:.69rem;text-transform:uppercase;letter-spacing:.1em; }
.stat-card strong { display:block;margin-top:14px;font-family:Georgia,serif;font-size:2rem;font-weight:400;color:var(--gold-soft); }
.data-table-wrap { overflow:auto;border:1px solid rgba(248,241,228,.07);border-radius:22px;background:rgba(255,255,255,.012); }
.data-table { width:100%;border-collapse:collapse;min-width:760px; }
.data-table th,.data-table td { padding:14px 16px;border-bottom:1px solid rgba(248,241,228,.07);text-align:left;font-size:.76rem; }
.data-table th { color:var(--gold-soft);text-transform:uppercase;letter-spacing:.08em;font-size:.62rem; }
.data-table td { color:rgba(248,241,228,.76); }
.status-pill { display:inline-flex;padding:6px 10px;border-radius:999px;border:1px solid rgba(248,241,228,.10);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em; }
.dashboard-panel { margin-bottom:24px;border:1px solid rgba(248,241,228,.07);border-radius:22px;padding:24px;background:rgba(255,255,255,.012); }
.dashboard-panel h2 { margin:0 0 18px;font-size:1.7rem; }

/* Footer */
.site-footer { padding:0 22px 36px; }
.footer-shell { width:min(100%,var(--max));margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px;padding:50px;border-top:1px solid rgba(248,241,228,.10); }
.footer-brand img { width:150px;border-radius:20px;margin-bottom:18px; }
.footer-brand p { max-width:360px;color:var(--muted);font-size:.82rem; }
.footer-column h3 { margin:0 0 18px;font-size:1.1rem; }
.footer-column a,.footer-column p { display:block;margin:0 0 10px;color:var(--muted);font-size:.76rem;line-height:1.5; }
.footer-column a:hover { color:#fff; }
.footer-base { width:min(100%,var(--max));margin:0 auto;padding:18px 50px 0;border-top:1px solid rgba(248,241,228,.07);display:flex;justify-content:space-between;gap:20px;color:var(--muted-2);font-size:.66rem; }
.whatsapp-orb { position:fixed;right:22px;bottom:22px;z-index:1200;height:48px;padding:0 16px 0 10px;border-radius:999px;display:flex;align-items:center;gap:9px;background:rgba(7,9,10,.82);border:1px solid rgba(88,230,134,.26);box-shadow:0 14px 34px rgba(0,0,0,.3);backdrop-filter:blur(12px); }
.whatsapp-orb span { width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#35c96e;color:#07150d;font-weight:800;font-size:.65rem; }
.whatsapp-orb em { color:#fff;font-style:normal;font-size:.73rem; }

.modal-shell { position:fixed;inset:0;z-index:3000;background:rgba(1,1,3,.72);backdrop-filter:blur(12px);display:grid;place-items:center;padding:22px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s; }
.modal-shell.open { opacity:1;visibility:visible; }
.modal-card { width:min(100%,540px);position:relative;padding:38px;border:1px solid rgba(248,241,228,.10);border-radius:26px;background:#0b0910;box-shadow:var(--shadow); }
.modal-card h2 { margin:0 0 14px;font-size:2.6rem; }
.modal-card > p:last-of-type { color:var(--muted); }
.modal-close { position:absolute;right:16px;top:14px;border:0;background:none;color:var(--muted);font-size:1.8rem; }
.modal-actions { display:flex;gap:10px;flex-wrap:wrap;margin-top:24px; }

/* Responsive */
@media (max-width: 1180px) {
  .hero-content { grid-template-columns:.72fr 1.32fr; }
  .scent-navigation { position:absolute;right:0;top:50%;transform:translateY(-50%);width:180px; }
  .orbit-theatre { padding-right:130px; }
  .note-whisper-b { right:14%; }
  .newsletter-form { grid-template-columns:1fr 1fr; }
  .newsletter-form .button { grid-column:1/-1; }
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 920px) {
  :root { --header-h:72px; }
  .nav-toggle { display:block;position:relative;z-index:2; }
  .main-nav { position:fixed;inset:0;z-index:1;padding:120px 30px 50px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;background:radial-gradient(circle at 70% 25%,rgba(94,76,172,.20),transparent 30%),rgba(4,3,7,.96);transform:translateY(-104%);transition:transform .65s var(--ease); }
  .main-nav.open { transform:translateY(0); }
  .main-nav > a { font-family:Georgia,serif;font-size:clamp(1.8rem,8vw,3rem);padding:8px 0; }
  .nav-icon-link i,.cart-count { font-family:Inter,sans-serif;font-size:.65rem; }
  .nav-toggle.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity:0; }
  .nav-toggle.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
  .hero-content { grid-template-columns:1fr;align-content:center;text-align:center;padding-top:110px; }
  .hero-copy { max-width:650px;margin:0 auto;order:2; }
  .hero-description { margin-left:auto;margin-right:auto; }
  .hero-actions,.hero-price { justify-content:center; }
  .orbit-theatre { height:56vh;min-height:480px;padding:0;order:1; }
  .hero-bottle { width:min(38vw,300px); }
  .orbit-object { width:min(34vw,290px); }
  .scent-navigation { position:static;transform:none;order:3;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px; }
  .scent-tab { display:block;text-align:center;padding:12px 6px;border:1px solid rgba(248,241,228,.08);border-radius:999px; }
  .scent-tab span { display:none; }
  .scent-tab b { font-size:.78rem; }
  .scent-tab:hover,.scent-tab.is-active { transform:none;border-color:rgba(221,183,108,.42);background:rgba(221,183,108,.05); }
  .note-whisper { display:none; }
  .scroll-cue { display:none; }
  .replay-intro { bottom:12px; }
  .story-chapter,.product-purchase,.newsletter-section,.commerce-layout,.dashboard-shell { grid-template-columns:1fr; }
  .story-chapter:nth-of-type(odd) .chapter-visual { order:0; }
  .chapter-visual { min-height:520px; }
  .trust-section { grid-template-columns:repeat(2,1fr); }
  .trust-section div:nth-child(2) { border-right:0; }
  .trust-section div:nth-child(-n+2) { border-bottom:1px solid rgba(248,241,228,.08); }
  .footer-shell { grid-template-columns:1.2fr 1fr; }
  .dashboard-nav { position:static;display:flex;overflow:auto;gap:5px; }
  .dashboard-nav h3 { display:none; }
  .dashboard-nav a { white-space:nowrap; }
  .related-grid { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
  :root { --radius:22px; }
  .site-header { padding:12px 15px; }
  .brand-type b { font-size:.92rem; }
  .brand-mark { width:42px;height:42px; }
  .hero-content,.page-shell,.product-purchase,.detail-section,.product-campaign,.story-chapter,.product-grid,.manifesto-section,.trust-section,.newsletter-section { width:min(calc(100% - 24px),var(--max)); }
  .scent-universe { min-height:auto; }
  .hero-content { min-height:100svh;padding-bottom:50px; }
  .hero-copy h1 { font-size:clamp(3rem,16vw,5rem); }
  .orbit-theatre { min-height:410px;height:48vh; }
  .hero-bottle { width:min(50vw,260px); }
  .orbit-object { width:min(44vw,250px); }
  .atmosphere-asset { width:min(86vw,560px); }
  .scent-navigation { grid-template-columns:repeat(2,1fr); }
  .intro-final-logo { width:min(90vw,540px); }
  .intro-line-logo { width:min(68vw,360px); }
  .story-intro,.section-heading { margin-bottom:58px; }
  .fragrance-stories { padding-top:95px; }
  .story-chapter { gap:26px;margin-bottom:70px; }
  .chapter-visual { min-height:430px; }
  .chapter-visual img { max-height:360px; }
  .chapter-copy h2 { font-size:3.7rem; }
  .product-grid,.catalog-grid,.note-cards { grid-template-columns:1fr; }
  .product-card { min-height:auto; }
  .product-card-media { height:360px; }
  .manifesto-section { min-height:510px;padding:52px 24px; }
  .trust-section { grid-template-columns:1fr; }
  .trust-section div { border-right:0;border-bottom:1px solid rgba(248,241,228,.08); }
  .trust-section div:last-child { border-bottom:0; }
  .newsletter-section { padding:32px 22px;gap:30px; }
  .newsletter-form,.form-grid { grid-template-columns:1fr; }
  .newsletter-form .button,.form-grid .full { grid-column:auto; }
  .product-campaign { min-height:66vh;margin-top:20px; }
  .campaign-copy { padding:28px 22px; }
  .campaign-copy h1 { font-size:clamp(3.6rem,18vw,6rem); }
  .purchase-visual { min-height:470px; }
  .purchase-visual img { max-height:390px; }
  .purchase-panel { padding:28px 22px; }
  .related-card { grid-template-columns:100px 1fr; }
  .cart-item { grid-template-columns:90px 1fr; }
  .cart-item > :nth-child(n+3) { grid-column:2; }
  .footer-shell { grid-template-columns:1fr;padding:42px 10px; }
  .footer-base { padding:18px 10px 0;flex-direction:column; }
  .whatsapp-orb em { display:none; }
  .whatsapp-orb { padding:0 9px; }
  .stat-grid { grid-template-columns:1fr; }
  .dashboard-header { align-items:flex-start;flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important; }
  .cosmic-intro { display:none; }
  body.has-intro { overflow:auto; }
  .is-home.has-intro .site-header { opacity:1;pointer-events:auto; }
  .orbit-object { filter:none!important; }
}
/* The official logo artwork is supplied on black; screen blending removes the rectangular black plate during the cosmic reveal. */
.intro-final-logo { mix-blend-mode: screen; }

/* =========================================================
   Cinematic animation rebuild — reference-film intro + clean orbit stage
   ========================================================= */
.cosmic-intro {
  background:#010103;
  transition:opacity 1.25s cubic-bezier(.2,.75,.2,1),visibility 1.25s;
}
.cosmic-intro.is-exiting { opacity:0; }
.intro-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  background:#010103;
}
.intro-video.is-active { opacity:1; }
.intro-video-mobile { display:none; }
.intro-fade {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(1,1,3,.35),transparent 25%,transparent 75%,rgba(1,1,3,.35)),
    linear-gradient(180deg,rgba(1,1,3,.08),transparent 55%,rgba(1,1,3,.24));
}
.intro-play {
  position:absolute;
  left:50%;
  bottom:7vh;
  transform:translateX(-50%);
  z-index:3;
  min-height:48px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid rgba(238,202,131,.34);
  background:rgba(4,3,7,.72);
  color:#f6dfaf;
  letter-spacing:.12em;
  text-transform:uppercase;
  backdrop-filter:blur(14px);
}
.intro-skip { z-index:4; }

.scent-universe {
  background:
    radial-gradient(ellipse at 68% 42%,color-mix(in srgb,var(--scene-accent,#8d4f18) 17%,transparent),transparent 34%),
    radial-gradient(ellipse at 52% 52%,rgba(65,83,156,.10),transparent 47%),
    linear-gradient(180deg,#040306 0%,#09070d 58%,#050407 100%);
}
.universe-canvas { opacity:.76; }
.scene-color-wash {
  opacity:.70;
  background:
    radial-gradient(ellipse at 67% 43%,color-mix(in srgb,var(--scene-accent,#8d4f18) 25%,transparent),transparent 31%),
    radial-gradient(circle at 78% 24%,rgba(91,72,167,.08),transparent 24%);
}
.scene-nebula { opacity:.15;filter:blur(92px); }
.scene-grain { opacity:.025; }

.hero-content {
  width:min(calc(100% - 64px),1440px);
  grid-template-columns:minmax(320px,.72fr) minmax(640px,1.38fr);
  grid-template-areas:
    "copy theatre"
    "nav nav";
  grid-template-rows:1fr auto;
  column-gap:clamp(28px,4.5vw,76px);
  row-gap:16px;
  padding:calc(var(--header-h) + 46px) 0 42px;
}
.hero-copy { grid-area:copy;max-width:420px;align-self:center; }
.hero-copy h1 { font-size:clamp(3rem,5.2vw,5.8rem);line-height:.93; }
.orbit-theatre {
  grid-area:theatre;
  height:min(72vh,760px);
  min-height:590px;
  overflow:visible;
  perspective:1700px;
}
.orbit-theatre::before {
  width:44%;
  opacity:.52;
  filter:blur(26px);
  animation:heroAura 10s ease-in-out infinite;
}
.orbit-light-ring { opacity:.11;box-shadow:none;border-color:color-mix(in srgb,var(--active-accent,#d9aa58) 22%,transparent); }
.ring-a { width:78%;height:34%;animation-duration:34s; }
.ring-b { display:none; }
.ring-c { display:none; }
.hero-bottle { width:min(25vw,325px); }
.orbit-object { width:min(24vw,300px); }
.orbit-object.orbit-wide { width:min(27vw,330px); }
.orbit-object.orbit-small { width:min(19vw,235px); }
.atmosphere-asset { width:min(49vw,620px);opacity:.18;filter:saturate(.86) brightness(.86); }
.particle-sweep { width:min(58vw,720px);opacity:.16; }
.note-whisper { display:none; }
.scent-navigation {
  grid-area:nav;
  width:min(100%,780px);
  justify-self:center;
  align-self:end;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  z-index:20;
}
.scent-tab {
  padding:12px 14px;
  border:1px solid rgba(248,241,228,.075);
  border-radius:999px;
  text-align:center;
  grid-template-columns:auto 1fr;
  background:rgba(255,255,255,.012);
  backdrop-filter:blur(10px);
}
.scent-tab:hover,.scent-tab.is-active {
  transform:translateY(-2px);
  background:rgba(221,183,108,.055);
  border-color:rgba(221,183,108,.30);
}
.replay-intro { right:0;bottom:18px; }
.scroll-cue { bottom:16px; }

@media (max-width: 1080px) {
  .hero-content {
    grid-template-columns:1fr;
    grid-template-areas:"theatre" "copy" "nav";
    grid-template-rows:auto auto auto;
    text-align:center;
    padding-top:calc(var(--header-h) + 28px);
    width:min(calc(100% - 34px),900px);
  }
  .hero-copy { max-width:680px;margin:0 auto; }
  .hero-description { margin-left:auto;margin-right:auto; }
  .hero-actions,.hero-price { justify-content:center; }
  .orbit-theatre { height:54vh;min-height:470px; }
  .hero-bottle { width:min(34vw,285px); }
  .orbit-object { width:min(29vw,260px); }
  .orbit-object.orbit-wide { width:min(33vw,290px); }
  .orbit-object.orbit-small { width:min(23vw,205px); }
  .scent-navigation { position:static;transform:none;width:min(100%,680px);margin-top:4px; }
}

@media (max-width: 720px) {
  .intro-video-desktop { display:none; }
  .intro-video-mobile { display:block;object-fit:cover; }
  .intro-fade { background:linear-gradient(180deg,rgba(1,1,3,.05),transparent 68%,rgba(1,1,3,.28)); }
  .hero-content { width:min(calc(100% - 22px),680px);padding-bottom:46px; }
  .orbit-theatre { height:45vh;min-height:390px; }
  .hero-bottle { width:min(48vw,245px); }
  .orbit-object { width:min(39vw,215px); }
  .orbit-object.orbit-wide { width:min(43vw,235px); }
  .orbit-object.orbit-small { width:min(31vw,170px); }
  .atmosphere-asset { width:min(82vw,500px); }
  .scent-navigation { grid-template-columns:repeat(2,1fr);gap:7px; }
  .scent-tab { padding:11px 9px; }
  .scent-tab span { display:none; }
  .hero-copy h1 { font-size:clamp(2.8rem,15vw,4.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-intro { display:none!important; }
  .orbit-light-ring,.scene-nebula,.atmosphere-asset { animation:none!important; }
}

/* =========================================================
   Final custom HTML welcome animation integration
   Source: user-supplied aura-theory-final-animation.html
   ========================================================= */
.final-html-intro {
  background:#000;
  overflow:hidden;
  transition:opacity 1.3s cubic-bezier(.18,.75,.2,1), visibility 1.3s;
}
.final-html-intro.is-exiting {
  opacity:0;
}
.final-intro-frame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#000;
  pointer-events:none;
}
.intro-transition-veil {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 48%, rgba(237,190,105,.045), transparent 28%),
    linear-gradient(180deg, transparent 0 72%, rgba(0,0,0,.16) 100%);
  transition:opacity 1.1s ease;
}
.final-html-intro.is-exiting .intro-transition-veil { opacity:1; }
.final-html-intro .intro-skip {
  z-index:5;
  opacity:.52;
  border-color:rgba(239,203,142,.18);
  background:rgba(3,3,5,.34);
  backdrop-filter:blur(10px);
}
.final-html-intro .intro-skip:hover { opacity:1; }
@media (max-width:720px) {
  .final-html-intro .intro-skip { right:14px; bottom:14px; }
}

/* ======================================================================
   Aura Theory landing showcase V3 — scroll-led cinematic rebuild
   ====================================================================== */

/* Clearer header brand lockup */
.brand-lockup {
  gap: 14px;
  min-width: 236px;
}
.brand-mark {
  width: 62px;
  height: 62px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  flex: 0 0 62px;
}
.brand-mark img {
  width: 66px;
  height: 62px;
  max-width: none;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 10px rgba(98,124,255,.10));
}
.brand-type b {
  font-size: 1.16rem;
  letter-spacing: .035em;
  color: #fff7e7;
}
.brand-type small {
  margin-top: 7px;
  font-size: .61rem;
  color: rgba(244,224,184,.72);
}

/* Four-scene scroll canvas: one continuous hero, no selector/navigation bar. */
.scent-universe.scent-scroll-showcase {
  height: 430svh;
  min-height: 430svh;
  overflow: visible;
  background: #050407;
  isolation: isolate;
}
.hero-sticky-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 68% 48%, color-mix(in srgb,var(--scene-accent,#8d4f18) 16%,transparent), transparent 38%),
    linear-gradient(180deg,#050407 0%,#08060b 62%,#050407 100%);
}
.hero-sticky-stage .universe-canvas,
.hero-sticky-stage .scene-color-wash,
.hero-sticky-stage .intro-nebula-echo,
.hero-sticky-stage .scene-vignette,
.hero-sticky-stage .scene-grain {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero-sticky-stage .universe-canvas {
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: .70;
}
.hero-sticky-stage .scene-color-wash {
  z-index: 0;
  background:
    radial-gradient(ellipse at 68% 52%, color-mix(in srgb,var(--scene-accent,#8d4f18) 18%,transparent), transparent 34%),
    radial-gradient(circle at 71% 46%, rgba(83,112,255,.07), transparent 28%),
    radial-gradient(circle at 60% 38%, rgba(173,82,189,.06), transparent 30%);
  transition: background 1.1s var(--ease);
}
.intro-nebula-echo {
  z-index: 1;
  left: 37%;
  right: -9%;
  top: 2%;
  bottom: -8%;
  background: url('../images/effects/intro-nebula.webp') center / contain no-repeat;
  opacity: .21;
  mix-blend-mode: screen;
  filter: saturate(.96) contrast(1.06) brightness(.72) blur(.2px);
  transform: rotate(-7deg) scale(1.08);
  animation: landingNebulaBreathe 18s ease-in-out infinite alternate;
}
@keyframes landingNebulaBreathe {
  from { transform: rotate(-7deg) scale(1.05) translate3d(-.8%,.4%,0); opacity:.17; }
  to   { transform: rotate(-4deg) scale(1.12) translate3d(1.4%,-1%,0); opacity:.25; }
}
.scene-vignette {
  z-index: 4;
  background:
    radial-gradient(ellipse at 69% 48%, transparent 0 37%, rgba(5,4,7,.13) 58%, rgba(5,4,7,.72) 88%),
    linear-gradient(90deg, rgba(5,4,7,.22) 0%, transparent 48%, rgba(5,4,7,.05) 100%);
}
.hero-sticky-stage .scene-grain { z-index: 5; opacity:.026; }

.hero-sticky-stage .hero-content {
  width: min(calc(100% - 72px), 1540px);
  height: 100svh;
  min-height: 680px;
  margin: 0 auto;
  padding: calc(var(--header-h) + 34px) 0 42px;
  display: grid;
  grid-template-columns: minmax(360px,.72fr) minmax(620px,1.28fr);
  gap: clamp(38px,5vw,90px);
  align-items: center;
  position: relative;
  z-index: 10;
}
.hero-sticky-stage .hero-copy {
  max-width: 520px;
  z-index: 20;
  transform: translate3d(0,var(--copy-shift,0px),0);
  transition: transform .14s linear;
}
.hero-product-name {
  margin: 0 0 13px;
  color: var(--gold-soft);
  font-size: .80rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .23em;
}
.hero-sticky-stage .hero-copy h1 {
  margin: 0 0 22px;
  max-width: 510px;
  font-size: clamp(3.5rem,6.1vw,6.8rem);
  line-height: .89;
  letter-spacing: -.055em;
}
.hero-sticky-stage .hero-copy h1 span {
  background: linear-gradient(112deg,#fff8e8 2%,#efd9ae 48%,color-mix(in srgb,var(--active-accent,#d9aa58) 58%,#c5a9ff) 112%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sticky-stage .hero-description {
  max-width: 490px;
  margin: 0 0 22px;
  color: rgba(248,241,228,.69);
  font-size: 1rem;
  line-height: 1.72;
}
.hero-note-line {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  max-width: 530px;
  margin: 0 0 25px;
}
.hero-note-line > span {
  min-width:0;
  padding: 11px 0 0;
  border-top: 1px solid rgba(237,205,142,.16);
}
.hero-note-line small {
  display:block;
  margin-bottom:5px;
  color:rgba(237,205,142,.72);
  font-size:.61rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hero-note-line b {
  display:block;
  color:rgba(248,241,228,.64);
  font-size:.69rem;
  line-height:1.45;
  font-weight:500;
}
.hero-sticky-stage .hero-price { margin-bottom: 24px; }

/* Product theatre: no rings, no labels, no fake HUD. */
.hero-sticky-stage .orbit-theatre {
  position: relative;
  width: 100%;
  height: min(77vh, 790px);
  min-height: 590px;
  display: grid;
  place-items: center;
  perspective: 1600px;
  transform-style: preserve-3d;
  isolation: isolate;
  transform: translate3d(var(--stage-shift,0px),0,0);
  transition: transform .14s linear;
}
.hero-sticky-stage .orbit-theatre::before { display:none; }
.hero-sticky-stage .orbit-light-ring,
.hero-sticky-stage .note-whisper,
.hero-sticky-stage .bottle-reflection { display:none!important; }
.cosmic-stage-core {
  position:absolute;
  z-index:0;
  width:min(74%,720px);
  aspect-ratio:1;
  border-radius:50%;
  background:
    url('../images/effects/intro-nebula.webp') center/contain no-repeat;
  opacity:.42;
  mix-blend-mode:screen;
  filter:saturate(1.02) contrast(1.04) brightness(.80);
  transform:rotate(-10deg) scale(1.02);
  animation:stageCoreDrift 20s ease-in-out infinite alternate;
}
.cosmic-stage-core::after {
  content:"";
  position:absolute;
  inset:22%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,198,.16),rgba(106,93,211,.08) 38%,transparent 72%);
  filter:blur(18px);
}
@keyframes stageCoreDrift {
  to { transform:rotate(-4deg) scale(1.08) translate3d(1.5%,-1%,0); opacity:.49; }
}
.cosmic-stage-haze {
  position:absolute;
  z-index:1;
  width:73%;
  height:54%;
  border-radius:50%;
  background:
    radial-gradient(ellipse, color-mix(in srgb,var(--scene-accent,#8d4f18) 21%,transparent), transparent 58%),
    radial-gradient(ellipse at 64% 38%, rgba(92,108,255,.08), transparent 55%);
  filter:blur(30px);
  opacity:.75;
}
.hero-sticky-stage .atmosphere-layer,
.hero-sticky-stage .orbit-layer {
  position:absolute;
  inset:0;
  z-index:2;
  transform-style:preserve-3d;
  pointer-events:none;
}
.hero-sticky-stage .atmosphere-asset {
  width:min(46vw,570px);
  opacity:.15;
  filter:saturate(.9) brightness(.82);
}
.hero-sticky-stage .particle-sweep {
  width:min(54vw,660px);
  opacity:.14;
  mix-blend-mode:screen;
}
.hero-sticky-stage .orbit-object {
  width:min(18vw,235px);
  max-width:none;
  transform-origin:center;
  will-change:transform,filter,opacity;
}
.hero-sticky-stage .orbit-object.orbit-wide { width:min(21vw,275px); }
.hero-sticky-stage .orbit-object.orbit-small { width:min(14vw,180px); }
.bottle-stage {
  position:relative;
  z-index:1000;
  width:min(31vw,390px);
  height:78%;
  display:grid;
  place-items:center;
  transform-style:preserve-3d;
}
.hero-sticky-stage .hero-bottle {
  position:absolute;
  inset:50% auto auto 50%;
  width:100%;
  max-height:100%;
  object-fit:contain;
  transform:translate3d(calc(-50% + var(--bottle-x,0px)),calc(-50% + var(--bottle-y,0px)),0) rotateX(var(--bottle-rx,0deg)) rotateY(var(--bottle-ry,0deg)) scale(var(--bottle-scale,1));
  transform-origin:center;
  filter:drop-shadow(0 40px 54px rgba(0,0,0,.48)) drop-shadow(0 0 12px color-mix(in srgb,var(--active-accent,#d9aa58) 11%,transparent));
  opacity:0;
  z-index:1000;
  transition:opacity .78s var(--ease),filter .85s ease,transform .82s var(--ease);
  will-change:opacity,transform;
}
.hero-sticky-stage .hero-bottle.is-active { opacity:1; }
.hero-sticky-stage .hero-bottle.is-leaving { opacity:0; --bottle-scale:.985; filter:blur(2.5px) drop-shadow(0 36px 48px rgba(0,0,0,.38)); }
.hero-sticky-stage .hero-bottle.is-entering { opacity:1; --bottle-scale:1; }
.hero-sticky-stage .bottle-shadow {
  z-index:900;
  width:31%;
  height:5%;
  bottom:9%;
  opacity:.72;
  filter:blur(12px);
}
.hero-sticky-stage .bottle-glint {
  z-index:1150;
  width:18%;
  height:58%;
  opacity:.10;
  transform:translateX(-34%) rotate(7deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  filter:blur(7px);
  pointer-events:none;
}

.scroll-instruction {
  position:absolute;
  left:0;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(248,241,228,.43);
  transition:opacity .45s ease;
}
.scroll-instruction span {
  width:1px;
  height:34px;
  background:linear-gradient(180deg,var(--gold-soft),transparent);
  animation:scrollLine 1.8s ease-in-out infinite;
  transform-origin:top;
}
.scroll-instruction small { letter-spacing:.12em;text-transform:uppercase;font-size:.58rem; }
@keyframes scrollLine { 50%{transform:scaleY(.55);opacity:.45} }
.replay-intro {
  right:0;
  bottom:16px;
  opacity:.48;
}

/* Quote now begins immediately after the four scroll scenes. */
.scent-scroll-showcase + .manifesto-section {
  margin-top: 0;
}
.manifesto-section {
  min-height: 80svh;
}

/* Desktop hierarchy refinements */
@media (min-width: 1181px) {
  .site-header { padding-left: clamp(22px,3vw,50px); padding-right: clamp(22px,3vw,50px); }
  .hero-sticky-stage .hero-copy { padding-left: 6px; }
}

@media (max-width: 1180px) {
  .hero-sticky-stage .hero-content {
    width:min(calc(100% - 36px),1040px);
    grid-template-columns:minmax(310px,.82fr) minmax(470px,1.18fr);
    gap:30px;
  }
  .hero-sticky-stage .orbit-theatre { min-height:520px;height:65vh; }
  .hero-sticky-stage .hero-copy h1 { font-size:clamp(3.1rem,6.4vw,5.2rem); }
  .hero-note-line b { font-size:.65rem; }
}

@media (max-width: 900px) {
  .brand-lockup { min-width:auto; }
  .brand-mark { width:56px;height:56px;flex-basis:56px; }
  .brand-mark img { width:59px;height:56px; }
  .brand-type b { font-size:1.02rem; }
  .brand-type small { font-size:.55rem; }

  .scent-universe.scent-scroll-showcase { height:430svh;min-height:430svh; }
  .hero-sticky-stage { min-height:100svh; }
  .hero-sticky-stage .hero-content {
    width:min(calc(100% - 28px),760px);
    min-height:100svh;
    height:100svh;
    padding:calc(var(--header-h) + 14px) 0 28px;
    grid-template-columns:1fr;
    grid-template-rows:minmax(310px,47vh) auto;
    gap:8px;
    align-content:center;
  }
  .hero-sticky-stage .orbit-theatre {
    grid-row:1;
    min-height:310px;
    height:47vh;
    order:1;
  }
  .hero-sticky-stage .hero-copy {
    grid-row:2;
    max-width:640px;
    margin:0 auto;
    text-align:center;
    order:2;
  }
  .hero-product-name { margin-bottom:8px; }
  .hero-sticky-stage .hero-copy h1 {
    font-size:clamp(2.7rem,10vw,4.6rem);
    line-height:.92;
    margin-bottom:12px;
  }
  .hero-sticky-stage .hero-description { margin:0 auto 13px;line-height:1.55; }
  .hero-note-line { max-width:620px;margin:0 auto 15px;gap:8px;text-align:left; }
  .hero-note-line > span { padding-top:8px; }
  .hero-note-line b { font-size:.61rem;line-height:1.35; }
  .hero-sticky-stage .hero-price { justify-content:center;margin-bottom:14px; }
  .hero-sticky-stage .hero-actions { justify-content:center; }
  .bottle-stage { width:min(42vw,300px);height:87%; }
  .hero-sticky-stage .orbit-object { width:min(23vw,170px); }
  .hero-sticky-stage .orbit-object.orbit-wide { width:min(27vw,200px); }
  .hero-sticky-stage .orbit-object.orbit-small { width:min(18vw,130px); }
  .intro-nebula-echo { left:0;right:0;top:-4%;bottom:42%;opacity:.18; }
  .scroll-instruction { display:none; }
}

@media (max-width: 620px) {
  .site-header { min-height:70px;padding:8px 14px; }
  :root { --header-h:70px; }
  .brand-mark { width:48px;height:48px;flex-basis:48px; }
  .brand-mark img { width:51px;height:48px; }
  .brand-type b { font-size:.94rem; }
  .brand-type small { font-size:.49rem;letter-spacing:.19em;margin-top:5px; }

  .hero-sticky-stage .hero-content {
    width:min(calc(100% - 20px),560px);
    padding:calc(var(--header-h) + 6px) 0 18px;
    grid-template-rows:minmax(280px,43vh) auto;
  }
  .hero-sticky-stage .orbit-theatre { min-height:280px;height:43vh; }
  .hero-sticky-stage .hero-copy h1 { font-size:clamp(2.45rem,12.8vw,3.8rem);margin-bottom:10px; }
  .hero-sticky-stage .hero-description { font-size:.86rem;margin-bottom:10px; }
  .hero-note-line { gap:6px;margin-bottom:11px; }
  .hero-note-line small { font-size:.52rem; }
  .hero-note-line b { font-size:.56rem; }
  .hero-price strong { font-size:1.65rem; }
  .hero-actions .button { padding:11px 15px;font-size:.78rem; }
  .bottle-stage { width:min(50vw,250px);height:88%; }
  .hero-sticky-stage .orbit-object { width:min(26vw,135px); }
  .hero-sticky-stage .orbit-object.orbit-wide { width:min(31vw,160px); }
  .hero-sticky-stage .orbit-object.orbit-small { width:min(20vw,105px); }
  .hero-sticky-stage .atmosphere-asset { width:min(78vw,420px);opacity:.11; }
  .hero-sticky-stage .particle-sweep { width:min(82vw,450px);opacity:.11; }
  .replay-intro { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-nebula-echo,.cosmic-stage-core,.scroll-instruction span { animation:none!important; }
}

/* Orbit layer must remain in the hero stacking context so objects can genuinely
   pass behind and in front of the bottle. */
.hero-sticky-stage .atmosphere-layer { z-index: 2; transition: opacity .34s ease; }
.hero-sticky-stage .orbit-layer { z-index: auto; transition: opacity .30s ease; }
.hero-sticky-stage .orbit-layer.scene-changing,
.hero-sticky-stage .atmosphere-layer.scene-changing { opacity: 0; }
.scent-universe.scent-scroll-showcase { height:500svh; min-height:500svh; }
@media (max-width:900px) { .scent-universe.scent-scroll-showcase { height:500svh; min-height:500svh; } }
.brand-mark img { filter:brightness(1.12) contrast(1.04) saturate(1.06) drop-shadow(0 0 10px rgba(98,124,255,.10)); }

/* ======================================================================
   Aura Theory Cinematic 3D Landing Experience - production rebuild
   ====================================================================== */

.is-home .site-header {
  background: linear-gradient(180deg, rgba(4,3,7,.86), rgba(4,3,7,.38) 64%, transparent);
  border-bottom-color: rgba(224,186,113,.09);
  backdrop-filter: blur(15px) saturate(120%);
}
.is-home .site-header.hidden { transform: none !important; }
.brand-lockup { gap: 13px; min-width: 235px; }
.brand-mark { width: 58px; height: 58px; border: 0; overflow: visible; background: transparent; box-shadow: none; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 13px rgba(224,178,83,.14)); }
.brand-type b { font-size: 1.12rem; letter-spacing: .015em; color: #f7efe0; }
.brand-type small { margin-top: 2px; font-size: .58rem; letter-spacing: .26em; color: rgba(225,202,158,.72); }

.cinematic-home { overflow: clip; background: #050407; }
.cinematic-showcase {
  --scene-r: 187; --scene-g: 109; --scene-b: 38;
  --scene2-r: 117; --scene2-g: 97; --scene2-b: 215;
  position: relative;
  height: 540svh;
  background: #040306;
  isolation: isolate;
}
.cinema-sticky-stage {
  --exit-progress: 0;
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background: #040306;
  opacity: calc(1 - var(--exit-progress) * .92);
  transform: scale(calc(1 - var(--exit-progress) * .018));
  transform-origin: center bottom;
}
.cinema-space { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #040306; }
.cinema-space::before {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 70% 45%, rgba(var(--scene-r),var(--scene-g),var(--scene-b),.18), transparent 27%),
    radial-gradient(circle at 74% 40%, rgba(var(--scene2-r),var(--scene2-g),var(--scene2-b),.13), transparent 34%),
    linear-gradient(100deg, #030205 0%, #08060d 43%, #050308 100%);
  transition: background .15s linear;
}
.cinema-galaxy-band {
  position: absolute;
  left: 39%; top: 4%;
  width: 76%; height: 88%;
  transform: rotate(-10deg) scale(1.14);
  background-image: url('../images/effects/intro-nebula.webp');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .29;
  filter: saturate(125%) contrast(112%) brightness(.76) hue-rotate(calc((var(--showcase-progress,0) * 34deg)));
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse at center, #000 14%, rgba(0,0,0,.92) 40%, transparent 76%);
  animation: cinemaNebulaBreathe 18s ease-in-out infinite alternate;
}
.cinema-nebula { position:absolute; border-radius:50%; filter:blur(78px); mix-blend-mode:screen; opacity:.28; }
.cinema-nebula-a { width:44vw;height:44vw;right:3vw;top:11vh;background:radial-gradient(circle,rgba(var(--scene-r),var(--scene-g),var(--scene-b),.34),transparent 67%);animation:cinemaCloudA 14s ease-in-out infinite alternate; }
.cinema-nebula-b { width:36vw;height:36vw;right:22vw;bottom:-11vh;background:radial-gradient(circle,rgba(var(--scene2-r),var(--scene2-g),var(--scene2-b),.23),transparent 70%);animation:cinemaCloudB 17s ease-in-out infinite alternate; }
#cinematicDust { position:absolute;inset:0;width:100%;height:100%;opacity:.82; }
.cinema-vignette { position:absolute;inset:0;background:radial-gradient(ellipse at 66% 48%,transparent 12%,rgba(3,2,5,.11) 42%,rgba(3,2,5,.72) 100%); }
.cinema-grain { position:absolute;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");mix-blend-mode:soft-light; }
@keyframes cinemaNebulaBreathe { to { transform:rotate(-8deg) scale(1.20);opacity:.35; } }
@keyframes cinemaCloudA { to { transform:translate3d(-2.5vw,2.5vh,0) scale(1.07); } }
@keyframes cinemaCloudB { to { transform:translate3d(3vw,-3vh,0) scale(1.11); } }

.cinema-shell {
  width:min(calc(100% - 70px),1560px);
  height:100%;
  margin:0 auto;
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(350px,.82fr) minmax(570px,1.35fr);
  gap:clamp(35px,4vw,76px);
  align-items:center;
  padding:calc(var(--header-h) + 36px) 38px 44px;
}
.cinema-copy-stack { position:relative;height:min(69vh,690px);z-index:12; }
.cinema-copy-scene {
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(24px);
  will-change:opacity,transform;
  max-width:510px;
}
.cinema-copy-scene.is-initial { opacity:1;transform:none; }
.cinema-scent-heading { display:flex;align-items:center;gap:14px;margin:0 0 18px; }
.cinema-scent-heading span { width:31px;height:31px;border:1px solid rgba(232,196,130,.30);border-radius:50%;display:grid;place-items:center;color:#dfbc79;font-size:.62rem;letter-spacing:.07em; }
.cinema-scent-heading p { margin:0;color:#e3c685;text-transform:uppercase;letter-spacing:.24em;font-size:.72rem;font-weight:650; }
.cinema-copy-scene h1 {
  margin:0 0 23px;
  max-width:500px;
  font-family:Georgia,'Times New Roman',serif;
  color:#f5ebdc;
  font-size:clamp(4.2rem,6.4vw,7.6rem);
  line-height:.89;
  letter-spacing:-.055em;
  text-wrap:balance;
  text-shadow:0 16px 54px rgba(0,0,0,.36);
}
.cinema-description { max-width:475px;margin:0 0 16px;color:rgba(240,232,222,.68);font-size:clamp(.92rem,1.1vw,1.04rem);line-height:1.75; }
.cinema-notes { margin:0 0 23px;color:rgba(225,197,146,.82);font-size:.73rem;letter-spacing:.085em;line-height:1.6; }
.cinema-price { display:flex;align-items:baseline;gap:13px;margin:0 0 28px; }
.cinema-price s { color:rgba(232,226,219,.35);font-size:.84rem; }
.cinema-price strong { color:#e7c786;font-family:Georgia,'Times New Roman',serif;font-size:2.15rem;font-weight:500; }
.cinema-price span { color:rgba(235,225,215,.48);font-size:.64rem;text-transform:uppercase;letter-spacing:.16em; }
.cinema-actions { display:flex;align-items:center;gap:11px;flex-wrap:wrap; }
.cinema-actions form { margin:0; }

.cinema-visual {
  position:relative;
  width:100%;height:min(78vh,820px);min-height:620px;
  isolation:isolate;
  display:grid;place-items:center;
  perspective:1500px;
}
.cinema-stage-aura {
  position:absolute;left:50%;top:50%;width:min(72%,650px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,243,216,.14) 0 3%,rgba(var(--scene-r),var(--scene-g),var(--scene-b),.20) 17%,rgba(var(--scene2-r),var(--scene2-g),var(--scene2-b),.08) 43%,transparent 70%);
  filter:blur(8px);
  animation:cinemaAuraPulse 7.6s ease-in-out infinite alternate;
}
.cinema-stage-aura::after { content:"";position:absolute;inset:11%;border-radius:50%;border:1px solid rgba(227,195,132,.055);box-shadow:0 0 90px rgba(var(--scene-r),var(--scene-g),var(--scene-b),.08) inset; }
@keyframes cinemaAuraPulse { to { transform:translate(-50%,-50%) scale(1.045);filter:blur(13px); } }
.cinema-bottle-canvas { position:absolute;inset:0;width:100%;height:100%;z-index:40;display:block;filter:drop-shadow(0 26px 42px rgba(0,0,0,.28)); }
.cinema-bottle-shadow { position:absolute;z-index:35;left:50%;bottom:13%;width:31%;height:8%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.50),transparent 72%);filter:blur(12px); }
.cinema-fallback-bottle { position:absolute;inset:0;display:none;place-items:center;z-index:40; }
.cinema-fallback-bottle img { max-height:65%;max-width:45%;object-fit:contain;filter:drop-shadow(0 28px 34px rgba(0,0,0,.45)); }
.no-webgl .cinema-fallback-bottle { display:grid; }
.no-webgl .cinema-bottle-canvas { display:none; }
.cinema-object-layer { position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d; }
.cinema-rear { z-index:26; }
.cinema-front { z-index:52; }
.cinema-ingredient { position:absolute;left:50%;top:50%;width:clamp(140px,24vw,330px);height:auto;max-height:48%;object-fit:contain;transform-origin:center;will-change:transform,filter,opacity;pointer-events:none;user-select:none; }
.cinema-atmospheres { position:absolute;inset:-4%;z-index:18;pointer-events:none; }
.cinema-atmosphere { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;mix-blend-mode:screen;filter:blur(7px) saturate(92%);will-change:transform,opacity; }
.atmosphere-high-stakes { object-position:54% 54%; }
.atmosphere-iykyk { filter:blur(9px) saturate(68%) brightness(.88); }
.atmosphere-confessions { filter:blur(8px) saturate(105%) brightness(.70); }
.atmosphere-she-knows { filter:blur(10px) saturate(70%) brightness(.90); }
.cinema-lens { position:absolute;z-index:60;right:11%;top:18%;width:90px;height:1px;background:linear-gradient(90deg,transparent,rgba(247,218,157,.35),transparent);filter:blur(.4px);opacity:.38;transform:rotate(-12deg); }

.cinema-progress { position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:rgba(239,224,195,.55);font-size:.62rem;letter-spacing:.09em; }
.cinema-progress i { position:relative;display:block;width:1px;height:114px;background:rgba(232,201,143,.13);overflow:hidden; }
.cinema-progress i b { position:absolute;inset:0;background:linear-gradient(#d2a652,#f1d797);transform-origin:top;transform:scaleY(.25);box-shadow:0 0 13px rgba(230,194,121,.48); }
.cinema-progress small { font:inherit;color:rgba(239,224,195,.30); }
.cinema-scroll-cue { position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;color:rgba(238,229,215,.34);font-size:.58rem;text-transform:uppercase;letter-spacing:.18em; }
.cinema-scroll-cue span { width:1px;height:26px;background:linear-gradient(transparent,#d7b46f);position:relative;overflow:hidden; }
.cinema-scroll-cue span::after { content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;background:#fff0c8;animation:cinemaScroll 2s ease-in-out infinite; }
.cinema-scroll-cue em { font-style:normal; }
@keyframes cinemaScroll { 55%,100%{top:100%;} }
.cinema-replay { right:18px !important;bottom:18px !important; }

.cinematic-manifesto { min-height:88svh;padding-top:15vh;padding-bottom:15vh;position:relative;overflow:hidden; }
.cinematic-manifesto blockquote { max-width:1050px;font-size:clamp(3rem,6.8vw,7.5rem);line-height:.98;letter-spacing:-.05em; }
.cinematic-manifesto::before { content:"";position:absolute;left:50%;top:-18%;width:72vw;height:72vw;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(99,84,198,.10),rgba(193,122,63,.055) 32%,transparent 66%);filter:blur(38px);pointer-events:none; }
.cinematic-collection { padding-top:120px; }

/* Intro dissolves into the same cosmic field instead of an abrupt cut. */
.final-html-intro.is-exiting { opacity:0;filter:blur(2px) saturate(115%);transform:scale(1.018);transition:opacity 1.3s cubic-bezier(.2,.8,.2,1),filter 1.3s ease,transform 1.3s ease; }
.intro-transition-veil { background:radial-gradient(circle at 50% 50%,rgba(65,89,193,.08),rgba(3,2,5,.15) 55%,rgba(3,2,5,.68)); }

@media (max-width: 1120px) {
  .cinema-shell { grid-template-columns:minmax(310px,.82fr) minmax(480px,1.2fr);padding-left:26px;padding-right:30px;gap:28px; }
  .cinema-copy-scene h1 { font-size:clamp(3.8rem,6.6vw,6.4rem); }
  .cinema-ingredient { width:clamp(135px,25vw,285px); }
}
@media (max-width: 820px) {
  .cinematic-showcase { height:500svh; }
  .cinema-sticky-stage { min-height:620px; }
  .cinema-shell { width:100%;padding:calc(var(--header-h) + 18px) 18px 22px;display:block; }
  .cinema-visual { position:absolute;left:0;right:0;top:calc(var(--header-h) + 12px);height:57svh;min-height:410px; }
  .cinema-copy-stack { position:absolute;left:22px;right:40px;bottom:34px;height:40svh;min-height:285px;z-index:70;pointer-events:none; }
  .cinema-copy-scene { justify-content:flex-end;max-width:560px;padding-bottom:12px; }
  .cinema-copy-scene h1 { font-size:clamp(3rem,11vw,5rem);max-width:430px;margin-bottom:12px; }
  .cinema-description { font-size:.85rem;line-height:1.52;max-width:480px;margin-bottom:9px; }
  .cinema-notes { font-size:.62rem;margin-bottom:12px; }
  .cinema-price { margin-bottom:15px; }
  .cinema-price strong { font-size:1.65rem; }
  .cinema-actions .button { min-height:43px;padding:0 16px;font-size:.72rem; }
  .cinema-ingredient { width:clamp(120px,40vw,225px);max-height:34%; }
  .cinema-stage-aura { width:74%; }
  .cinema-galaxy-band { left:4%;top:0;width:112%;height:65%;opacity:.24; }
  .cinema-nebula-a { width:76vw;height:76vw;right:-10vw;top:9vh; }
  .cinema-nebula-b { width:67vw;height:67vw;right:22vw;bottom:24vh; }
  .cinema-progress { right:12px;top:45%; }
  .cinema-scroll-cue { display:none; }
  .cinema-replay { bottom:auto !important;top:calc(var(--header-h) + 10px);font-size:.58rem;opacity:.52; }
  .cinematic-manifesto { min-height:75svh;padding-left:22px;padding-right:22px; }
  .cinematic-manifesto blockquote { font-size:clamp(2.8rem,12vw,5.5rem); }
}
@media (max-width: 560px) {
  .brand-lockup { min-width:0;gap:8px; }
  .brand-mark { width:46px;height:46px; }
  .brand-type b { font-size:.94rem; }
  .brand-type small { font-size:.48rem; }
  .cinema-visual { height:55svh;top:calc(var(--header-h) + 4px); }
  .cinema-copy-stack { left:18px;right:34px;bottom:18px;height:43svh; }
  .cinema-scent-heading { margin-bottom:9px; }
  .cinema-scent-heading span { width:25px;height:25px;font-size:.54rem; }
  .cinema-scent-heading p { font-size:.58rem; }
  .cinema-copy-scene h1 { font-size:clamp(2.65rem,13vw,4.25rem);line-height:.91;margin-bottom:10px; }
  .cinema-description { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
  .cinema-notes { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .cinema-price { gap:9px; }
  .cinema-actions { gap:7px; }
  .cinema-actions .button { min-height:40px;padding:0 13px;font-size:.66rem; }
  .cinema-ingredient { width:clamp(105px,43vw,195px); }
  .cinema-progress i { height:86px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-galaxy-band,.cinema-nebula,.cinema-stage-aura,.cinema-scroll-cue span::after { animation:none !important; }
  .cinematic-showcase { height:420svh; }
}
.cinema-transition-arc {
  position:absolute;z-index:22;left:50%;top:50%;width:69%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(calc(-26deg + var(--showcase-progress,0) * 210deg));border-radius:50%;
  opacity:calc(var(--transition-energy,0) * .62);
  background:conic-gradient(from 190deg,transparent 0 53%,rgba(240,206,139,.07) 59%,rgba(var(--scene-r),var(--scene-g),var(--scene-b),.44) 63%,rgba(var(--scene2-r),var(--scene2-g),var(--scene2-b),.28) 68%,transparent 75% 100%);
  mask:radial-gradient(circle,transparent 0 58%,#000 59% 61%,transparent 62%);
  filter:blur(.2px) drop-shadow(0 0 22px rgba(var(--scene-r),var(--scene-g),var(--scene-b),.18));
  will-change:transform,opacity;
}
.cinema-transition-sweep {
  position:absolute;z-index:45;left:50%;top:50%;width:42%;height:76%;transform:translate(-50%,-50%) rotate(calc(-16deg + var(--showcase-progress,0) * 36deg)) scaleX(calc(.78 + var(--transition-energy,0) * .33));
  opacity:calc(var(--transition-energy,0) * .52);pointer-events:none;
  background:linear-gradient(103deg,transparent 27%,rgba(255,235,190,.04) 42%,rgba(255,231,183,.30) 49.5%,rgba(var(--scene-r),var(--scene-g),var(--scene-b),.12) 53%,transparent 67%);
  filter:blur(8px);mix-blend-mode:screen;
}
@media(max-width:820px){.cinema-transition-arc{width:82%}.cinema-transition-sweep{width:56%;height:64%}}

/* ========================================================================
   Aura Theory — final faux-3D cinematic landing page
   Direction locked by user on 2026-08-11:
   camera-push + luxury dissolve intro, depth exchange, controlled levitation,
   cinematic shadow rig, front/behind passing, cosmic light arcs, anchored copy,
   chapter settle points, She Knows depth swap, quote through haze.
   ======================================================================== */

.faux3d-home { overflow:clip; background:#050407; }
.faux3d-showcase {
  position:relative;
  height:520svh;
  min-height:520svh;
  background:#050407;
  --world-1:rgb(123,77,37);
  --world-2:rgb(32,43,73);
  --world-glow:rgb(208,164,92);
  --arc-energy:0;
  --arc-turn:-28deg;
  --exit-energy:0;
}
.faux3d-sticky-stage {
  position:sticky;
  top:0;
  min-height:100svh;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#050407;
  transition:opacity 1.35s cubic-bezier(.22,.7,.2,1),transform 1.65s cubic-bezier(.22,.7,.2,1);
}
body.has-intro .faux3d-sticky-stage { opacity:.12; transform:scale(.935); }
body.intro-complete .faux3d-sticky-stage { opacity:1; transform:scale(1); }

/* Intro handoff: restrained dissolve plus a cosmic camera push into the same visual axis. */
.cosmic-intro .final-intro-frame {
  transform:scale(1);
  transform-origin:50% 50%;
  transition:transform 1.55s cubic-bezier(.19,.8,.18,1),opacity 1.25s ease,filter 1.25s ease;
}
.cosmic-intro.is-exiting .final-intro-frame {
  transform:scale(1.105);
  opacity:0;
  filter:blur(1.2px) saturate(1.06) brightness(.92);
}
.cosmic-intro .intro-transition-veil {
  background:radial-gradient(circle at 63% 50%,rgba(18,14,28,.04),rgba(5,4,7,.12) 40%,rgba(5,4,7,.92) 100%);
  opacity:0;
  transition:opacity 1.3s ease;
}
.cosmic-intro.is-exiting .intro-transition-veil { opacity:1; }

.faux3d-space,
.faux3d-space > * { position:absolute; inset:0; pointer-events:none; }
.faux3d-space { z-index:0; overflow:hidden; }
.faux3d-nebula {
  inset:-8%!important;
  background:
    linear-gradient(rgba(5,4,7,.18),rgba(5,4,7,.44)),
    url('../images/effects/intro-nebula.webp') center/cover no-repeat;
  opacity:calc(.48 - var(--exit-energy) * .22);
  filter:saturate(112%) contrast(106%) brightness(.60);
  transform:scale(calc(1.045 + var(--exit-energy) * .08));
  transition:opacity .3s linear;
}
.faux3d-color-world {
  background:
    radial-gradient(ellipse 58% 48% at 73% 49%,color-mix(in srgb,var(--world-1) 30%,transparent),transparent 69%),
    radial-gradient(ellipse 54% 54% at 64% 42%,color-mix(in srgb,var(--world-2) 28%,transparent),transparent 72%),
    radial-gradient(ellipse 72% 66% at 42% 50%,rgba(11,9,17,.18),rgba(5,4,7,.48) 73%);
  opacity:calc(1 - var(--exit-energy) * .56);
  transition:background .18s linear;
}
.faux3d-cosmic-depth {
  background:
    radial-gradient(circle at 76% 31%,rgba(238,219,171,.12) 0 1px,transparent 1.4px),
    radial-gradient(circle at 65% 66%,rgba(143,144,220,.11) 0 1px,transparent 1.4px),
    radial-gradient(circle at 88% 58%,rgba(238,219,171,.08) 0 .8px,transparent 1.2px),
    radial-gradient(circle at 58% 21%,rgba(103,126,202,.09) 0 .7px,transparent 1.1px);
  background-size:280px 280px,360px 360px,440px 440px,520px 520px;
  opacity:.44;
  transform:translate3d(calc(var(--exit-energy) * -2%),0,0);
}
.faux3d-vignette {
  background:radial-gradient(ellipse 70% 75% at 70% 49%,transparent 23%,rgba(5,4,7,.12) 57%,rgba(5,4,7,.75) 100%);
  z-index:8;
}
.faux3d-grain {
  opacity:.025;
  z-index:9;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.faux3d-transition-haze {
  z-index:5;
  inset:8% 12%!important;
  border-radius:50%;
  opacity:calc(var(--arc-energy) * .72 + var(--exit-energy) * .25);
  filter:blur(45px);
  background:
    radial-gradient(circle at 70% 50%,color-mix(in srgb,var(--world-1) 36%,transparent),transparent 43%),
    radial-gradient(circle at 58% 47%,color-mix(in srgb,var(--world-2) 34%,transparent),transparent 64%);
  transform:scale(calc(.84 + var(--arc-energy) * .34 + var(--exit-energy) * .14));
}

/* The only animated cosmic accent chosen: faint arcs that appear during transitions. */
.faux3d-light-arcs { z-index:6; opacity:calc(var(--arc-energy) * .72); transform:rotate(var(--arc-turn)); }
.faux3d-light-arcs i {
  position:absolute;
  left:61%; top:50%;
  width:min(54vw,760px); aspect-ratio:1.62;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid transparent;
  border-top-color:color-mix(in srgb,var(--world-glow) 48%,transparent);
  border-right-color:color-mix(in srgb,var(--world-2) 22%,transparent);
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--world-glow) 12%,transparent));
}
.faux3d-light-arcs i:nth-child(2) { width:min(42vw,610px); transform:translate(-50%,-50%) rotate(18deg); opacity:.72; }
.faux3d-light-arcs i:nth-child(3) { width:min(67vw,930px); transform:translate(-50%,-50%) rotate(-21deg); opacity:.34; }

.faux3d-shell {
  position:relative;
  z-index:12;
  width:min(calc(100% - 72px),1600px);
  height:100svh;
  min-height:680px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(330px,.74fr) minmax(560px,1.26fr);
  align-items:center;
  gap:clamp(20px,4vw,78px);
  padding-top:clamp(82px,9vh,116px);
  padding-bottom:clamp(42px,6vh,74px);
}
.faux3d-copy-anchor {
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  z-index:120;
}
.faux3d-copy-scene {
  position:absolute;
  left:0; right:0;
  max-width:510px;
  opacity:0;
  transform:translate3d(0,10px,0);
  pointer-events:none;
  will-change:opacity,transform;
}
.faux3d-copy-scene.is-active { pointer-events:auto; }
.faux3d-product-name {
  margin:0 0 18px;
  color:var(--gold,#d6b36c);
  font-size:.74rem;
  line-height:1;
  letter-spacing:.29em;
  text-transform:uppercase;
  font-weight:650;
}
.faux3d-copy-scene h1 {
  margin:0 0 24px;
  max-width:500px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(4rem,5.25vw,6.5rem);
  line-height:.88;
  letter-spacing:-.055em;
  color:#f2eadc;
  text-wrap:balance;
}
.faux3d-description {
  max-width:485px;
  margin:0 0 18px;
  color:rgba(239,233,224,.69);
  font-size:clamp(.96rem,1.05vw,1.08rem);
  line-height:1.72;
}
.faux3d-notes {
  max-width:485px;
  margin:0 0 25px;
  color:rgba(230,205,151,.82);
  font-size:.72rem;
  line-height:1.55;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.faux3d-price { display:flex;align-items:baseline;gap:13px;margin-bottom:28px; }
.faux3d-price s { color:rgba(239,233,224,.38);font-size:.88rem; }
.faux3d-price strong { color:#edd394;font-family:var(--serif);font-size:2.35rem;font-weight:400;letter-spacing:.02em; }
.faux3d-price span { color:rgba(239,233,224,.50);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase; }
.faux3d-actions { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.faux3d-actions form { margin:0; }

.faux3d-visual {
  position:relative;
  height:min(76vh,760px);
  min-height:560px;
  isolation:isolate;
  perspective:1100px;
}
.faux3d-rear-bloom {
  position:absolute;
  z-index:8;
  left:50%; top:50%;
  width:min(52vw,720px); aspect-ratio:1;
  transform:translate(-50%,-48%);
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--world-glow) 12%,transparent),color-mix(in srgb,var(--world-2) 8%,transparent) 34%,transparent 70%);
  filter:blur(18px);
  opacity:calc(.64 - var(--exit-energy) * .38);
}
.faux3d-rear-objects,
.faux3d-front-objects { position:absolute;inset:0;pointer-events:none; }
.faux3d-rear-objects { z-index:20; }
.faux3d-front-objects { z-index:70; }
.faux3d-object {
  position:absolute;
  width:clamp(112px,13vw,228px);
  height:auto;
  object-fit:contain;
  transform-origin:50% 50%;
  will-change:left,top,transform,opacity,filter;
  pointer-events:none;
}
.faux3d-atmosphere {
  position:absolute;
  z-index:18;
  left:54%; top:50%;
  width:min(57vw,800px);
  max-height:84%;
  object-fit:contain;
  transform:translate(-50%,-50%);
  filter:blur(.8px) saturate(.85);
  mix-blend-mode:screen;
  pointer-events:none;
  will-change:opacity,transform;
}
.faux3d-bottle-rig {
  position:absolute;
  z-index:50;
  left:50%;top:50%;
  width:min(30vw,440px);
  height:84%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  isolation:isolate;
}
.faux3d-bottle {
  position:absolute;
  z-index:52;
  left:50%;top:50%;
  width:auto;
  height:min(72vh,660px);
  max-width:100%;
  object-fit:contain;
  object-position:center;
  transform:translate3d(-50%,-50%,0);
  opacity:0;
  will-change:transform,opacity,filter;
  user-select:none;
}
.faux3d-bottle[data-bottle="3"] {
  width:min(30vw,430px);
  height:auto;
  max-height:min(66vh,590px);
}
.faux3d-bottle.is-active { z-index:55; }
.faux3d-contact-shadow {
  position:absolute;
  z-index:43;
  left:50%; bottom:6.4%;
  width:48%; height:6.7%;
  transform:translateX(calc(-50% + var(--shadow-x,0px))) scaleX(calc(1 + var(--transition-energy) * .08));
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.68) 0,rgba(0,0,0,.42) 34%,transparent 73%);
  filter:blur(10px);
  opacity:calc(.78 - var(--transition-energy) * .14);
}
.faux3d-directional-shadow {
  position:absolute;
  z-index:42;
  left:50%;bottom:8%;
  width:72%;height:18%;
  transform:translateX(calc(-50% + var(--shadow-x,0px))) rotate(-7deg);
  border-radius:50%;
  background:radial-gradient(ellipse at 38% 50%,rgba(0,0,0,.38),rgba(0,0,0,.20) 39%,transparent 73%);
  filter:blur(23px);
  opacity:.72;
}
.faux3d-bottle-glow {
  position:absolute;
  z-index:44;
  left:50%;top:50%;
  width:82%;height:86%;
  transform:translate(-50%,-50%);
  border-radius:44%;
  background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--world-glow) 12%,transparent),transparent 63%);
  filter:blur(18px);
  opacity:calc(.7 - var(--exit-energy) * .38);
}
.faux3d-foreground-haze {
  position:absolute;
  z-index:98;
  left:45%;right:-10%;bottom:-18%;height:38%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--world-2) 10%,transparent),transparent 70%);
  filter:blur(28px);
  opacity:.42;
  pointer-events:none;
}

.faux3d-progress {
  position:absolute;
  z-index:130;
  right:0;
  bottom:40px;
  display:grid;
  grid-template-columns:auto 92px auto;
  align-items:center;
  gap:11px;
  color:rgba(239,233,224,.50);
  font-size:.62rem;
  letter-spacing:.17em;
}
.faux3d-progress span { color:#e6c780; }
.faux3d-progress i { position:relative;display:block;width:92px;height:1px;background:rgba(255,255,255,.13);overflow:hidden; }
.faux3d-progress i b { position:absolute;inset:0;background:#d7b56d;transform:scaleX(0);transform-origin:left center; }
.faux3d-scroll-cue {
  position:absolute;
  z-index:130;
  left:0;bottom:34px;
  display:flex;align-items:center;gap:12px;
  color:rgba(239,233,224,.45);
  font-size:.59rem;
  text-transform:uppercase;
  letter-spacing:.20em;
}
.faux3d-scroll-cue span { position:relative;display:block;width:34px;height:1px;background:rgba(255,255,255,.17);overflow:hidden; }
.faux3d-scroll-cue span::after { content:"";position:absolute;inset:0;background:#d7b56d;animation:fauxCue 2.2s ease-in-out infinite;transform:translateX(-100%); }
@keyframes fauxCue { 0%,18%{transform:translateX(-100%)} 65%,100%{transform:translateX(100%)} }
.faux3d-replay { right:0;top:104px;z-index:140; }

/* The quote rises through the remaining haze only after all four chapters. */
.faux3d-manifesto {
  min-height:92svh;
  position:relative;
  overflow:hidden;
  display:grid;
  align-content:center;
  isolation:isolate;
  padding-top:15vh;
  padding-bottom:15vh;
}
.faux3d-manifesto::before {
  content:"";
  position:absolute;inset:0;z-index:-3;
  background:
    linear-gradient(rgba(5,4,7,.58),rgba(5,4,7,.87)),
    url('../images/effects/intro-nebula.webp') 50% 55%/cover no-repeat;
  opacity:.35;
  filter:saturate(.88) brightness(.58);
}
.faux3d-manifesto-haze {
  position:absolute;
  z-index:-1;
  left:50%;top:52%;
  width:min(92vw,1300px);height:56%;
  transform:translate(-50%,-36%) scale(1.12);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(95,74,135,.24),rgba(52,68,104,.13) 39%,transparent 72%);
  filter:blur(38px);
  opacity:.78;
  transition:transform 1.9s cubic-bezier(.18,.75,.22,1),opacity 1.9s ease;
}
.faux3d-manifesto blockquote,
.faux3d-manifesto > p {
  position:relative;
  opacity:0;
  transform:translateY(56px);
  transition:opacity 1.35s ease,transform 1.55s cubic-bezier(.18,.75,.22,1);
}
.faux3d-manifesto blockquote {
  max-width:1100px;
  font-size:clamp(3.2rem,7vw,7.7rem);
  line-height:.98;
  letter-spacing:-.052em;
}
.faux3d-manifesto > p { transition-delay:.18s; }
.faux3d-manifesto.visible blockquote,
.faux3d-manifesto.visible > p { opacity:1;transform:translateY(0); }
.faux3d-manifesto.visible .faux3d-manifesto-haze { transform:translate(-50%,-50%) scale(.96);opacity:.44; }

@media (max-width:1100px) {
  .faux3d-shell { width:min(calc(100% - 42px),1100px);grid-template-columns:minmax(300px,.78fr) minmax(470px,1.22fr);gap:18px; }
  .faux3d-copy-scene h1 { font-size:clamp(3.6rem,6vw,5.4rem); }
  .faux3d-visual { height:min(72vh,700px); }
  .faux3d-bottle-rig { width:min(34vw,390px); }
  .faux3d-object { width:clamp(100px,14vw,190px); }
}

@media (max-width:820px) {
  .faux3d-showcase { height:500svh;min-height:500svh; }
  .faux3d-shell {
    width:min(calc(100% - 28px),720px);
    min-height:100svh;
    grid-template-columns:1fr;
    grid-template-rows:minmax(330px,49vh) auto;
    gap:0;
    align-content:center;
    padding-top:82px;
    padding-bottom:54px;
  }
  .faux3d-visual { grid-row:1;height:49vh;min-height:330px; }
  .faux3d-copy-anchor { grid-row:2;min-height:310px;display:block; }
  .faux3d-copy-scene { max-width:640px;left:50%;right:auto;width:100%;transform:translate3d(-50%,10px,0);text-align:center; }
  .faux3d-copy-scene.is-active { transform:translate3d(-50%,0,0); }
  .faux3d-copy-scene h1 { margin-left:auto;margin-right:auto;font-size:clamp(3rem,10vw,4.75rem); }
  .faux3d-description,.faux3d-notes { margin-left:auto;margin-right:auto; }
  .faux3d-price,.faux3d-actions { justify-content:center; }
  .faux3d-bottle-rig { width:min(50vw,310px);height:92%; }
  .faux3d-bottle { height:min(43vh,390px); }
  .faux3d-bottle[data-bottle="3"] { width:min(48vw,325px);max-height:39vh; }
  .faux3d-object { width:clamp(84px,20vw,155px); }
  .faux3d-atmosphere { width:min(86vw,560px); }
  .faux3d-rear-bloom { width:min(90vw,620px); }
  .faux3d-light-arcs i { left:50%;width:min(86vw,650px); }
  .faux3d-progress { bottom:20px;right:0;grid-template-columns:auto 60px auto; }
  .faux3d-progress i { width:60px; }
  .faux3d-scroll-cue { bottom:18px; }
  .faux3d-replay { top:80px;right:0; }
}

@media (max-width:560px) {
  .faux3d-showcase { height:480svh;min-height:480svh; }
  .faux3d-shell { width:calc(100% - 22px);grid-template-rows:minmax(280px,43vh) auto;padding-top:76px;padding-bottom:48px; }
  .faux3d-visual { height:43vh;min-height:280px; }
  .faux3d-copy-anchor { min-height:326px; }
  .faux3d-product-name { font-size:.64rem;margin-bottom:11px; }
  .faux3d-copy-scene h1 { font-size:clamp(2.7rem,13vw,4rem);margin-bottom:14px;line-height:.91; }
  .faux3d-description { font-size:.86rem;line-height:1.55;margin-bottom:11px; }
  .faux3d-notes { font-size:.58rem;line-height:1.5;letter-spacing:.12em;margin-bottom:14px; }
  .faux3d-price { margin-bottom:15px;gap:9px; }
  .faux3d-price strong { font-size:1.85rem; }
  .faux3d-actions { gap:8px; }
  .faux3d-actions .button { padding:11px 13px;font-size:.76rem; }
  .faux3d-bottle-rig { width:min(57vw,260px);height:92%; }
  .faux3d-bottle { height:min(37vh,335px); }
  .faux3d-bottle[data-bottle="3"] { width:min(56vw,275px);max-height:34vh; }
  .faux3d-object { width:clamp(68px,22vw,118px); }
  .faux3d-atmosphere { width:min(100vw,460px);opacity:.10!important; }
  .faux3d-scroll-cue em { display:none; }
  .faux3d-progress { font-size:.54rem; }
  .faux3d-manifesto blockquote { font-size:clamp(2.75rem,13vw,4.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .faux3d-scroll-cue span::after { animation:none; }
  .faux3d-object,.faux3d-bottle,.faux3d-copy-scene,.faux3d-sticky-stage,.cosmic-intro .final-intro-frame { transition:none!important; }
}
@media (max-width:820px) {
  .faux3d-copy-scene { left:0;right:0;width:100%;text-align:center; }
  .faux3d-copy-scene.is-active { transform:translate3d(0,0,0); }
}

/* --------------------------------------------------------------------------
   Aura Theory — interactive fragrance notes v3
   Continuous depth bands + hover labels + drag/flick playground
   -------------------------------------------------------------------------- */
.faux3d-visual {
  overflow:hidden;
  border-radius:28px;
}
.faux3d-object {
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
  -webkit-user-drag:none;
  outline:none;
  transition:box-shadow .16s ease;
}
.faux3d-object:focus-visible {
  outline:1px solid rgba(232,201,129,.75);
  outline-offset:7px;
  border-radius:18px;
}
.faux3d-object.is-grabbed {
  cursor:grabbing;
  z-index:96 !important;
}
.faux3d-object.is-thrown,
.faux3d-object.is-bouncing {
  z-index:94 !important;
}
.faux3d-object.is-bouncing {
  animation:ingredientBounceFlash .17s ease-out;
}
@keyframes ingredientBounceFlash {
  0% { opacity:.82; }
  55% { opacity:1; }
  100% { opacity:.96; }
}

.faux3d-ingredient-tooltip {
  position:absolute;
  z-index:124;
  left:50%;
  top:50%;
  min-width:132px;
  max-width:210px;
  padding:10px 12px 9px;
  transform:translate(-50%,-100%) translateY(-10px) scale(.96);
  border:1px solid rgba(222,190,116,.30);
  border-radius:13px;
  background:rgba(8,7,11,.76);
  box-shadow:0 14px 38px rgba(0,0,0,.26);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s linear;
}
.faux3d-ingredient-tooltip::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:9px;
  height:9px;
  transform:translateX(-50%) rotate(45deg);
  border-right:1px solid rgba(222,190,116,.24);
  border-bottom:1px solid rgba(222,190,116,.24);
  background:rgba(8,7,11,.76);
}
.faux3d-ingredient-tooltip.is-visible {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-100%) translateY(-14px) scale(1);
}
.faux3d-ingredient-tooltip strong {
  display:block;
  color:#f2e9d9;
  font-family:var(--serif);
  font-size:.92rem;
  font-weight:400;
  letter-spacing:.035em;
  white-space:nowrap;
}
.faux3d-ingredient-tooltip small {
  display:block;
  margin-top:3px;
  color:rgba(232,201,129,.72);
  font-size:.52rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}

.faux3d-play-hint {
  position:absolute;
  z-index:112;
  right:18px;
  top:20px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid rgba(222,190,116,.20);
  border-radius:999px;
  background:rgba(8,7,11,.42);
  color:rgba(241,232,216,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  pointer-events:none;
  transition:opacity .5s ease,transform .5s ease;
  animation:playHintFloat 3.2s ease-in-out infinite;
}
.faux3d-play-hint span {
  color:#e2c47d;
  font-size:.72rem;
}
.faux3d-play-hint em {
  font-style:normal;
  font-size:.52rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.faux3d-play-hint.is-dismissed {
  opacity:0;
  transform:translateY(-7px);
}
@keyframes playHintFloat {
  0%,100% { translate:0 0; }
  50% { translate:0 -3px; }
}

@media (max-width:760px) {
  .faux3d-visual { border-radius:20px; }
  .faux3d-play-hint { right:10px;top:10px;padding:7px 9px; }
  .faux3d-play-hint em { font-size:.47rem;letter-spacing:.12em; }
  .faux3d-ingredient-tooltip { min-width:116px;padding:8px 10px 7px; }
  .faux3d-ingredient-tooltip strong { font-size:.82rem; }
  .faux3d-ingredient-tooltip small { font-size:.46rem; }
}

@media (prefers-reduced-motion: reduce) {
  .faux3d-play-hint { animation:none; }
  .faux3d-object.is-bouncing { animation:none; }
}

/* ======================================================================
   Aura Theory — launch-day responsive polish (2026-08-22)
   Desktop header alignment + dedicated mobile art direction.
   ====================================================================== */

/* Header geometry: keep logo and navigation on one precise optical axis. */
.site-header {
  min-height: 86px;
  height: 86px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.brand-lockup {
  min-width: 228px;
  height: 66px;
  gap: 12px;
  align-items: center;
  flex: 0 0 auto;
}
.brand-mark {
  width: 58px;
  height: 66px;
  flex-basis: 58px;
  display: grid;
  place-items: center;
}
.brand-mark img {
  display: block;
  width: 47px;
  height: 66px;
  object-fit: contain;
  object-position: 50% 50%;
}
.brand-type {
  justify-content: center;
  transform: translateY(1px);
}
.brand-type b { line-height: 1.02; }
.brand-type small { margin-top: 5px; line-height: 1; }
.mobile-nav-intro,
.mobile-scent-links,
.mobile-nav-meta { display: none; }

/* Mobile is its own art direction, not a scaled-down desktop canvas. */
@media (max-width: 820px) {
  :root { --header-h: 70px; }

  .site-header {
    height: 70px;
    min-height: 70px;
    padding: 5px max(14px, env(safe-area-inset-right)) 5px max(14px, env(safe-area-inset-left));
    gap: 10px;
    background: linear-gradient(180deg, rgba(4,3,7,.90), rgba(4,3,7,.60) 72%, transparent);
    border-bottom-color: rgba(229,194,124,.08);
  }
  .site-header.scrolled {
    background: rgba(5,4,8,.84);
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
  }
  .brand-lockup {
    position: relative;
    z-index: 4;
    min-width: 0;
    width: auto;
    height: 60px;
    gap: 9px;
  }
  .brand-mark {
    width: 48px;
    height: 60px;
    flex: 0 0 48px;
  }
  .brand-mark img {
    width: 43px;
    height: 60px;
    filter: drop-shadow(0 0 12px rgba(224,178,83,.16));
  }
  .brand-type { transform: translateY(1px); }
  .brand-type b {
    font-size: 1.02rem;
    letter-spacing: .025em;
    white-space: nowrap;
  }
  .brand-type small {
    margin-top: 4px;
    font-size: .50rem;
    letter-spacing: .24em;
  }

  .nav-toggle {
    display: grid;
    position: relative;
    z-index: 5;
    width: 44px;
    height: 44px;
    padding: 0;
    place-content: center;
    border: 1px solid rgba(238,211,153,.14);
    border-radius: 50%;
    background: rgba(255,255,255,.025);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .nav-toggle span {
    width: 19px;
    margin: 3px 0;
    transform-origin: center;
  }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 3;
    box-sizing: border-box;
    min-height: 100dvh;
    padding: calc(88px + env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow-y: auto;
    background:
      radial-gradient(circle at 82% 22%, rgba(74,92,173,.19), transparent 30%),
      radial-gradient(circle at 18% 72%, rgba(145,81,117,.12), transparent 31%),
      linear-gradient(180deg, #050407 0%, #08060c 72%, #050407 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0,-24px,0) scale(.985);
    transition: opacity .42s ease, transform .58s cubic-bezier(.2,.75,.18,1), visibility .42s;
  }
  .main-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0,0,0) scale(1);
  }
  .main-nav > a {
    width: 100%;
    min-height: 52px;
    padding: 12px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(248,241,228,.075);
    color: rgba(248,241,228,.90);
    font-family: var(--serif);
    font-size: clamp(1.55rem, 7.2vw, 2.1rem);
    line-height: 1;
    letter-spacing: -.025em;
  }
  .main-nav > a::after { display: none; }
  .main-nav > a.active { color: var(--gold-soft); }
  .main-nav .nav-icon-link i { display: none; }
  .main-nav .cart-count {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    color: #17110a;
    font-family: Inter, sans-serif;
    font-size: .68rem;
  }
  .desktop-nav-label { display: none !important; }

  .mobile-nav-intro {
    display: block;
    margin: 0 0 20px;
    padding: 0 0 19px;
    border-bottom: 1px solid rgba(221,183,108,.16);
  }
  .mobile-nav-intro span,
  .mobile-scent-links > span {
    display: block;
    margin-bottom: 8px;
    color: rgba(237,211,153,.65);
    font-size: .58rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: .24em;
    text-transform: uppercase;
  }
  .mobile-nav-intro strong {
    display: block;
    color: #f8f1e4;
    font-family: var(--serif);
    font-size: 2.25rem;
    font-weight: 400;
    letter-spacing: -.035em;
  }
  .mobile-nav-intro small {
    display: block;
    margin-top: 5px;
    color: rgba(248,241,228,.47);
    font-size: .72rem;
  }
  .mobile-scent-links {
    display: block;
    margin-top: 24px;
    padding-top: 2px;
  }
  .mobile-scent-links > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .mobile-scent-links a {
    min-height: 42px;
    padding: 10px 11px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(248,241,228,.07);
    border-radius: 13px;
    background: rgba(255,255,255,.018);
    color: rgba(248,241,228,.70);
    font-size: .72rem;
  }
  .mobile-nav-meta {
    display: flex;
    margin-top: auto;
    padding-top: 24px;
    gap: 18px;
  }
  .mobile-nav-meta a {
    color: rgba(248,241,228,.47);
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* Keep the mobile cinematic scene inside the real dynamic viewport. */
  .faux3d-showcase {
    height: 590svh;
    min-height: 590svh;
  }
  .faux3d-sticky-stage {
    height: 100dvh;
    min-height: 100dvh;
  }
  .faux3d-shell {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: calc(70px + env(safe-area-inset-top)) 14px calc(38px + env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
    grid-template-rows: minmax(286px, 43dvh) minmax(0, 1fr);
    gap: 0;
    align-content: stretch;
    overflow: hidden;
  }
  .faux3d-visual {
    grid-row: 1;
    height: auto;
    min-height: 0;
    width: 100%;
    border-radius: 24px;
    perspective: 900px;
    background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0));
  }
  .faux3d-copy-anchor {
    grid-row: 2;
    min-height: 0;
    height: 100%;
    align-items: center;
    padding: 7px 2px 0;
  }
  .faux3d-copy-scene,
  .faux3d-copy-scene.is-active {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    text-align: center;
  }
  .faux3d-product-name {
    margin-bottom: 9px;
    font-size: .58rem;
    letter-spacing: .27em;
  }
  .faux3d-copy-scene h1 {
    max-width: 330px;
    margin: 0 auto 10px;
    font-size: clamp(2.25rem, 10.7vw, 3.1rem);
    line-height: .92;
    letter-spacing: -.052em;
  }
  .faux3d-description {
    max-width: 336px;
    margin: 0 auto 8px;
    font-size: .76rem;
    line-height: 1.47;
    color: rgba(239,233,224,.68);
  }
  .faux3d-notes {
    max-width: 340px;
    margin: 0 auto 10px;
    font-size: .49rem;
    line-height: 1.45;
    letter-spacing: .13em;
  }
  .faux3d-price {
    justify-content: center;
    gap: 8px;
    margin-bottom: 11px;
  }
  .faux3d-price s { font-size: .72rem; }
  .faux3d-price strong { font-size: 1.7rem; }
  .faux3d-price span { font-size: .50rem; }
  .faux3d-actions {
    width: min(100%, 348px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .faux3d-actions form { width: 100%; }
  .faux3d-actions .button {
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    font-size: .66rem;
    white-space: nowrap;
  }
  .faux3d-bottle-rig {
    width: min(56vw, 238px);
    height: 94%;
  }
  .faux3d-bottle {
    height: min(35dvh, 305px);
    max-width: 100%;
  }
  .faux3d-bottle[data-bottle="3"] {
    width: min(55vw, 246px);
    max-height: 32dvh;
  }
  .faux3d-object { width: clamp(62px, 20vw, 104px); }
  .faux3d-atmosphere { width: min(105vw, 430px); opacity: .12 !important; }
  .faux3d-rear-bloom { width: min(105vw, 480px); }
  .faux3d-light-arcs i { width: min(96vw, 500px); }
  .faux3d-transition-haze { inset: 7% 2% !important; filter: blur(32px); }
  .faux3d-play-hint,
  .faux3d-ingredient-tooltip { display: none !important; }
  .faux3d-object { pointer-events: none !important; }
  .faux3d-replay { display: none; }
  .faux3d-scroll-cue {
    left: 16px;
    bottom: calc(13px + env(safe-area-inset-bottom));
  }
  .faux3d-scroll-cue em { display: none; }
  .faux3d-progress {
    right: 16px;
    bottom: calc(13px + env(safe-area-inset-bottom));
    grid-template-columns: auto 52px auto;
    gap: 7px;
    font-size: .50rem;
  }
  .faux3d-progress i { width: 52px; }

  /* Stronger mobile atmosphere continuity between fragrance worlds. */
  .faux3d-color-world {
    background:
      radial-gradient(ellipse 74% 42% at 50% 27%, color-mix(in srgb,var(--world-1) 34%,transparent), transparent 70%),
      radial-gradient(ellipse 72% 50% at 58% 35%, color-mix(in srgb,var(--world-2) 34%,transparent), transparent 72%),
      linear-gradient(180deg, rgba(5,4,7,.05), rgba(5,4,7,.50) 76%, #050407 100%);
  }
  .faux3d-vignette {
    background: radial-gradient(ellipse 94% 78% at 50% 34%, transparent 28%, rgba(5,4,7,.16) 63%, rgba(5,4,7,.68) 100%);
  }

  /* Post-cinematic content: denser, clearer and genuinely touch-first. */
  .faux3d-manifesto {
    min-height: 72svh;
    padding: 90px 18px;
  }
  .faux3d-manifesto blockquote {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(2.65rem, 13vw, 4.4rem);
    line-height: .97;
  }
  .faux3d-manifesto > p {
    max-width: 310px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: .78rem;
    line-height: 1.65;
  }

  .cinematic-collection { padding-top: 82px; padding-bottom: 90px; }
  .cinematic-collection .section-heading {
    width: calc(100% - 32px);
    margin-bottom: 34px;
  }
  .cinematic-collection .section-heading h2 {
    max-width: 330px;
    font-size: clamp(2.75rem, 12.5vw, 4.1rem);
    line-height: .94;
  }
  .product-grid {
    width: calc(100% - 28px);
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .product-card {
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(255,255,255,.025), rgba(255,255,255,.009));
  }
  .product-card-media { height: 295px; }
  .product-card-media img { max-height: 248px; }
  .product-card-copy { padding: 20px 20px 22px; }
  .product-card-copy > p { font-size: .68rem; }
  .product-card-copy h3 { margin: 7px 0 12px; font-size: 1.9rem; }
  .card-price { margin-bottom: 15px; }
  .card-actions { align-items: center; }
  .card-actions .button { min-height: 44px; }
  .icon-button { width: 44px; height: 44px; }

  .trust-section {
    width: calc(100% - 28px);
    margin-bottom: 84px;
    border: 1px solid rgba(248,241,228,.08);
    border-radius: 22px;
    overflow: hidden;
  }
  .trust-section div {
    min-height: 0;
    padding: 18px 18px 18px 54px;
    position: relative;
  }
  .trust-section span {
    position: absolute;
    left: 18px;
    top: 21px;
  }
  .trust-section strong {
    margin: 0 0 4px;
    font-size: 1.12rem;
  }
  .trust-section p { font-size: .70rem; }

  .newsletter-section {
    width: calc(100% - 28px);
    margin-bottom: 92px;
    padding: 27px 20px 22px;
    gap: 22px;
    border-radius: 24px;
  }
  .newsletter-section h2 { font-size: 3.1rem; }
  .newsletter-form { gap: 12px; }
  .newsletter-form .button { min-height: 48px; }

  .site-footer { padding: 0 14px calc(26px + env(safe-area-inset-bottom)); }
  .footer-shell {
    padding: 34px 4px 24px;
    gap: 26px;
  }
  .footer-brand img {
    width: 176px;
    margin-bottom: 13px;
  }
  .footer-brand p { max-width: 320px; font-size: .75rem; line-height: 1.6; }
  .footer-column {
    padding-top: 18px;
    border-top: 1px solid rgba(248,241,228,.075);
  }
  .footer-column h3 { margin-bottom: 12px; }
  .footer-column a,
  .footer-column p { font-size: .72rem; margin-bottom: 8px; }
  .footer-base {
    padding: 17px 4px 0;
    gap: 5px;
    font-size: .61rem;
  }
  .whatsapp-orb {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .whatsapp-orb span { width: 30px; height: 30px; }
}

@media (max-width: 390px) {
  .site-header { padding-left: 11px; padding-right: 11px; }
  .brand-mark { width: 45px; flex-basis: 45px; }
  .brand-mark img { width: 40px; }
  .brand-type b { font-size: .96rem; }
  .brand-type small { font-size: .47rem; }
  .faux3d-shell { padding-left: 11px; padding-right: 11px; }
  .faux3d-copy-scene h1 { font-size: clamp(2.12rem, 10.8vw, 2.72rem); }
  .faux3d-description { font-size: .72rem; }
  .faux3d-actions .button { font-size: .62rem; }
}

@media (max-height: 720px) and (max-width: 820px) {
  .faux3d-shell {
    grid-template-rows: minmax(238px, 39dvh) minmax(0, 1fr);
    padding-top: calc(66px + env(safe-area-inset-top));
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
  }
  .faux3d-bottle { height: min(31dvh, 246px); }
  .faux3d-copy-scene h1 { font-size: 2.12rem; }
  .faux3d-description { font-size: .70rem; line-height: 1.4; }
  .faux3d-notes { margin-bottom: 7px; }
  .faux3d-price { margin-bottom: 8px; }
  .faux3d-actions .button { min-height: 40px; }
}

@media (max-width: 820px) {
  .faux3d-sticky-stage::after {
    content: "";
    position: absolute;
    z-index: 7;
    inset: -12% -25%;
    pointer-events: none;
    opacity: calc(var(--arc-energy) * .58);
    background:
      radial-gradient(ellipse 30% 56% at 50% 40%, color-mix(in srgb,var(--world-glow) 30%,transparent), transparent 72%),
      linear-gradient(105deg, transparent 26%, color-mix(in srgb,var(--world-2) 15%,transparent) 48%, transparent 70%);
    filter: blur(18px);
    transform: translate3d(calc((var(--arc-energy) - .5) * 5%),0,0) scale(calc(.94 + var(--arc-energy) * .12));
    mix-blend-mode: screen;
  }
  .reveal-on-scroll {
    transform: translateY(24px);
    transition-duration: .68s;
  }
}