/* Forge Gaming — mouvement : entrées, vie au repos, apparitions au défilement, micro-interactions.
   Règles :
   - uniquement transform et opacity (plus le canvas des braises) ;
   - tous les états cachés de départ sont sous html.anim, posée par le script de <head> seulement si le JavaScript
     tourne ET que « réduire les animations » n'est pas demandé. Sans JS : tout est visible. Filet à 2 s ;
   - aucune animation de mascotte : les médaillons gardent les animations d'Hugo (mascottes/mascotte.js) ;
   - « réduire les animations » : site.css coupe toutes les animations et transitions. */
:root{
  --e-sortie:cubic-bezier(.16,1,.3,1);
  --e-rebond:cubic-bezier(.34,1.5,.64,1);
  --e-souple:cubic-bezier(.4,0,.2,1);
}

/* ================= Micro-interactions (toutes les pages) ================= */
.bouton{position:relative;isolation:isolate}
.bouton::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 10px 30px -8px rgba(242,138,20,.75);opacity:0;transition:opacity .3s var(--e-souple);z-index:-1;pointer-events:none}
.bouton.creux::after{box-shadow:0 0 26px -6px rgba(242,138,20,.5)}
.bouton:hover,.bouton:focus-visible{box-shadow:none}
.bouton:hover::after,.bouton:focus-visible::after{opacity:1}
.bouton:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.bouton .fleche{display:inline-block;transition:transform .35s var(--e-sortie)}
.bouton:hover .fleche,.bouton:focus-visible .fleche,.legende a:hover .fleche{transform:translateX(5px)}

/* Liens de la nav : soulignement orange qui se dessine de gauche à droite */
nav a:not(.bouton){position:relative}
nav a:not(.bouton)::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--e-sortie)}
nav a:not(.bouton):hover::after,nav a:not(.bouton):focus-visible::after{transform:scaleX(1)}

/* Fiches du lobby : la vignette se redresse et grandit au survol */
.ligne-jeu .mini{display:block}
.ligne-jeu .mini img{transform:rotate(-3deg);transition:transform .5s var(--e-sortie)}
.ligne-jeu:hover .mini img,.ligne-jeu:focus-within .mini img{transform:rotate(0) scale(1.06)}

/* ================= Accueil : vie au repos ================= */
/* Les cartes flottent de quelques pixels, chacune à son rythme */
.flotte{animation:flotte 6s ease-in-out infinite;will-change:transform}
.pose.gore .flotte{animation-duration:6.4s;animation-delay:-1.2s}
.pose.core .flotte{animation-duration:5.6s;animation-delay:-3s}
.pose.lr .flotte{animation-duration:7.2s;animation-delay:-.5s}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Reflet de métal chaud qui balaie une carte de temps en temps (une carte à la fois) */
.reflet{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,206,140,.30) 50%,transparent 62%);transform:translateX(-130%);animation:reflet 9s var(--e-souple) infinite}
.pose.gore .reflet{animation-delay:2s}
.pose.core .reflet{animation-delay:5s}
.pose.lr .reflet{animation-delay:8s}
@keyframes reflet{0%,84%{transform:translateX(-130%)}97%,100%{transform:translateX(130%)}}

/* Tilt de l'éventail à la souris (piloté par js/mouvement.js, ordinateur seulement) */
html.anim .eventail{will-change:transform}
#games{overflow-x:clip} /* les fiches qui arrivent de côté ne créent pas de défilement horizontal */
/* La lueur de forge respire très lentement (opacité seule, cycle de 6 s) */
.hero-lueur::before{animation:respire 6s ease-in-out infinite}
.hero-lueur::after{animation:respire 6s ease-in-out -3s infinite}
@keyframes respire{0%,100%{opacity:1}50%{opacity:.78}}

/* Braises (canvas) */
.braises{position:absolute;top:0;left:0;width:100%;height:var(--hero-h);z-index:-1;pointer-events:none;display:block}
html:not(.anim) .braises{display:none}

/* Indicateur « scroll » (ordinateur) */
.hero{position:relative}
.defiler{display:none}
@media (min-width:981px) and (hover:hover){
  .hero{padding-bottom:clamp(64px,6vw,88px)}
  .defiler{position:absolute;left:50%;bottom:6px;display:grid;justify-items:center;gap:6px;margin-left:-24px;width:48px;color:var(--doux);font-family:var(--chiffre);font-weight:600;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}
  .defiler:hover{color:var(--texte)}
  .souris{width:22px;height:34px;border:1.5px solid var(--ligne-forte);border-radius:12px;display:grid;justify-items:center;padding-top:6px}
  .souris span{width:3px;height:7px;border-radius:2px;background:var(--accent);animation:molette 2s var(--e-sortie) infinite}
  @keyframes molette{0%{transform:translateY(0);opacity:0}20%{opacity:1}75%{transform:translateY(10px);opacity:0}100%{opacity:0}}
}

