/* =========================================================
   Animations & micro-interactions
   ========================================================= */

/* ---------- Barre de progression de scroll ---------- */
.scroll-prog {
  position: fixed; top: 0; left: 0; height: 2.5px; width: 0%;
  background: linear-gradient(90deg, var(--accent), oklch(0.62 0.16 230));
  z-index: 100; transition: width .1s linear;
  box-shadow: 0 0 8px oklch(0.55 0.16 256 / 0.5);
}

/* ---------- Ombre de la nav au scroll ---------- */
.nav { transition: box-shadow .3s ease, background .3s ease; }
.nav.scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 30px oklch(0.45 0.03 255 / 0.06); }

/* ---------- Orbe d'accent flottant (hero) ---------- */
.hero { position: relative; overflow: hidden; }
.hero__orb {
  position: absolute; z-index: 0; pointer-events: none;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    oklch(0.7 0.14 256 / 0.22), oklch(0.7 0.14 256 / 0) 62%);
  top: -180px; right: -120px;
  filter: blur(8px);
  animation: float-orb 14s ease-in-out infinite;
}
.hero__orb--2 {
  width: 360px; height: 360px;
  background: radial-gradient(circle at 50% 50%,
    oklch(0.72 0.12 200 / 0.16), oklch(0.72 0.12 200 / 0) 60%);
  top: auto; bottom: -160px; right: 24%; left: auto;
  animation-duration: 18s; animation-direction: reverse;
}
.hero .wrap { position: relative; z-index: 1; }
@keyframes float-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-34px, 26px) scale(1.06); }
  66% { transform: translate(20px, -18px) scale(0.96); }
}

/* ---------- Entrée du hero au chargement (indépendante du scroll) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__main > * { opacity: 0; animation: rise-in .8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .hero__main > *:nth-child(1) { animation-delay: .05s; }
  .hero__main > *:nth-child(2) { animation-delay: .15s; }
  .hero__main > *:nth-child(3) { animation-delay: .25s; }
  .hero__main > *:nth-child(4) { animation-delay: .35s; }
  .hero__main > *:nth-child(5) { animation-delay: .45s; }
  .hero__card { opacity: 0; animation: rise-in .9s cubic-bezier(0.16, 1, 0.3, 1) .4s forwards; }
  /* Le hero est visible d'emblée : neutralise la classe reveal dessus */
  .hero .reveal { opacity: 1; transform: none; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Pastille mark animée ---------- */
.brand__mark { position: relative; overflow: hidden; transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.08); }
.brand__mark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, oklch(1 0 0 / 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
}
.brand:hover .brand__mark::after { animation: shine .7s ease; }
@keyframes shine { to { transform: translateX(120%); } }

/* ---------- Soulignement animé des liens nav ---------- */
.nav__links a:not(.nav__cta) { position: relative; }
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 1.5px; background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__links a:not(.nav__cta):hover::after { transform: scaleX(1); }
.nav__links a.active::after { transform: scaleX(1); opacity: 0.5; }

/* ---------- Brillance sur les boutons primaires ---------- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 35%, oklch(1 0 0 / 0.18) 50%, transparent 65%);
  transform: translateX(-130%);
}
.btn--primary:hover::before { animation: shine .8s ease; }

/* ---------- Lift + glow accent sur cartes ---------- */
.mini, .feature, .contact-card, .qual { will-change: transform; }
.mini::before, .feature::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--accent-line);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.mini, .feature { position: relative; }
.mini:hover::before, .feature:hover::before { opacity: 1; }

/* ---------- Pastille de l'eyebrow qui s'étire ---------- */
.eyebrow::before { transition: width .4s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in .eyebrow::before { animation: stretch-line .6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes stretch-line { from { width: 0; } to { width: 22px; } }

/* ---------- Points de la timeline qui apparaissent ---------- */
.tl-item::before { transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.reveal.in.tl-item::before, .tl-item.reveal.in::before { animation: pop-dot .5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pop-dot { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ---------- Interest chips: petit rebond au survol ---------- */
.interest { transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color .2s ease, background .2s ease; }
.interest:hover { transform: translateY(-3px); border-color: var(--accent-line); background: var(--accent-soft); }
.interest:hover .dot { animation: pop-dot .4s ease; }

/* ---------- Tags: lift subtil au survol du groupe ---------- */
.tag { transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease; }
.tag:hover { transform: translateY(-2px); border-color: var(--accent-line); color: var(--accent-ink); }

/* ---------- Flèche CTA qui pulse légèrement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cta .btn .arrow { animation: nudge 2.4s ease-in-out infinite; }
}
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

@media (prefers-reduced-motion: reduce) {
  .hero__orb { animation: none; }
  .hero__main > *, .hero__card { opacity: 1 !important; animation: none !important; }
}