/* ==========================================================================
   GLAYDZ — COUCHE FUTURISTE
   Tout est désactivable : prefers-reduced-motion coupe l'intégralité.
   Aucune couleur littérale : uniquement les jetons de marque.
   ========================================================================== */

/* --- SCÈNE : le shader vit derrière, jamais au-dessus du texte ------------ */
.fx-scene{position:relative;isolation:isolate}
.fx-scene>canvas.fx-gl{position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block}
.fx-scene>*:not(canvas){position:relative;z-index:1}
.fx-scene::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,transparent 40%,var(--gz-bg) 88%)}

/* --- TITRE À DÉGRADÉ DE MARQUE ------------------------------------------- */
.fx-grad{background:var(--gz-grad-text);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
@supports not (background-clip:text){.fx-grad{color:var(--gz-magenta-ink);-webkit-text-fill-color:currentColor}}

/* --- FILET LUMINEUX DE SECTION ------------------------------------------- */
.fx-rule{height:2px;border:0;border-radius:2px;background:var(--gz-grad-full);opacity:.9}

/* --- CARTE 3D : inclinaison au pointeur + reflet spéculaire --------------- */
.fx-tilt{transform-style:preserve-3d;will-change:transform;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));
  transition:transform var(--gz-d2) var(--gz-ease),box-shadow var(--gz-d2) var(--gz-ease)}
.fx-tilt>*{transform:translateZ(var(--z,0px))}
.fx-tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:var(--glow,0);transition:opacity var(--gz-d2) var(--gz-ease);
  background:radial-gradient(340px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 62%)}
.fx-tilt::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  opacity:var(--glow,0);transition:opacity var(--gz-d2) var(--gz-ease);
  background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),var(--gz-magenta),transparent 70%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px}

/* --- RÉVÉLATION AU DÉFILEMENT -------------------------------------------- */
.fx-in{opacity:0;transform:translateY(22px);
  transition:opacity var(--gz-d4) var(--gz-ease),transform var(--gz-d4) var(--gz-ease)}
.fx-in.is-on{opacity:1;transform:none}
.fx-stagger>*{opacity:0;transform:translateY(18px);
  transition:opacity var(--gz-d3) var(--gz-ease),transform var(--gz-d3) var(--gz-ease)}
.fx-stagger.is-on>*{opacity:1;transform:none}
.fx-stagger.is-on>*:nth-child(1){transition-delay:0ms}
.fx-stagger.is-on>*:nth-child(2){transition-delay:70ms}
.fx-stagger.is-on>*:nth-child(3){transition-delay:140ms}
.fx-stagger.is-on>*:nth-child(4){transition-delay:210ms}
.fx-stagger.is-on>*:nth-child(5){transition-delay:280ms}
.fx-stagger.is-on>*:nth-child(6){transition-delay:350ms}

/* --- COMPTEUR ------------------------------------------------------------- */
.fx-num{font-family:var(--gz-mono);font-variant-numeric:tabular-nums;font-weight:700;
  letter-spacing:-.03em;line-height:1}

/* --- BOUTON MAGNÉTIQUE ---------------------------------------------------- */
.fx-mag{will-change:transform;transition:transform var(--gz-d2) var(--gz-ease)}

/* --- PASTILLE DE MARQUE ---------------------------------------------------- */
.fx-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
  border-radius:var(--gz-r-pill);font-size:var(--gz-micro);font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;color:var(--gz-ink);
  border:1px solid var(--gz-ink-12);background:var(--gz-bg);box-shadow:var(--gz-sh-1)}
.fx-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--gz-grad-mc);
  animation:fx-pulse 2.4s var(--gz-ease) infinite}
@keyframes fx-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

/* --- LOGO ----------------------------------------------------------------- */
.gz-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.gz-logo img{height:34px;width:auto;display:block}
.gz-logo--lg img{height:56px}
.gz-logo--sm img{height:26px}

/* --- ORBE 3D (canvas dédié) ------------------------------------------------ */
.fx-orb{display:block;width:100%;aspect-ratio:1/1;max-width:520px;margin-inline:auto}

/* --- RESPECT DU MOUVEMENT RÉDUIT ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .fx-in,.fx-stagger>*{opacity:1!important;transform:none!important}
  .fx-tilt{transform:none!important}
  .fx-chip .dot{animation:none}
  canvas.fx-gl,.fx-orb{display:none!important}
}