/* ================= Accueil : séquence d'entrée du haut de page (≈ 1,6 s) ================= */
html.anim .hero .ligne{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
html.anim .hero .ligne>span{display:inline-block;transform:translateY(108%)}
html.anim .hero h1.libre .ligne{overflow:visible}
html.anim .hero .etiquette,html.anim .hero .sous,html.anim .hero-titre>p:not(.sous),html.anim .hero .actions,html.anim .chiffres-hero,html.anim .defiler{opacity:0;transform:translateY(18px)}
html.anim .pose{opacity:0}
html.anim .pose.gore{transform:translate(-26%,62%) rotate(-26deg) scale(.88)}
html.anim .pose.lr{transform:translate(26%,62%) rotate(26deg) scale(.88)}
html.anim .pose.core{transform:translateY(70%) rotate(-10deg) scale(.88)}

html.anim .hero.entree .etiquette{--d:0ms}
html.anim .hero.entree .ligne:nth-of-type(1)>span{--d:60ms}
html.anim .hero.entree .ligne:nth-of-type(2)>span{--d:170ms}
html.anim .hero.entree .sous{--d:280ms}
html.anim .hero.entree .hero-titre>p:not(.sous){--d:340ms}
html.anim .hero.entree .actions{--d:400ms}
html.anim .hero.entree .chiffres-hero{--d:460ms}
html.anim .hero.entree .defiler{--d:1300ms}
html.anim .hero.entree .pose.gore{--d:180ms}
html.anim .hero.entree .pose.lr{--d:320ms}
html.anim .hero.entree .pose.core{--d:460ms}
html.anim .hero.entree .ligne>span{transform:none;transition:transform .75s var(--e-sortie) var(--d)}
html.anim .hero.entree :is(.etiquette,.sous,.hero-titre>p:not(.sous),.actions,.chiffres-hero,.defiler){opacity:1;transform:none;transition:opacity .55s var(--e-souple) var(--d),transform .7s var(--e-sortie) var(--d)}
html.anim .hero.entree .pose{opacity:1;transform:none;transition:opacity .3s var(--e-souple) var(--d),transform .8s var(--e-rebond) var(--d)}

/* « anvil. » : bref éclat orange, comme un coup de marteau */
.hero .coup{position:relative;display:inline-block}
.hero .coup::after{content:"";position:absolute;left:-12%;right:-12%;top:-20%;bottom:-20%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,170,60,.55),rgba(242,138,20,.18) 55%,transparent);opacity:0;pointer-events:none;mix-blend-mode:screen}
html.anim .hero.entree .coup{animation:coup .5s var(--e-rebond) .62s both}
html.anim .hero.entree .coup::after{animation:eclat .8s var(--e-souple) .62s both}
@keyframes coup{0%{transform:scale(1)}30%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes eclat{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}

/* ================= Fiches de jeux : entrée du haut de fiche ================= */
html.anim .une .statut,html.anim .une .texte>p,html.anim .une .actions{opacity:0;transform:translateY(18px)}
html.anim .une h1{overflow:hidden}
html.anim .une h1 img{transform:translateY(108%)}
html.anim .une.entree-finie h1{overflow:visible}
html.anim .une .vignette-une{opacity:0;transform:translate(48px,70px) rotate(14deg) scale(.9)}
html.anim .une.entree .statut{--d:0ms}
html.anim .une.entree h1 img{--d:80ms}
html.anim .une.entree .texte>p{--d:300ms}
html.anim .une.entree .actions{--d:380ms}
html.anim .une.entree .vignette-une{--d:200ms}
html.anim .une.entree :is(.statut,.texte>p,.actions){opacity:1;transform:none;transition:opacity .55s var(--e-souple) var(--d),transform .7s var(--e-sortie) var(--d)}
html.anim .une.entree h1 img{transform:none;transition:transform .8s var(--e-sortie) var(--d)}
html.anim .une.entree .vignette-une{opacity:1;transform:none;transition:opacity .35s var(--e-souple) var(--d),transform .9s var(--e-rebond) var(--d)}

/* ================= Au défilement : chaque bloc entre en arrivant à l'écran ================= */
html.anim :is(.entete,.ligne-jeu,.ticker,.case,.fiche,.deux .intro,.points li,.tableau,.galerie figure,.demo,.lobby .tuile,footer){opacity:0;transform:translateY(28px);transition:opacity .6s var(--e-souple) var(--d,0ms),transform .85s var(--e-sortie) var(--d,0ms)}
html.anim .ligne-jeu:nth-child(odd){transform:translateX(-56px)}
html.anim .ligne-jeu:nth-child(even){transform:translateX(56px)}
html.anim .bento .case{transform:translateY(-34px)}
html.anim :is(.entete,.ligne-jeu,.ticker,.case,.fiche,.deux .intro,.points li,.tableau,.galerie figure,.demo,.lobby .tuile,footer).vu{opacity:1;transform:none}
/* Titres de section : entrée par masque */
html.anim .entete h2 .masque{display:block;overflow:hidden;padding-bottom:.06em}
html.anim .entete h2 .masque>span{display:block;transform:translateY(105%);transition:transform .85s var(--e-sortie) calc(var(--d,0ms) + 120ms)}
html.anim .entete.vu h2 .masque>span{transform:none}

@media (max-width:640px){
  html.anim .ligne-jeu:nth-child(odd){transform:translateX(-32px)}
  html.anim .ligne-jeu:nth-child(even){transform:translateX(32px)}
}
@media (prefers-reduced-motion:reduce){
  .flotte,.reflet,.souris span{animation:none!important}
  .reflet{display:none}
}