/* ═══════════════════════════════════════════════════════════════════════════
   MaGin — couche d'animation « dynamique » (remplace GSAP + ScrollTrigger +
   Lenis + magin-motion.js). Pilotée par assets/magin-dyn.js.
   Le design reste celui d'index.html : cette feuille n'ajoute que des gestes.
   Couleurs via les variables du site (--y, --bk, --wh) : le Manga Mode les
   inverse lui-même. Chaque geste est neutralisé sous prefers-reduced-motion.
═══════════════════════════════════════════════════════════════════════════ */

/* body{overflow-x:hidden} fait du body un conteneur de défilement et casse
   position:sticky (travelling des cocktails). clip coupe pareil sans ce défaut. */
body{overflow-x:clip}

/* ── Préchargeur (une fois par session) ───────────────────────────────── */
.mg-pre{position:fixed;inset:0;z-index:1000001;display:grid;place-items:center;pointer-events:none}
.mg-pre-p{position:absolute;inset:0;background:#080808;transition:transform 1s cubic-bezier(.76,0,.24,1)}
.mg-pre-p.y{background:#F0E614;transition-delay:.1s}
.mg-pre-in{position:relative;text-align:center;transition:opacity .35s,transform .9s cubic-bezier(.76,0,.24,1)}
.mg-pre-jp{font-family:var(--H);font-weight:900;font-size:clamp(4rem,14vw,11rem);line-height:1;color:#F0EFE8;letter-spacing:.05em}
.mg-pre-jp span{display:inline-block;opacity:0;transform:translateY(40%) scale(.8);animation:mgPreIn .7s cubic-bezier(.16,1,.3,1) forwards}
.mg-pre-jp span:nth-child(2){animation-delay:.1s}.mg-pre-jp span:nth-child(3){animation-delay:.2s}
@keyframes mgPreIn{to{opacity:1;transform:none}}
.mg-pre-bar{width:min(70vw,320px);height:3px;margin:1.4rem auto 0;background:#2a2a2a;overflow:hidden}
.mg-pre-bar i{display:block;height:100%;background:#F0E614;transform:scaleX(0);transform-origin:left}
.mg-pre.out .mg-pre-in{opacity:0;transform:translateY(-30px)}
.mg-pre.out .mg-pre-p{transform:translateY(-101%)}

/* ── Ligne de progression en haut ─────────────────────────────────────── */
.mg-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:600;background:var(--y);transform-origin:left;transform:scaleX(0);pointer-events:none}

/* marge pour la parallaxe du héros (aucun bord visible en descendant) */
#page-home .hero-bg-wrap{inset:-10% 0}

/* ── Bandeau penché ───────────────────────────────────────────────────── */
#page-home .marquee{position:relative;z-index:4;transform:rotate(-2deg) scale(1.04);margin:-1.1rem 0;
  border-top:3px solid #080808;border-bottom:3px solid #080808;box-shadow:0 10px 30px rgba(0,0,0,.35)}
body.mm #page-home .marquee{border-color:#fff;box-shadow:none}

/* ── Titres : le bloc entier coulisse de gauche à droite en se dévoilant ── */
.mg-t{opacity:0;transform:translate3d(-60px,0,0);clip-path:inset(-20px 100% -20px -20px);
  transition:clip-path 1s cubic-bezier(.215,.61,.355,1),transform 1s cubic-bezier(.215,.61,.355,1),opacity .4s ease}
.mg-t.mg-in{opacity:1;transform:none;clip-path:inset(-20px -20px -20px -20px)}

/* ── Accueil : « Disponible en ligne », la photo entre de gauche à droite ── */
#page-home .shop-cta{background:#080808}
#page-home .shop-cta-bg,#page-home .shop-cta-bg-mm{clip-path:inset(0 calc(var(--k,1) * 100%) 0 0)}

/* ── Accueil : botaniques au fil du scroll (--p : 0 → 1) ───────────────── */
.mg-scroll .bot-cell{opacity:var(--p,0);transform:translate3d(0,calc((1 - var(--p,0)) * 90px),0)}
.mg-scroll .bot-cell .bot-img-zone{clip-path:inset(calc((1 - var(--p,0)) * 100%) 0 0 0)}
.mg-scroll .bot-cell .bot-img-zone img{transform:scale(calc(1 + (1 - var(--p,0)) * .35))}
.mg-scroll .bot-cell .bot-jp,.mg-scroll .bot-cell .bot-name,.mg-scroll .bot-cell .bot-note{opacity:clamp(0,(var(--p,0) - .55) * 2.5,1)}

/* ── Accueil : cocktails en travelling horizontal ──────────────────────── */
.mgk{position:relative;background:var(--bk);border-top:1px solid rgba(240,239,232,.06)}
.mgk-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:2.2rem;overflow:hidden}
.mgk-head{width:100%;max-width:calc(1320px + 6rem);margin:0 auto;padding:0 3rem;display:flex;justify-content:space-between;align-items:flex-end;gap:3rem}
.mgk-head .cs-title{font-size:clamp(2.6rem,min(5.4vw,9vh),6rem);margin-top:.8rem}
.mgk-side{display:flex;flex-direction:column;align-items:flex-end;gap:1.4rem;text-align:right}
.mgk-side .cs-text{max-width:340px}
.mgk-track{display:flex;gap:1.4rem;width:max-content;padding:0 max(3rem,calc((100vw - 1320px)/2));will-change:transform}
.mgk-track .cs-slide{position:relative;inset:auto;opacity:1;flex:0 0 auto;width:min(68vw,340px);height:min(52vh,470px);
  border:3px solid var(--wh);overflow:hidden;background:#111;transition:none}
.mgk-track .cs-img{transition:opacity .4s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.mgk-track .cs-slide:hover .cs-img{transform:scale(1.06)}
.mgk-num{position:absolute;top:.8rem;left:.8rem;z-index:3;font-family:var(--H);font-weight:900;font-size:1rem;background:var(--y);color:var(--bk);padding:.15rem .55rem}
@media (max-width:860px){
  .mgk-head{flex-direction:column;align-items:flex-start;gap:1.2rem;padding:0 1.5rem}
  .mgk-side{align-items:flex-start;text-align:left}
  .mgk-side .cs-text{display:none}
  .mgk-track{padding:0 1.5rem;gap:1rem}
  .mgk-track .cs-slide{height:min(48vh,420px)}
}
/* sans JS : défilement horizontal au doigt, rien n'est perdu */
html:not(.mg-js) .mgk-pin{position:relative;height:auto;padding:5rem 0}
html:not(.mg-js) .mgk-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory}

/* ── Accueil : cases de l'univers manga qui entrent par les côtés ──────── */
.mg-scroll .mu-case{opacity:clamp(0,var(--p,0)*1.6,1);
  transform:translate3d(calc((1 - var(--p,0)) * var(--dx,70) * 1vw),0,0) rotate(calc((1 - var(--p,0)) * var(--rz,3) * 1deg))}
.mg-scroll .mu-case--1{--dx:-70;--rz:-3}
.mg-scroll .mu-case--3{--dx:80;--rz:4}
.mg-scroll .mu-case--4{--dx:75;--rz:2}
.mg-scroll .mu-case--5{--dx:85;--rz:4}

/* ── Accueil : la fenêtre du jeu s'incline vers la souris ──────────────── */
.arcade-card{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.arcade-card.playing{transition:none;transform:none!important}

/* ── Histoire : photos qui entrent de gauche à droite, notes et piliers par le côté ── */
.mg-scroll .hs-note,.mg-scroll .hs-pillars li{opacity:clamp(0,var(--p,0)*1.6,1);transform:translate3d(calc((1 - var(--p,0)) * var(--dx,40) * 1vw),0,0)}
.mg-scroll .hs-pillars li{--dx:-40}

/* ── Transition Manga Mode : bandes d'encre / trame / jaune en diagonale ── */
.mg-slash{position:fixed;inset:0;z-index:1000000;pointer-events:none;overflow:hidden;visibility:hidden}
.mg-slash.on{visibility:visible}
.mg-slash-g{position:absolute;top:-30%;bottom:-30%;left:0;display:flex;width:260vw;transform:translateX(-270vw) skewX(-16deg)}
.mg-slash.on .mg-slash-g{will-change:transform;contain:strict}
.mg-slash.css .mg-slash-g{animation:mgSlash 1.05s cubic-bezier(.7,0,.3,1) forwards}
.mg-slash-g i{flex:1 0 auto;height:100%}
.mg-slash-g i:nth-child(1){width:70vw;background:#111}
.mg-slash-g i:nth-child(2){width:120vw;background:#fff radial-gradient(circle,#111 1.6px,transparent 1.9px) 0 0/9px 9px;display:grid;place-items:center}
.mg-slash-g i:nth-child(3){width:70vw;background:#F0E614}
.mg-slash-g b{font-family:var(--H);font-weight:900;font-size:min(34vh,26vw);color:#111;transform:skewX(16deg);line-height:1;background:#fff;padding:0 .1em}
@keyframes mgSlash{0%{transform:translateX(-270vw) skewX(-16deg)}48%,52%{transform:translateX(-140vw) skewX(-16deg)}100%{transform:translateX(110vw) skewX(-16deg)}}


/* ═══════════════════════════════════════════════════════════════════════════
   COHÉRENCE DU SITE — mêmes gestes et mêmes échelles sur toutes les pages
═══════════════════════════════════════════════════════════════════════════ */

/* ── Échelle de titres unique (3 niveaux, hors titre d'accueil) ─────────── */
/* XL : titre principal de chaque page */
.ph-title,.ph-title--xl,.hist-h1{font-size:clamp(3.4rem,8.5vw,9.5rem)!important;line-height:.86!important}
/* L : grands titres de section */
.story-ed-title,.bot-heading-line1,.bot-heading-line2,.mu-title-line1,.mu-title-line2,
.display.d-lg,.nl-title,.hs-concl-title{font-size:clamp(2.8rem,6.2vw,7.2rem)!important;line-height:.88!important}
/* M : titres de blocs (mises en page en colonnes, bandeaux, cartes larges) */
.hs-title,.hs-ingr-head h2,.shop-cta-text,.ckt-more-title,.art-title,.bfi-title{font-size:clamp(2.4rem,4.6vw,5.2rem)!important;line-height:.9!important}
.mgk-head .cs-title{font-size:clamp(2.4rem,min(4.6vw,8.5vh),5.2rem)!important;line-height:.9!important}

/* ── Plus de petits tirets au-dessus des titres ─────────────────────────── */
#page-home .label::before,.bot-label::before,.cs-label::before,.mu-section-label::before,.hs-kicker::before{display:none!important}
#page-home .label,.bot-label,.cs-label,.mu-section-label,.hs-kicker{gap:0!important}

/* ── Éléments : une seule apparition pour tout le site (fondu vers le haut) ── */
.rv-l,.rv-r{transform:translateY(40px)}
.rv-l.on,.rv-r.on{transform:none}

/* ── Grandes photos : elles entrent de gauche à droite, sur toutes les pages ──
   Marge de 40px : l'ombre en pointillés débordante reste visible une fois l'image entrée. */
.mg-scroll .mg-ph{clip-path:inset(-40px calc(var(--k,1) * (100% + 40px) - 40px) -40px -40px)}
.mg-scroll .hs-img img,.mg-scroll .hs-nindo-img img{transform:scale(calc(1 + var(--k,1) * .18))}

/* ── Bandeau défilant plus grand ────────────────────────────────────────── */
#page-home .marquee{padding:.85rem 0}
#page-home .marquee-i{font-size:clamp(1.2rem,2vw,1.8rem);letter-spacing:.04em;padding:0 1.4rem}
#page-home .marquee-sep svg{width:26px;height:26px}

/* ── Case jaune de l'univers manga : typographie grasse noire ───────────── */
#page-home .mu-case-sub{font-family:var(--H);font-weight:900;font-size:clamp(1.3rem,2vw,2.1rem);letter-spacing:.04em;color:#080808;margin-top:.4rem}
body.mm #page-home .mu-case-sub{color:#fff}

/* ── Agenda (accueil et page Agenda) : ligne qui se remplit de jaune au survol ── */
.ev-card,.ev[role="button"]{position:relative;isolation:isolate;padding-left:1rem;padding-right:1rem;transition:color .45s cubic-bezier(.16,1,.3,1)}
.ev-card::before,.ev[role="button"]::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--y);
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.ev-card:hover::before,.ev-card:focus-visible::before,.ev[role="button"]:hover::before,.ev[role="button"]:focus-visible::before{transform:none}
.ev-card:hover :is(.ev-day-num,.ev-month-lbl,.ev-city,.ev-title,.ev-venue),
.ev[role="button"]:hover :is(.ev-day,.ev-mo,.ev-city,.ev-name,.ev-venue){color:var(--bk)!important}
.ev-card:hover .ev-tag{background:var(--bk);color:var(--y)}
.ev-card:hover .ev-sep-line{background:rgba(8,8,8,.2)}
#page-home .ev-card::after{content:'\2192';font-size:2rem;line-height:1;color:var(--wh);padding-left:2rem;transition:transform .5s cubic-bezier(.16,1,.3,1),color .45s}
#page-home .ev-card:hover::after{transform:rotate(-45deg);color:var(--bk)}
@media (max-width:640px){#page-home .ev-card::after{display:none}}

/* ── Mouvement réduit : tout visible, rien ne bouge ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  .mg-pre{display:none}
  .mg-t{opacity:1;transform:none;clip-path:none;transition:none}
  #page-home .marquee{transform:none;margin:0}
  #page-home .shop-cta-bg,#page-home .shop-cta-bg-mm{clip-path:none}
  .mg-scroll .bot-cell,.mg-scroll .mu-case,.mg-scroll .hs-note,.mg-scroll .hs-pillars li{--p:1}
  .mg-scroll .mg-ph{--k:0}
  .arcade-card{transition:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — moins de travail pour le compositeur
═══════════════════════════════════════════════════════════════════════════ */
@media (hover:none),(pointer:coarse){
  /* pas de parallaxe du héros (magin-dyn.js) : plus besoin de marge */
  #page-home .hero-bg-wrap{inset:0}
  /* brume : 3 volutes au lieu de 7, flou réduit (blur + screen = coûteux) */
  .hero-fog .hf.w2,.hero-fog .hf.w4,.hero-fog .hf.w6,.hero-fog .hf.w7{display:none}
  .hero-fog .hf.hf{filter:blur(26px)}
  .hero-fog::before{filter:blur(18px)}
  /* barre de navigation déjà opaque à 96 % : le flou d'arrière-plan,
     recalculé à chaque image de défilement, ne se voit pas */
  #nav.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* Écran en portrait : la photo du héros est recadrée sur la bouteille,
   placée dans la partie droite de l'image. */
@media (max-aspect-ratio:1/1){
  #page-home .hero-bg-img{object-position:80% center}
}