/* ============================================================
   L'APPEL — Effets visuels partagés (fx.css)
   Apparition en cascade, micro-interactions, ambiance dorée.
   Respecte prefers-reduced-motion.
   ============================================================ */

/* --- Poussière dorée flottante en fond --- */
#fx-dust{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#fx-dust .mote{position:absolute;bottom:-10px;border-radius:50%;
  background:radial-gradient(circle, var(--gold-bright,#e9c878), transparent 70%);
  opacity:0;animation:fxRise linear infinite}
@keyframes fxRise{
  0%{opacity:0;transform:translateY(0) translateX(0) scale(.6)}
  10%{opacity:.5}
  90%{opacity:.4}
  100%{opacity:0;transform:translateY(-105vh) translateX(var(--drift,20px)) scale(1)}
}

/* le contenu doit passer au-dessus de la poussière */
.wrap, nav#topnav{position:relative;z-index:2}
/* éléments déjà en position:fixed : on relève seulement leur z-index (sans toucher au position) */
#amb-ctl{z-index:60}
#auth-badge{z-index:80}
#auth-gate{z-index:500}

/* --- Apparition en cascade des éléments --- */
@keyframes fxFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.fx-in{opacity:0;animation:fxFadeUp .65s cubic-bezier(.2,.8,.25,1) forwards}

/* --- Halo doré pulsant sur les titres principaux --- */
@keyframes fxGlow{0%,100%{filter:drop-shadow(0 0 12px rgba(201,161,74,.15))}50%{filter:drop-shadow(0 0 26px rgba(201,161,74,.4))}}
.fx-glow{animation:fxGlow 4.5s ease-in-out infinite}
/* Quand un titre a les deux classes : il doit apparaître ET pulser (sinon fx-glow écrase fx-in et le titre reste invisible) */
.fx-glow.fx-in{opacity:0;animation:fxFadeUp .65s cubic-bezier(.2,.8,.25,1) forwards, fxGlow 4.5s ease-in-out .65s infinite}

/* --- Micro-interaction : cartes qui se soulèvent au survol --- */
.card{transition:transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s, border-color .3s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 40px -12px rgba(0,0,0,.6), 0 0 30px -10px var(--gold,#c9a14a)}

/* --- Boutons : ressort + lueur --- */
.btn{transition:transform .2s cubic-bezier(.2,.8,.25,1), box-shadow .25s, filter .25s}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.95)}

/* --- Chips & onglets : transition douce --- */
.chip,.tab,.amb-chip,.met-chip{transition:all .22s cubic-bezier(.2,.8,.25,1)}

/* --- Liens de nav : soulignement qui glisse --- */
#topnav a{position:relative}
#topnav a::after{content:"";position:absolute;left:50%;right:50%;bottom:3px;height:1.5px;background:var(--gold-bright,#e9c878);transition:left .25s ease,right .25s ease;opacity:.85}
#topnav a:hover::after{left:18%;right:18%}
#topnav a.active::after{left:0;right:0;opacity:0}

/* --- Barres de progression : ondulation de surface (effet liquide) --- */
.bar>i,.rbar>i{position:relative;overflow:hidden}
.bar>i::after,.rbar>i::after{content:"";position:absolute;left:0;right:0;top:0;height:60%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 Q10 0 20 6 T40 6 V0 H0 Z' fill='rgba(255,255,255,0.22)'/%3E%3C/svg%3E");
  background-size:40px 100%;background-repeat:repeat-x;
  animation:fxWave 2.6s linear infinite;pointer-events:none}
@keyframes fxWave{from{background-position:0 0}to{background-position:40px 0}}
/* légère pulsation lumineuse pour donner vie au liquide */
.bar>i,.rbar>i{animation:fxSwell 4.5s ease-in-out infinite}
@keyframes fxSwell{50%{filter:brightness(1.07)}}

/* --- Respecte le confort : coupe les animations si demandé --- */
@media (prefers-reduced-motion: reduce){
  .fx-in,.fx-glow.fx-in{opacity:1;animation:none}
  #fx-dust,.fx-glow{animation:none}
  .bar>i::after,.rbar>i::after{animation:none;display:none}
  .bar>i,.rbar>i{animation:none}
  .card:hover{transform:none}
}