/* =====================================================================
   AIGO · animations
   Tout le mouvement du site est ici (et dans animations.js).
   Les états cachés ne s'appliquent que sous html.anim : sans JS, tout reste visible.
   N'anime que transform, opacity et filter.
   ===================================================================== */

/* ---------- Réglages : durées et intensités ---------- */
:root{
  --a-ease:cubic-bezier(.22,1,.36,1);  /* courbe de dévoilement (rythme du site Studio 1895) */
  --a-fade:.9s;                        /* fondu d'un élément qui se dévoile */
  --a-move:1.1s;                       /* montée d'un élément qui se dévoile */
  --a-rise:30px;                       /* hauteur de la montée */
  --a-blur:8px;                        /* flou de départ */
  --a-track-step:.38s;                 /* « suivi comme un colis » : délai entre deux étapes (lu aussi par animations.js) */
  --a-blink:1.4s;                      /* cycle du voyant « EN LIGNE » */
  --a-now-pulse:2.4s;                  /* pulsation de l'étape en cours */
  --a-loot-breath:2.6s;                /* bouton « ÉCRIS-MOI » : respiration du halo */
  --a-loot-orbit:3.2s;                 /* reflet qui fait le tour de la bordure */
  --a-loot-shimmer:3s;                 /* intervalle entre deux éclats diagonaux */
  --a-loot-particle:2.8s;              /* montée d'une particule */
  --a-loot-hover:.25s;                 /* grossissement au survol */

  --loot-glint:rgba(233,244,247,.28);  /* éclat diagonal */
}

/* ---------- 1. Voyant « EN LIGNE » ---------- */
.status i{position:relative}
.status i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--pink);opacity:0;pointer-events:none}

/* ---------- 2. Cible du hero (la séquence est pilotée par animations.js) ---------- */
.hero{overflow-x:clip}                 /* la cible balaie le hero sans jamais créer de défilement */
.scope{position:relative;z-index:2;pointer-events:none}
.scope .rings,.scope .ring-dash,.scope .ring-in,.scope .core,.scope .wave{transform-box:fill-box;transform-origin:center}
.scope .wave{fill:none;stroke:var(--pink)}
.anim .scope:not(.is-in){opacity:0}

/* ---------- 3. Dévoilement au scroll ---------- */
/* Liste à garder alignée avec REVEAL et HERO dans animations.js */
.anim :is(.hero-main > :not(.hero-id), .mega, .head > *, .pillars > div, .steps > li, .plan, .terms, .monthly > div, .cases > .slot, .about .media > .slot, .about .text > p, .notfor, .faq details, .final h2, .final .wrap > div > p, .final .box, .track){
  transition:opacity var(--a-fade) var(--a-ease) var(--a-delay,0ms),transform var(--a-move) var(--a-ease) var(--a-delay,0ms),filter var(--a-fade) var(--a-ease) var(--a-delay,0ms);
}
.anim :is(.hero-main > :not(.hero-id), .mega, .head > *, .pillars > div, .steps > li, .plan, .terms, .monthly > div, .cases > .slot, .about .media > .slot, .about .text > p, .notfor, .faq details, .final h2, .final .wrap > div > p, .final .box, .track):not(.is-in){
  opacity:0;transform:translateY(var(--a-rise));filter:blur(var(--a-blur));
}

