/* ============================================================
   Accueil animé (index.html uniquement).
   S'ajoute à cards.css. Logique dans assets/js/anim.js.
   --dwell-wait / --dwell-fill doivent rester égaux aux durées
   DWELL_WAIT / DWELL_FILL de anim.js.
   ============================================================ */
.anim{ --dwell-wait:.35s; --dwell-fill:1.4s; --ease-out:cubic-bezier(.2,.8,.2,1); }

/* ---------- entrée du hero ---------- */
.anim .topo-wrap::before{
  animation: topo-in 2.6s var(--ease-out) both, topo-drift 46s ease-in-out 2.6s infinite alternate;
}
@keyframes topo-in{ from{ opacity:0; transform:scale(1.18); } to{ opacity:.34; transform:scale(1); } }
@keyframes topo-drift{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.12) translate(-2.5%,1.5%); } }
.anim .topo-wrap{ overflow:hidden; }

/* loupe : les mêmes courbes en bleu, visibles seulement autour du curseur
   (calque ajouté par anim.js, qui pose --lx / --ly). Il suit la même dérive que le
   fond gris pour rester exactement superposé. */
.topo-ink{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url(../img/topo-main-bleu.svg) center / cover no-repeat;
  -webkit-mask-image:radial-gradient(200px circle at var(--lx,50%) var(--ly,50%), #000 30%, transparent);
  mask-image:radial-gradient(200px circle at var(--lx,50%) var(--ly,50%), #000 30%, transparent);
  filter:var(--topo-bleu);
  opacity:0; transition:opacity .5s ease;
  animation: topo-ink-in 2.6s var(--ease-out) both, topo-drift 46s ease-in-out 2.6s infinite alternate;
}
@keyframes topo-ink-in{ from{ transform:scale(1.18); } to{ transform:scale(1); } }
.topo-wrap.has-loupe .topo-ink{ opacity:1; }

.anim .cards-hero h1{ overflow:hidden; padding-bottom:.08em; }
.anim .cards-hero h1 .ch{
  display:inline-block;
  animation: letter-up 1s var(--ease-out) both;
  animation-delay: calc(var(--i) * 80ms + .15s);
}
@keyframes letter-up{ from{ transform:translateY(115%) rotate(6deg); } to{ transform:none; } }

.anim .cards-hero .eyebrow{ animation: fade-up .8s var(--ease-out) .05s both; }
.anim .cards-hero .lead{ animation: fade-up .9s var(--ease-out) .75s both; }
@keyframes fade-up{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* ---------- cards : entrée, survol, attente ---------- */
.anim .card{
  overflow:hidden;
  animation: card-in .9s var(--ease-out) backwards;
  animation-delay: calc(var(--i) * 90ms + 1.05s);
  transition: opacity .35s ease;
  /* halo qui suit le curseur (--mx / --my posés par anim.js) */
  background-image: radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb, var(--ink) var(--spot,0%), transparent), transparent 70%);
}
@keyframes card-in{ from{ opacity:0; transform:translateY(40px); clip-path:inset(0 0 100% 0); } to{ opacity:1; transform:none; clip-path:inset(0); } }

/* annule l'inversion immédiate de cards.css : ici la surbrillance est progressive */
.anim .card:hover, .anim .card:focus-visible{ background-color:transparent; color:var(--ink); --spot:9%; }
.anim .card:hover > ::before, .anim .card:focus-visible > ::before{ opacity:1; }
.anim .card:hover .card-num, .anim .card:hover .card-desc,
.anim .card:focus-visible .card-num, .anim .card:focus-visible .card-desc{ color:var(--ink-soft); }
.anim .card:hover .card-num, .anim .card:focus-visible .card-num{ color:var(--bleu); }
.anim .card:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.anim .cards:hover .card:not(:hover){ opacity:.45; }

/* grand numéro fantôme */
.anim .card::after{
  content:attr(data-num); position:absolute; right:-.04em; bottom:-.2em; z-index:-1;
  font-family:var(--serif-display); font-weight:700; line-height:1;
  font-size:clamp(150px,19vw,260px);
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--ink) 22%, transparent);
  transform:translate(12%,18%); opacity:.5;
  transition: transform .7s var(--ease-out), opacity .5s ease;
}
.anim .card:hover::after{ transform:none; opacity:1; }

/* pas de transform sur le texte : il isolerait son halo au-dessus du remplissage */
.anim .card-title{ transition: letter-spacing .5s var(--ease-out); }
.anim .card:hover .card-title{ letter-spacing:.16em; }
.anim .card-more{ transition: margin-left .4s var(--ease-out); }
.anim .card:hover .card-more{ margin-left:10px; }

/* remplissage progressif pendant qu'on reste sur la card */
.card-fill{
  /* même niveau que les halos du texte, mais placé après eux : il les recouvre */
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:color-mix(in srgb, var(--ink) 16%, var(--paper));
  transform:scaleY(0); transform-origin:bottom;
  transition: transform .3s ease;
}
.card-fill::after{ /* trait de progression au sommet du remplissage */
  content:''; position:absolute; left:0; right:0; top:0; height:2px; background:var(--bleu);
}
.card.is-dwelling .card-fill{
  transform:scaleY(1);
  transition: transform var(--dwell-fill) linear var(--dwell-wait);
}
.card.is-dwelling{ box-shadow: inset 0 0 0 2px var(--ink); transition: box-shadow .3s ease var(--dwell-wait), opacity .35s ease; }

/* ---------- zoom vers la page ---------- */
.zoom-bg{ position:fixed; z-index:100; background:var(--ink); pointer-events:none; }
.zoom-title{
  position:fixed; z-index:101; margin:0; pointer-events:none;
  font-family:var(--display); font-weight:400; text-transform:uppercase; line-height:1.05;
  letter-spacing:.12em; color:var(--paper);
}
body.is-leaving{ overflow:hidden; }
body.is-leaving .topbar, body.is-leaving .cards-hero{
  opacity:0; transition:opacity .45s ease;
}

@media (prefers-reduced-motion: reduce){
  .anim .topo-wrap::before, .topo-ink, .anim .cards-hero h1 .ch, .anim .cards-hero .eyebrow,
  .anim .cards-hero .lead, .anim .card{ animation:none; }
  .anim .card::after, .anim .card-title, .anim .card-more, .card-fill{ transition:none; }
}