/* =========================================================================
   ELIRA LIVING — Immersive homepage styles (hero, pinned chapter, climax).
   Loaded after app.css on the homepage only.
   ========================================================================= */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* HERO */
.hero{ position:relative; min-height:100svh; overflow:hidden; }
.hero__bg{ position:absolute; inset:-10% 0 0 0; will-change:transform; }
.hero__bg img{ width:100%; height:115%; object-fit:cover; }
.hero__veil{ position:absolute; inset:0; background:
  radial-gradient(120% 90% at 70% 20%, rgba(15,18,13,.15), rgba(15,18,13,.65) 55%, rgba(15,18,13,.92) 100%),
  linear-gradient(to bottom, rgba(15,18,13,.55), rgba(15,18,13,.1) 35%, rgba(15,18,13,.95)); }
.hero__content{ position:relative; z-index:3; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:6rem; }
.hero__title{ font-family:'Bodoni Moda',serif; font-size:clamp(2.6rem,6.4vw,5.6rem); line-height:1.02; }
.hero__title .accent{ font-style:italic; color:var(--gold); }
.hero__badge{ position:absolute; bottom:-1.5rem; left:-1.5rem; display:none; align-items:center; gap:.75rem; background:var(--surface); border:1px solid var(--line); padding:1rem 1.25rem; box-shadow:var(--shadow-md); }
@media(min-width:768px){ .hero__badge{ display:flex; } }

.wordmark{ font-family:'Bodoni Moda',serif; font-weight:600; font-size:clamp(3.4rem,16vw,16rem); line-height:.8; letter-spacing:-.02em; color:transparent; -webkit-text-stroke:1px rgba(236,231,219,.32); white-space:nowrap; pointer-events:none;
  /* faint metallic fill that catches a vertical light — reads as engraved brass */
  background:linear-gradient(180deg,rgba(236,231,219,.10),rgba(200,162,78,.16) 48%,rgba(236,231,219,.04));
  -webkit-background-clip:text; background-clip:text; }
.wordmark-wrap{ position:absolute; bottom:4vh; left:0; right:0; z-index:2; display:flex; justify-content:center; overflow:hidden; }

.botanical{ position:absolute; z-index:2; opacity:0; color:var(--sage); will-change:transform; }
.scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:4; }
.scroll-cue span{ display:block; width:1px; height:46px; margin:0 auto; background:linear-gradient(var(--gold),transparent); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top; } 45%{ transform:scaleY(1); transform-origin:top; } 55%{ transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

.cert-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg2); }

/* PINNED CHAPTER */
.chapter{ position:relative; height:100svh; overflow:hidden; }
.chapter__stage{ position:absolute; inset:0; display:grid; place-items:center; }
.chapter__product{ position:relative; z-index:2; height:78%; max-height:78vh; aspect-ratio:234/1100; will-change:transform; }
.cp-coin{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.cp-face{ position:absolute; inset:0; display:grid; place-items:center; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.cp-back{ transform:rotateY(180deg); }
.cp-face img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 32px 58px rgba(0,0,0,.5)); }

/* ===== WET BOTTLE — condensation, running droplets, specular gloss ========
   The .cp-wet layer sits over each bottle face and rotates with the coin-flip.
   Built from SVG beads (light-catching) + CSS runner droplets + a sheen sweep.
   mix-blend screen makes beads brighten the glass like real water. */
.cp-wet{ position:absolute; inset:0; z-index:1; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); }
.cp-wet .beads{ position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:screen; opacity:.85; }
/* slow vertical light sweep = wet gloss travelling down the bottle */
.cp-wet::after{ content:""; position:absolute; inset:0; mix-blend-mode:screen; opacity:.5;
  background:linear-gradient(180deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  background-size:100% 280%; animation:wet-sheen 6.5s var(--ease) infinite; }
@keyframes wet-sheen{ 0%{ background-position:50% -40%; } 100%{ background-position:50% 140%; } }
/* a few droplets that slide down and re-form — the "actively wet" cue */
.cp-drip{ position:absolute; width:7px; height:11px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(40% 35% at 38% 30%,rgba(255,255,255,.9),rgba(255,255,255,.18) 55%,rgba(160,180,150,.05) 80%);
  box-shadow:0 1px 2px rgba(0,0,0,.25), inset 0 -2px 3px rgba(0,0,0,.12); mix-blend-mode:screen; opacity:0;
  will-change:transform,opacity; animation:wet-drip linear infinite; }
@keyframes wet-drip{ 0%{ transform:translateY(0) scale(.6); opacity:0; } 8%{ opacity:.95; }
  82%{ opacity:.9; } 100%{ transform:translateY(360px) scale(1.05); opacity:0; } }
.cp-drip.d1{ left:42%; top:26%; animation-duration:5.5s; animation-delay:.2s; }
.cp-drip.d2{ left:56%; top:34%; width:5px; height:8px; animation-duration:7s; animation-delay:2.1s; }
.cp-drip.d3{ left:48%; top:46%; width:8px; height:13px; animation-duration:6.2s; animation-delay:3.6s; }
@media (max-width:759px){ .cp-drip{ animation-duration:0s; } } /* mobile keeps it calm */
/* MOBILE: scroll-driven clockwise spin, CSS-only (no GSAP) so perf stays high.
   Bottle rotates a full 360° + zooms small→big→normal as the section scrolls. */
@media (max-width:759px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .chapter__product{ animation:cp-mobile-spin linear both; animation-timeline:view(); animation-range:entry 5% exit 95%; }
  }
}
@keyframes cp-mobile-spin{
  from{ transform:rotate(0deg) scale(.72); }
  50%{ transform:rotate(180deg) scale(1.12); }
  to{ transform:rotate(360deg) scale(1); }
}
.chapter__glow{ position:absolute; z-index:1; width:60vmin; height:60vmin; border-radius:50%; background:radial-gradient(circle,rgba(200,162,78,.22),transparent 65%); filter:blur(20px); will-change:transform,opacity; }
.ingredient{ position:absolute; z-index:3; max-width:230px; opacity:0; will-change:transform,opacity; }
.ingredient .ln{ width:56px; height:1px; background:var(--gold); margin-bottom:10px; }
.ingredient h4{ font-family:'Bodoni Moda',serif; font-size:1.35rem; }
.ingredient p{ font-size:.82rem; color:var(--ink-soft); line-height:1.5; margin-top:4px; }
.chapter__headlines{ position:absolute; z-index:3; left:50%; top:12%; transform:translateX(-50%); text-align:center; width:min(90%,760px); }
.chapter__headlines h2{ position:relative; min-height:1.2em; }
.chapter__headlines h2 span{ position:absolute; left:0; right:0; transition:opacity .45s ease; }

/* CERT CLIMAX */
.leaf-draw path{ fill:none; stroke:var(--sage); stroke-width:1.4; }
.count{ font-variant-numeric:tabular-nums; }

/* SPLIT */
.split-media{ position:relative; overflow:hidden; min-height:60svh; }
@media(min-width:1024px){ .split-media{ min-height:80svh; } }
.split-media img{ width:100%; height:100%; object-fit:cover; will-change:transform; position:absolute; inset:0; }

@media (prefers-reduced-motion: reduce){
  .botanical{ opacity:.25 !important; }
  .ingredient{ opacity:1 !important; }
}