/* ---------- 4. Bouton « ÉCRIS-MOI » : effet loot ---------- */
.loot{position:relative;isolation:isolate;transition:transform var(--a-loot-hover) var(--a-ease),border-color .2s,background-color .2s}
.loot::before,.loot::after{content:"";position:absolute;pointer-events:none;z-index:-1;border-radius:4px}
.loot::before{inset:-5px;box-shadow:0 0 18px 2px var(--cyan-halo);opacity:.5}
.loot::after{inset:-9px;box-shadow:0 0 30px 8px var(--cyan-halo);opacity:0;transition:opacity var(--a-loot-hover) ease}
.loot:hover{transform:scale(1.06);border-color:var(--cyan)}
.loot:hover::after{opacity:1}
.loot-fx{position:absolute;inset:-2px;pointer-events:none;z-index:-1}
.loot-ring,.loot-shine{position:absolute;inset:0;overflow:hidden;border-radius:2px}
/* Le reflet : un cône lumineux qui tourne, découpé pour ne garder que la bordure de 2 px */
.loot-ring{padding:2px;-webkit-mask:linear-gradient(var(--text) 0 0) content-box,linear-gradient(var(--text) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--text) 0 0) content-box exclude,linear-gradient(var(--text) 0 0)}
.loot-ring::before{content:"";position:absolute;left:50%;top:50%;width:260%;aspect-ratio:1;background:conic-gradient(transparent 0 72%,var(--cyan) 88%,transparent 100%);transform:translate(-50%,-50%)}
.loot-shine::before{content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:38%;background:linear-gradient(100deg,transparent,var(--loot-glint),transparent);transform:translateX(-160%) skewX(-18deg)}
.loot-fx i{position:absolute;left:var(--x);bottom:35%;width:2px;height:2px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan-halo);opacity:0}

/* ---------- Mouvement autorisé ---------- */
@media (prefers-reduced-motion:no-preference){
  .status i{animation:status-blink var(--a-blink) ease-in-out infinite}
  .status i::after{animation:status-ping var(--a-blink) ease-out infinite}

  .now .dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--cyan);opacity:0;animation:now-ping var(--a-now-pulse) ease-out infinite}

  /* Suivi de projet : les étapes s'allument une à une, la ligne se trace entre elles */
  .anim .track li > *,.anim .track-foot{transition:opacity var(--a-track-step) var(--a-ease),transform var(--a-track-step) var(--a-ease)}
  .anim .track li:not(.lit) > *{opacity:0;transform:translateX(-10px)}
  .anim .track li:not(.lit) > .dot{transform:scale(.2)}
  .anim .track li::before{transform-origin:50% 0;transition:transform var(--a-track-step) linear}
  .anim .track li:not(.lit)::before{transform:scaleY(0)}
  .anim .track:not(.is-done) .track-foot{opacity:0;transform:translateY(8px)}

  .loot::before{animation:loot-breath var(--a-loot-breath) ease-in-out infinite}
  .loot-ring::before{animation:loot-orbit var(--a-loot-orbit) linear infinite}
  .loot-shine::before{animation:loot-shimmer var(--a-loot-shimmer) ease-in-out infinite}
  .tip:not([hidden]){animation:tip-in .2s var(--a-ease)}
  .loot-fx i{animation:loot-rise var(--a-loot-particle) ease-out infinite;animation-delay:var(--dl)}

  @keyframes status-blink{0%,40%,100%{opacity:1}55%,80%{opacity:.3}}
  @keyframes status-ping{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(3.4);opacity:0}}
  @keyframes now-ping{0%{transform:scale(.7);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}
  @keyframes loot-breath{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.035)}}
  @keyframes loot-orbit{to{transform:translate(-50%,-50%) rotate(1turn)}}
  @keyframes loot-shimmer{0%{transform:translateX(-160%) skewX(-18deg)}28%,100%{transform:translateX(320%) skewX(-18deg)}}
  @keyframes tip-in{from{opacity:0;transform:translateY(6px)}}
  @keyframes loot-rise{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(-30px)}}
}

/* ---------- Mouvement réduit : tout apparaît en simple fondu ---------- */
@media (prefers-reduced-motion:reduce){
  .anim :is(.hero-main > :not(.hero-id), .mega, .head > *, .pillars > div, .steps > li, .plan, .terms, .monthly > div, .cases > .slot, .about .media > .slot, .about .text > p, .notfor, .faq details, .final h2, .final .wrap > div > p, .final .box, .track){
    transform:none!important;filter:none!important;transition:opacity var(--a-fade) ease var(--a-delay,0ms);
  }
  .loot,.loot:hover{transform:none}
  .loot-fx{display:none}
}