/* =====================================================================
   NASMETIK — styles des animations (complète style.css, ne le remplace pas)
   ===================================================================== */

/* ---- Intro : flacon 3D + coulée ---- */
.intro canvas.intro-gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s cubic-bezier(.22,1,.36,1)}
.intro.has-3d canvas.intro-gl{opacity:1}
.intro>div{transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .4s}
.intro.has-3d>div{transform:translateY(min(31vh,270px)) scale(.6)}
.intro.pouring{background:transparent;transition:none}
.intro.pouring>div,.intro.pouring canvas.intro-gl{opacity:0;transition:opacity .25s}
.intro svg.intro-pour{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.intro{cursor:pointer}

/* ---- Titre mot par mot ---- */
.wsplit .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .08em .14em 0;margin:0 -.08em -.14em 0}
.wsplit .w>span{display:inline-block;transform:translateY(112%);transition:transform var(--wd,900ms) cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i)*var(--ws,70ms))}
.wsplit.words-in .w>span{transform:none}

/* ---- Coulée WebGL sur les cartes ---- */
.lq-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;border-radius:inherit}

/* ---- Inclinaison 3D + reflet ---- */
.tilt-on{transition:transform .28s cubic-bezier(.22,1,.36,1);will-change:transform;transform-style:preserve-3d}
.tilt-glare{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s;border-radius:inherit;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,250,240,var(--ga,.22)),rgba(255,250,240,0) 55%)}
.tilt-on:hover .tilt-glare{opacity:1}

/* ---- Fiche produit : parallaxe en couches + bulles ---- */
.stage .px-bg,.stage .px-shadow{position:absolute;pointer-events:none;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.stage .px-bg{inset:-6%;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--px-tint,#C9A877) 16%,#fff),#fff 70%)}
.stage .px-shadow{left:22%;right:22%;bottom:5%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(59,36,22,.16),rgba(59,36,22,0));filter:blur(4px)}
.stage.px-on{isolation:isolate}   /* le mélange reste à l'intérieur du cadre de l'image */
.stage.px-on .slides{position:relative;mix-blend-mode:multiply}
.stage.px-on .slides img{transform:translate3d(var(--px,0),var(--py,0),0) scale(1.035);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.stage.px-on.zoom .slides img{transform:none}
canvas.bubbles{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ---- Panier : vol du produit, rebond « goutte », onde ---- */
.fly{position:fixed;left:0;top:0;z-index:400;pointer-events:none;border-radius:16px;object-fit:cover;box-shadow:0 18px 40px -18px rgba(59,36,22,.45);will-change:transform,opacity}
@keyframes dropBounce{0%{transform:none}22%{transform:scale(1.28,.74) translateY(3px)}48%{transform:scale(.88,1.16) translateY(-4px)}72%{transform:scale(1.07,.95)}100%{transform:none}}
.drop-bounce{animation:dropBounce .62s cubic-bezier(.22,1,.36,1)}
@keyframes badgePop{0%{transform:scale(.3)}60%{transform:scale(1.35)}100%{transform:none}}
.drop-bounce .badge{animation:badgePop .5s cubic-bezier(.22,1,.36,1) .12s both}
.rp-host{position:relative}
.rp-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.rp{position:absolute;width:var(--s);height:var(--s);left:var(--x);top:var(--y);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);background:currentColor;opacity:.16;transform:scale(0);
  border-radius:46% 54% 51% 49%/52% 47% 53% 48%;animation:rp var(--rpd,650ms) cubic-bezier(.22,1,.36,1) forwards}
@keyframes rp{to{transform:scale(1) rotate(40deg);opacity:0}}

/* ---- Scroll fluide (Lenis) ---- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---- Rituel : gouttes en parallaxe ---- */
.band.has-decor{position:relative;overflow:hidden}
.band.has-decor>*{position:relative;z-index:1}
.band .decor{position:absolute!important;z-index:0!important;pointer-events:none;color:var(--gold2);will-change:transform}

/* ---- Mouvement réduit : de simples fondus ---- */
@media (prefers-reduced-motion:reduce){
  .reveal{transition:opacity .6s ease!important}
  .intro{transition:opacity .5s ease,visibility .5s!important}
  .wsplit .w>span{transform:none}
}

/* le rituel bouge au scroll : sa transition de survol ne doit pas toucher au transform */
.anim .geste{transition-property:border-color,background-color}

/* bulle de message : invisible tant qu’elle est vide (elle dépassait sous le bandeau cookies) */
.toast{opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .3s}
.toast.on{opacity:1}