/* ==========================================================================
   ValShop — effets saisonniers : calque de particules + bouton d'activation.
   Logique : public/js/seasonal-config.js (calendrier) et seasonal-fx.js (moteur).
   Le calque est derrière le contenu et ne reçoit jamais d'événement souris / tactile.
   ========================================================================== */

/* ---------- Calque (créé / retiré par le moteur) ---------- */
.fx-layer{
  position:fixed;inset:0;z-index:0;               /* même niveau que .atmos, derrière <main> (z-index:1) */
  pointer-events:none;overflow:hidden;contain:strict;
}
.fx-layer canvas{
  position:absolute;left:0;top:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.4s var(--ease-io,ease);
}
.fx-layer.in canvas{opacity:1}
.fx-layer.out{opacity:0;transition:opacity 1s var(--ease-io,ease)}      /* ancien thème qui s'estompe à un changement de thème */
.fx-ambient{position:absolute;inset:0;opacity:0;transition:opacity 2.2s var(--ease-io,ease)}
.fx-layer.in .fx-ambient{opacity:1}

/* Brume (Halloween) : grands dégradés qui dérivent très lentement, animés par le compositeur */
.fx-mist{position:absolute;border-radius:50%;will-change:transform,opacity;animation-name:fx-mist-drift,fx-mist-breathe;animation-timing-function:ease-in-out,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:alternate,alternate}
@keyframes fx-mist-drift{from{transform:translate3d(calc(var(--fx-dx) * -1),0,0)}to{transform:translate3d(var(--fx-dx),0,0)}}
@keyframes fx-mist-breathe{from{opacity:.55}to{opacity:1}}

/* ---------- Bouton (haut gauche) ---------- */
.fx-toggle{
  position:fixed;z-index:120;                      /* sous le menu mobile (150) et la navbar (200) */
  top:22px;left:calc(50% - 560px - 50px);          /* écrans larges : dans la marge, à gauche de la navbar */
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--text,#F2F3F7);
  background:rgba(14,15,21,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.1),0 10px 24px -12px rgba(0,0,0,.8);
  opacity:.72;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:opacity .25s var(--ease,ease),color .25s var(--ease,ease),background-color .25s var(--ease,ease),box-shadow .25s var(--ease,ease);
}
.fx-toggle[hidden]{display:none}
.fx-toggle:hover,.fx-toggle:focus-visible{
  opacity:1;background:rgba(28,30,40,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.18),0 10px 24px -12px rgba(0,0,0,.8);
}
.fx-toggle:focus-visible{outline:1px solid rgba(255,255,255,.45);outline-offset:2px}
.fx-toggle:active{transform:scale(.94)}

.fx-ico{display:block;overflow:visible}

/* Activé : icône claire + petit point rouge (comme le « point » du badge de la page d'accueil) */
.fx-dot{
  position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;
  background:var(--accent,#FF4655);box-shadow:0 0 0 2px rgba(14,15,21,.95);
  transform:scale(1);transition:transform .25s var(--ease,ease);
}
/* Désactivé : icône atténuée, barrée, sans point */
.fx-toggle.is-off{color:var(--muted,#8A8D9B);opacity:.55}
.fx-toggle.is-off:hover,.fx-toggle.is-off:focus-visible{opacity:.95;color:var(--text-2,#A3A5B2)}
.fx-toggle.is-off .fx-dot{transform:scale(0)}
.fx-slash-bg,.fx-slash{stroke-dasharray:23;stroke-dashoffset:23;transition:stroke-dashoffset .28s var(--ease,ease)}
.fx-slash-bg{stroke:#0E0F15;stroke-width:4.6}
.fx-toggle.is-off .fx-slash-bg,.fx-toggle.is-off .fx-slash{stroke-dashoffset:0}

/* Pendant le défilement le bouton s'efface davantage (classe posée par motion.js) */
html.is-scrolling .fx-toggle:not(:hover):not(:focus-visible){opacity:.3}

/* Écrans moyens et petits : la navbar occupe toute la largeur → le bouton passe juste dessous, à gauche */
@media (max-width:1259px){
  .fx-toggle{top:76px;left:max(10px,env(safe-area-inset-left));width:32px;height:32px}
}
@media (max-width:720px){
  .fx-toggle{top:62px;left:max(8px,env(safe-area-inset-left));width:30px;height:30px}
  .fx-dot{top:2px;right:2px}
}
/* Tactile : zone de toucher agrandie (≈ 44 px) sans agrandir le bouton */
@media (pointer:coarse){
  .fx-toggle::before{content:"";position:absolute;inset:-7px;border-radius:50%}
}

/* Mouvement réduit / impression : rien du tout */
@media (prefers-reduced-motion:reduce){
  .fx-layer,.fx-toggle{display:none!important}
}
@media print{
  .fx-layer,.fx-toggle{display:none!important}
}