/* HERO V2 LAB — gif-reference fold. Inter headlines, Roboto giant word,
   3 bottles on one baseline (gif figure geometry), marquee under fold. */
.roboto{font-family:'Roboto',sans-serif}
body{overflow-x:hidden}

/* ── header: burger+wordmark left · nothing center · cart+sun right, all 50% bolder */
.h2-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;
  align-items:center;padding:1.4rem var(--pad-x)}
.h2-left,.h2-right{display:flex;align-items:center;gap:1.4rem}
.h2-burger .burger span{display:block;width:1.5rem;height:0.1562rem;background:var(--ink);margin:0.34rem 0}
.h2-wordmark{height:0.95rem;width:auto}
html.dark .h2-wordmark{filter:invert(1)}
.h2-cart{font-size:.72rem;font-weight:800;letter-spacing:.18em;color:var(--ink)}
.h2-sun svg{width:1.35rem;height:1.35rem;stroke-width:2.3}

/* ── fold */
.hero2{position:relative;height:100vh;min-height:38rem;overflow:hidden;
  background:color-mix(in srgb,var(--accent) 26%,white);
  transition:background 650ms cubic-bezier(.4,0,.2,1)}
html.dark .hero2{background:color-mix(in srgb,var(--accent) 34%,#232325)}

/* giant word: Six Caps, no tracking, gif margins (7% both sides), behind main bottle */
.h2-word{position:absolute;left:7%;right:7%;top:12%;z-index:1;text-align:center;
  font-family:'Six Caps',sans-serif;font-weight:400;letter-spacing:0;line-height:1;white-space:nowrap;
  color:rgba(255,255,255,.92);user-select:none;pointer-events:none}
html:not(.dark) .h2-word{color:rgba(255,255,255,.92)}

/* stage: role carousel per gif prompt — center/left/right/back, 650ms everything */
.h2-stage{position:absolute;inset:0;z-index:3;cursor:grab}
.h2-item{position:absolute;aspect-ratio:.6/1;transform:translateX(-50%);transform-origin:50% 100%;
  transition:transform 650ms cubic-bezier(.4,0,.2,1), filter 650ms cubic-bezier(.4,0,.2,1),
    opacity 650ms cubic-bezier(.4,0,.2,1), left 650ms cubic-bezier(.4,0,.2,1),
    height 650ms cubic-bezier(.4,0,.2,1), bottom 650ms cubic-bezier(.4,0,.2,1);
  will-change:transform,filter,opacity}
.h2-fit{position:absolute;inset:0}
.h2-fit img{width:100%;height:100%;object-fit:contain;object-position:bottom center;
  -webkit-user-drag:none;user-select:none;display:block}
/* subtle contact shadow at the shared baseline (box bottom) */
.h2-shadow{position:absolute;left:50%;bottom:-1.5%;transform:translateX(-50%);
  width:64%;height:4%;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse, rgba(0,0,0,.32), rgba(0,0,0,.12) 55%, transparent 72%);
  filter:blur(0.3125rem)}
/* grain overlay (prompt: fractalNoise, .4 container opacity) */
.h2-grain{position:absolute;inset:0;pointer-events:none;z-index:50;opacity:.4;
  background-size:12.5rem 12.5rem;background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E")}

/* info block — gif's TOONHUB FIGURINES spot (left, lower third). Inter everywhere. */
.h2-info{position:absolute;left:7%;bottom:7%;z-index:4;max-width:26rem;
  display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.h2-colldial{margin:0 0 .2rem;padding:.35rem .5rem}
.h2-name{font-family:'Inter',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:.14em;
  text-transform:uppercase;color:#FFFFFF;text-shadow:0 0.0625rem 0.1875rem rgba(0,0,0,.55), 0 0 0.625rem rgba(0,0,0,.3)}
.h2-desc{font-family:'Inter',sans-serif;font-size:.8rem;line-height:1.7;color:#FFFFFF;
  text-shadow:0 0.0625rem 0.1875rem rgba(0,0,0,.55), 0 0 0.625rem rgba(0,0,0,.3)}

/* perfume dial: bottom of the left stack */
.h2-perfdial{margin:0}

/* buy block — gif's DISCOVER IT spot (bottom-right): variants / price / BUY NOW */
.h2-buy{position:absolute;right:7%;bottom:7%;z-index:4;display:flex;flex-direction:column;
  align-items:stretch;width:13.5rem;gap:.55rem}
.h2-offer{font-family:'Inter',sans-serif;display:grid;grid-template-columns:1fr auto 1fr;
  justify-items:center;align-items:baseline;row-gap:.3rem}
.h2-offer.single{grid-template-columns:1fr}
.h2-size{font-size:.7rem;font-weight:700;letter-spacing:.22em;color:var(--ink-soft)}
.h2-amt{font-size:clamp(.6rem,.9vw,.85rem);font-weight:800;letter-spacing:.06em;color:var(--ink)}
.h2-bar{color:var(--ink-soft);font-weight:800;font-size:.7rem}
.h2-donut{position:relative;width:5.2rem;aspect-ratio:1;align-self:center;margin-bottom:.4rem;
  font-family:'Inter',sans-serif;color:var(--ink)}
.h2-donut span{position:absolute;inset:4%;display:inline-block;text-align:center;
  font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
@keyframes h2spin{to{transform:rotate(360deg)}}
.h2-buynow{font-family:'Inter',sans-serif;display:inline-block;text-align:center;padding:.9rem 2.4rem;
  background:var(--ink);color:var(--bg);font-weight:800;font-size:.78rem;letter-spacing:.24em;
  transition:opacity var(--dur-fast),transform var(--dur-fast)}
.h2-buynow:hover{opacity:.88;transform:translateY(-0.0625rem)}

/* ── marquee under fold-1 */
.h2-marquee{overflow:hidden;background:var(--grey);border-top:0.0625rem solid var(--line);padding:1rem 0}
.h2-marquee-track{display:flex;align-items:center;gap:3rem;width:max-content;
  animation:h2-scroll 28s linear infinite}
.h2-marquee span{font-family:'Inter',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.28em;
  color:#F4F0E9;white-space:nowrap}
.h2-marquee i{font-style:normal;color:var(--stone);font-size:.8rem}
@keyframes h2-scroll{to{transform:translateX(-50%)}}

@media (max-width:53.75rem){
  .h2-word{top:22%}
  .h2-info{bottom:26%;max-width:70%}
  .h2-perfdial{bottom:16%}
  .h2-buy{right:7%;bottom:2.5%}
}

/* shiny BUY NOW label (light shimmer over the ink button) */
.h2-buynow .shiny{background-image:linear-gradient(120deg, var(--bg) 0%, var(--bg) 35%, #FFFFFF 50%, var(--bg) 65%, var(--bg) 100%)}
html.dark .h2-buynow .shiny{background-image:linear-gradient(120deg, #232325 0%, #232325 35%, #6E6E76 50%, #232325 65%, #232325 100%)}

/* ── per-perfume hero color system (bottle-derived, legibility-first) ──
   dark mode: rich bottle color as FULL bg, white text.
   day mode: warm white bg, same color becomes the primary FONT color. */
body[data-accent="midsea"]{--h2:#2B5FB0}   /* bright royal blue (Midsea liquid, deepened) */
body[data-accent="divine"]{--h2:#B54A14}   /* amber-orange */
body[data-accent="crown"]{--h2:#96601F}    /* golden amber */
body[data-accent="bsunset"]{--h2:#4C4F58}  /* smoke grey-blue */
body[data-accent="rich"]{--h2:#A2308D}     /* magenta */
body[data-accent="rose"]{--h2:#B04A52}     /* rosy red */
body[data-accent="ocean"]{--h2:#2B4C74}    /* deep marine navy */
body[data-accent="storm"]{--h2:#2E4468}    /* storm navy */
body[data-accent="saharan"]{--h2:#8F6718}  /* desert gold, deepened */
body[data-accent="silk"]{--h2:#C24468}     /* blush */

.hero2{background:#F5F3EF}
html.dark .hero2{background:var(--h2)}
/* day mode: colored type on white */
html:not(.dark) .h2-word{color:color-mix(in srgb, var(--h2) 24%, #F5F3EF)}
html:not(.dark) .h2-desc{color:var(--h2);text-shadow:none}
html:not(.dark) .h2-amt{color:var(--h2)}
html:not(.dark) .h2-size,html:not(.dark) .h2-bar{color:color-mix(in srgb, var(--h2) 75%, #333)}
html:not(.dark) .h2-donut{color:var(--h2)}
html:not(.dark) .h2-buynow{background:var(--h2)}
html:not(.dark) .h2-buynow .shiny{background-image:linear-gradient(120deg,#FFF 0%,#FFF 35%,color-mix(in srgb,var(--h2) 35%,#FFF) 50%,#FFF 65%,#FFF 100%)}
html.dark .h2-shadow{opacity:.85}

.h2-info .coll-tabs button{white-space:nowrap}

/* active chip: solid perfume color (dark-mode bg color, both modes) instead of metal shader */
.h2-colldial .metal-chip{background:var(--h2);transition:background 650ms cubic-bezier(.4,0,.2,1);
  box-shadow:0 0.125rem 0.5rem rgba(0,0,0,.35), 0 0 0 0.0625rem rgba(255,255,255,.12)}
.h2-colldial .metal-chip canvas{display:none}
.h2-colldial .metal-chip .chip-glass{display:none}
.h2-colldial button.active{color:#FFFFFF}
html:not(.dark) .h2-colldial button.active{color:#FFFFFF}
html.dark .h2-colldial button.active{color:#FFFFFF}   /* beats site.css html.dark override */

/* dial labels unbolded */
.h2-colldial button{font-weight:400}
.h2-colldial button.active{font-weight:400}

/* subtle side arrows — ghost circles, hover fill */
.h2-arrows{display:flex;gap:.8rem;margin-top:.2rem}
.h2-arrow{width:3.2rem;height:3.2rem;border-radius:50%;cursor:pointer;
  background:transparent;border:0.0938rem solid rgba(255,255,255,.5);color:rgba(255,255,255,.8);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s var(--ease), background-color .15s var(--ease)}
.h2-arrow svg{width:1.15rem;height:1.15rem}
.h2-arrow:hover{transform:scale(1.08);background:rgba(255,255,255,.12);color:#FFF}
html:not(.dark) .h2-arrow{border-color:color-mix(in srgb,var(--h2) 55%,transparent);color:var(--h2)}
html:not(.dark) .h2-arrow:hover{background:color-mix(in srgb,var(--h2) 12%,transparent)}
@media (max-width:53.75rem){.h2-arrow{display:none}}

/* ── dial scheme: inverted pills per mode ──
   dark : outer WHITE · inner --h2 · active text white · inactive text --h2
   light: outer --h2  · inner WHITE · active text --h2 · inactive text white */
.h2-colldial{transition:background 650ms cubic-bezier(.4,0,.2,1)}
.h2-colldial::before,.h2-colldial::after{content:none}   /* solid pills, no glass layers */
html.dark .h2-colldial{background:#FFFFFF;box-shadow:0 0.25rem 0.875rem rgba(0,0,0,.28)}
html.dark .h2-colldial button{color:var(--h2)}
html.dark .h2-colldial button:hover{color:color-mix(in srgb,var(--h2) 70%,#000)}
html.dark .h2-colldial .metal-chip{background:var(--h2)}
html.dark .h2-colldial button.active{color:#FFFFFF}
html:not(.dark) .h2-colldial{background:var(--h2);box-shadow:0 0.25rem 0.875rem rgba(0,0,0,.22)}
html:not(.dark) .h2-colldial button{color:#FFFFFF}
html:not(.dark) .h2-colldial button:hover{color:rgba(255,255,255,.8)}
html:not(.dark) .h2-colldial .metal-chip{background:#FFFFFF}
html:not(.dark) .h2-colldial button.active{color:var(--h2)}

/* cinematic depth over the solid color: key light + vignette (index.html style) */
.hero2::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  background:radial-gradient(85% 70% at 50% 16%, rgba(255,255,255,.07), transparent 60%),
             radial-gradient(140% 100% at 50% 112%, rgba(0,0,0,.30), transparent 55%)}
.h2-info,.h2-buy{z-index:5}