/* ===================================================================
   ASCENSION — ANIMATIONS DE L'ACCUEIL
   Chargé UNIQUEMENT par index.php, via $styles_sup.

   ⛔ RÈGLE TENUE DANS TOUT CE FICHIER : on n'anime que `transform`,
      `opacity` et `filter`. Jamais `top`, `left`, `width`, `height` ni
      quoi que ce soit qui force le navigateur à recalculer la mise en
      page — c'est ce qui fait ramer une page sur une machine modeste,
      et les joueurs n'ont pas tous une bête de course.

   Tout s'éteint si le visiteur a demandé moins d'animations, ou s'il
   clique sur « Réduire les animations » (classe .hw-calme sur <html>).
   =================================================================== */

/* ------------------------------------------------------ aurore de fond
   Deux voiles de couleur qui tournent lentement derrière le héros. */
.hw-aurore{
  position:absolute;inset:-30% -10%;z-index:0;pointer-events:none;
  filter:blur(70px);opacity:.5;
}
.hw-aurore i{
  position:absolute;display:block;border-radius:50%;mix-blend-mode:screen;
}
.hw-aurore i:nth-child(1){
  width:52%;height:62%;left:4%;top:8%;
  background:radial-gradient(circle,rgba(255,138,43,.55),transparent 65%);
  animation:hw-aurore1 26s ease-in-out infinite alternate;
}
.hw-aurore i:nth-child(2){
  width:46%;height:56%;right:2%;top:22%;
  background:radial-gradient(circle,rgba(180,71,47,.45),transparent 65%);
  animation:hw-aurore2 34s ease-in-out infinite alternate;
}
.hw-aurore i:nth-child(3){
  width:38%;height:44%;left:34%;bottom:-6%;
  background:radial-gradient(circle,rgba(127,227,192,.22),transparent 65%);
  animation:hw-aurore3 44s ease-in-out infinite alternate;
}
@keyframes hw-aurore1{to{transform:translate3d(9%,-6%,0) scale(1.25)}}
@keyframes hw-aurore2{to{transform:translate3d(-11%,7%,0) scale(1.18)}}
@keyframes hw-aurore3{to{transform:translate3d(6%,-9%,0) scale(1.3)}}

/* ------------------------------------------------------ éclair d'orage
   Un flash blanc très bref, déclenché par le script à intervalle
   irrégulier. Opacité seule : c'est gratuit pour le navigateur. */
.hw-eclair{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(255,250,235,.85),rgba(255,230,190,.25) 40%,transparent 70%);
}
.hw-eclair.frappe{animation:hw-flash 1.1s ease-out}
@keyframes hw-flash{
  0%{opacity:0}4%{opacity:.85}9%{opacity:.08}
  13%{opacity:.7}20%{opacity:.04}
  26%{opacity:.45}34%{opacity:0}100%{opacity:0}
}

/* ------------------------------------------------- lanterne du curseur
   Une lueur douce qui suit la souris. Positionnée par translate3d
   depuis le script, jamais par top/left. */
.hw-lanterne{
  position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;
  z-index:1;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle,rgba(255,170,80,.16),rgba(255,140,40,.06) 38%,transparent 68%);
  will-change:transform;
}
.hw-lanterne.vue{opacity:1}

/* ------------------------------------------------------------ araignée
   Elle descend de son fil dans un coin, s'arrête, remonte. */
.hw-araignee{
  position:fixed;top:0;right:11vw;z-index:4;pointer-events:none;
  color:var(--doux);transform:translate3d(0,-200px,0);
  animation:hw-descend 19s ease-in-out infinite;
}
.hw-araignee .fil{display:block;width:1px;height:150px;margin:0 auto;
  background:linear-gradient(180deg,transparent,currentColor)}
.hw-araignee svg{width:26px;display:block;margin:-2px auto 0}
.hw-araignee .patte{animation:hw-pattes 1.4s ease-in-out infinite alternate;transform-origin:center}
@keyframes hw-descend{
  0%,100%{transform:translate3d(0,-200px,0)}
  18%,46%{transform:translate3d(0,0,0)}
  30%{transform:translate3d(0,22px,0)}
}
@keyframes hw-pattes{from{transform:scaleX(1)}to{transform:scaleX(.86)}}

/* ------------------------------------------------- titre lettre à lettre */
.hw-lettre{
  display:inline-block;opacity:0;
  transform:translate3d(0,22px,0) rotate(6deg);
  animation:hw-lettre .62s cubic-bezier(.2,.8,.25,1) forwards;
}
@keyframes hw-lettre{to{opacity:1;transform:none}}

