/* Anastack — animations (désactivées si le visiteur a demandé moins d'animations) */

/* Transitions douces entre les pages (navigateurs récents) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: vt-in .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* Apparition au défilement */
html.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s cubic-bezier(.2,.7,.2,1) var(--d, 0s), transform .75s cubic-bezier(.2,.7,.2,1) var(--d, 0s); }
html.motion .reveal.in { opacity: 1; transform: none; }

/* Entrée du haut de page */
html.motion .hero h1, html.motion .hero p, html.motion .hero-actions, html.motion .hero-note, html.motion .hero .promise, html.motion .breadcrumbs { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
html.motion .hero h1 { animation-delay: .05s; }
html.motion .hero p { animation-delay: .18s; }
html.motion .hero-actions { animation-delay: .3s; }
html.motion .hero-note, html.motion .hero .promise { animation-delay: .42s; }
html.motion .hero-card { animation: rise-card 1.1s cubic-bezier(.2,.7,.2,1) .25s both; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes rise-card { from { opacity: 0; transform: translateY(40px) scale(.97); } }

/* La carte vidéo flotte doucement */
html.motion .hero-card .hero-shot { animation: float 7s ease-in-out 1.4s infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }

/* Micro-interactions */
.btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,22,36,.18); }
.btn:active { transform: translateY(0); }
.service, .price-card, .step, .process-step, .card, .gallery figure, .mockup, .faq details { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.price-card:hover, .step:hover, .card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(11,22,36,.10); }
.gallery figure:hover, .mockup:hover { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(11,22,36,.18); }
.service:hover .service-arrow { transform: translate(3px,-3px); }
.service-arrow { transition: transform .25s ease; display: inline-block; }

/* En-tête qui se densifie au défilement */
header.scrolled, .header.scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.22); background: rgba(11,22,36,.97) !important; }

/* Vidéos */
video.hero-shot, .demo-video { display: block; width: 100%; height: auto; border-radius: 16px; background: #0b1624; }
.demo-video { border-radius: 20px; box-shadow: 0 24px 60px rgba(11,22,36,.18); margin-top: 34px; }

@media (prefers-reduced-motion: reduce) {
  html.motion .reveal { opacity: 1; transform: none; transition: none; }
  html.motion .hero *, html.motion .hero-card, html.motion .hero-card .hero-shot { animation: none !important; }
  .btn:hover, .price-card:hover, .step:hover, .card:hover, .gallery figure:hover, .mockup:hover { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}