/* ============================================================
   Bekef26 — Couche d'animations (reveal, parallaxe, hover, header)
   Surcouche non-destructive : ne touche pas au design system.
   ============================================================ */

/* ---------- 1. Apparition au scroll ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="scale"]{transform:scale(.965)}
[data-reveal].in{opacity:1;transform:none}
/* État final garanti : posé par JS après l'animation (ou si les transitions
   sont gelées dans un environnement non composité). Invisible sur un vrai
   navigateur car la transition est déjà terminée. */
[data-reveal].settled{opacity:1 !important;transform:none !important;transition:none !important}

/* ---------- 2. Parallaxe ---------- */
.parallax-wrap{overflow:hidden}
[data-parallax]{will-change:transform}

/* ---------- 3. Hover plus riche sur les univers ---------- */
.uni .ph img{
  transition:transform 1.1s cubic-bezier(.16,1,.3,1), filter .5s ease;
  transform:scale(1.02);
}
.uni:hover .ph img{transform:scale(1.09)}
.uni .body{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.uni:hover .body{transform:translateY(-5px)}
.uni .go{opacity:.72;transition:opacity .35s ease,transform .2s}
.uni:hover .go{opacity:1}
/* fin liseré doré qui apparaît au survol */
.uni::after{
  content:"";position:absolute;inset:0;z-index:4;border-radius:5px;pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .4s ease;
}
.uni:hover::after{box-shadow:inset 0 0 0 1px rgba(201,168,76,.45)}

/* ---------- 4. Header compact au scroll ---------- */
header.site, header{transition:background .3s ease, border-color .3s ease, box-shadow .3s ease}
header.site .nav, header .nav{transition:height .3s cubic-bezier(.16,1,.3,1)}
header.site .brand img, header .brand img{transition:height .3s cubic-bezier(.16,1,.3,1)}
header.scrolled{
  background:rgba(12,11,9,.92);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  border-bottom-color:var(--line);
}
header.scrolled .nav{height:60px}
header.scrolled .brand img{height:34px}

/* ---------- 5. Compteur animé / pastille « live » ---------- */
.count[data-count]{font-variant-numeric:tabular-nums}
.hero-strip .dot{position:relative}
.hero-strip .pulse-dot{
  width:7px;height:7px;border-radius:50%;background:#43b06a;flex:none;position:relative;
}
.hero-strip .pulse-dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:#43b06a;
  animation:pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(3.4);opacity:0}
  100%{opacity:0}
}

/* ---------- 6. Boutons : reflet doré au survol ---------- */
.btn-gold{position:relative;overflow:hidden}
.btn-gold::before{
  content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);transition:none;pointer-events:none;
}
.btn-gold:hover::before{animation:sheen .85s ease}
@keyframes sheen{to{left:140%}}

/* ---------- 7. Hero : léger flottement de la vignette ---------- */
.hero-badge{animation:badge-float 6s ease-in-out infinite}
@keyframes badge-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

/* ---------- Accessibilité : on coupe tout si demandé ---------- */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  [data-parallax]{transform:none !important}
  .hero-badge,.hero-strip .pulse-dot::after{animation:none !important}
  .btn-gold:hover::before{animation:none !important}
  .uni .ph img{transform:none}
  .uni:hover .ph img{transform:scale(1.04)}
}