/* un halo qui respire derrière le titre */
.heros-texte h1{position:relative}
.heros-texte h1::before{
  content:"";position:absolute;left:-8%;right:-8%;top:-20%;bottom:-20%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(255,138,43,.16),transparent 68%);
  filter:blur(26px);animation:hw-souffle 6s ease-in-out infinite;
}
@keyframes hw-souffle{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

/* ------------------------------------------------------------- boutons
   Un reflet qui balaie le bouton plein, et un léger soulèvement. */
.heros-boutons .bouton{position:relative;overflow:hidden;will-change:transform}
.heros-boutons .bouton::after{
  content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-18deg);
}
.heros-boutons .bouton-plein::after{animation:hw-reflet 4.6s ease-in-out infinite}
.heros-boutons .bouton:hover::after{animation:hw-reflet .75s ease-out}
@keyframes hw-reflet{0%{transform:translateX(0) skewX(-18deg)}
  22%,100%{transform:translateX(420%) skewX(-18deg)}}

/* --------------------------------------------------- chiffres de l'état */
.etat .val{font-variant-numeric:tabular-nums}
.etat > div{
  transition:transform .35s cubic-bezier(.22,.61,.36,1);will-change:transform;
}
.etat > div:hover{transform:translateY(-4px)}
.etat .pastille.on{animation:hw-pouls 2.1s ease-out infinite}
@keyframes hw-pouls{
  0%{box-shadow:0 0 0 0 rgba(127,227,192,.55)}
  70%{box-shadow:0 0 0 14px rgba(127,227,192,0)}
  100%{box-shadow:0 0 0 0 rgba(127,227,192,0)}
}

/* ----------------------------------------------------- cartes en relief
   L'inclinaison est posée par le script en variables CSS : une seule
   propriété animée, et aucun recalcul de mise en page. */
.hw-tete,.hw-recompense,.carte{
  transform:perspective(900px)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translateZ(0);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s;
  will-change:transform;
}
.hw-tete::after,.hw-recompense .hw-lueur,.carte::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .3s;border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
             rgba(255,138,43,.16),transparent 62%);
}
.hw-tete:hover::after,.carte:hover::after{opacity:1}
.carte{position:relative;overflow:hidden}

/* ------------------------------------------------- apparition au défilé */
.hw-monte{opacity:0;transform:translate3d(0,30px,0)}
.hw-monte.hw-vu{
  opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.22,.61,.36,1) var(--retard,0s),
             transform .75s cubic-bezier(.22,.61,.36,1) var(--retard,0s);
}

/* ------------------------------------------------- chiffres du décompte
   Chaque case bascule quand sa valeur change. */
.hw-case b{display:block;will-change:transform}
.hw-case b.hw-bascule{animation:hw-bascule .45s cubic-bezier(.3,.9,.3,1)}
@keyframes hw-bascule{
  0%{transform:rotateX(0) translateZ(0)}
  45%{transform:rotateX(-88deg) translateZ(0);opacity:.25}
  100%{transform:rotateX(0) translateZ(0)}
}

/* ------------------------------------------------- bouton « plus calme » */
.hw-calmer{
  position:fixed;right:14px;bottom:14px;z-index:50;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:40px;cursor:pointer;
  background:rgba(10,7,8,.82);border:1px solid var(--trait);
  color:var(--doux);font:500 12.5px/1 inherit;letter-spacing:.04em;
  backdrop-filter:blur(8px);transition:all .3s;
}
.hw-calmer:hover{border-color:var(--ambre);color:var(--or)}
.hw-calmer svg{width:14px;height:14px}

/* =============================================== tout couper ===========
   Un seul endroit : la classe sur <html>, ou le réglage du système. */
html.hw-calme .hw-aurore,
html.hw-calme .hw-eclair,
html.hw-calme .hw-lanterne,
html.hw-calme .hw-araignee{display:none}
html.hw-calme .hw-monte{opacity:1;transform:none}
html.hw-calme *,
html.hw-calme *::before,
html.hw-calme *::after{animation:none!important;transition:none!important}

@media (prefers-reduced-motion:reduce){
  .hw-aurore,.hw-eclair,.hw-lanterne,.hw-araignee{display:none}
  .hw-monte{opacity:1;transform:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Sur petit écran, on allège d'office : ni lanterne, ni araignée, ni
   aurore. Ce sont les machines et les forfaits les plus modestes. */
@media (max-width:860px){
  .hw-lanterne,.hw-araignee,.hw-aurore{display:none}
}