/* Loveen — effets de défilement (inspirés de lusion.co).
   Tout est sous html.fx : sans JavaScript, ou avec « réduire les animations », la page reste entièrement statique et lisible. */

html.fx { scroll-behavior: auto; }

/* Fond animé WebGL du haut et du bas de page */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.fx-canvas.on { opacity: 1; }

/* Barre de menu : se cache en descendant, revient en remontant */
html.fx .top { transition: transform .45s cubic-bezier(.22, 1, .36, 1), background .3s ease; will-change: transform; }
html.fx .top.fx-hide { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }

/* Titres : les mots montent depuis un masque */
html.fx .fx-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
html.fx .fx-split .wi { display: inline-block; transform: translate3d(0, 110%, 0) rotate(4deg); transform-origin: 0 100%;
  transition: transform 1.05s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 55ms); }
html.fx .fx-split.in .wi { transform: none; }

/* Blocs : apparition en fondu et en glissé, décalée */
html.fx .fx-up { opacity: 0; transform: translate3d(0, 48px, 0); transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 90ms); }
html.fx .fx-up.in { opacity: 1; transform: none; }

/* Groupes de cartes : légère déformation selon la vitesse de défilement */
html.fx .fx-skew { transform: skewY(calc(var(--fx-vel, 0) * 1deg)); transition: transform .2s linear; will-change: transform; }

/* Téléphone : profondeur 3D */
html.fx .stage { perspective: 1200px; }
html.fx .phone { transform: translate3d(0, var(--fx-py, 0px), 0) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)); transform-style: preserve-3d; will-change: transform; }

/* Section finale : s'ouvre comme une carte qui s'agrandit */
html.fx .closing { clip-path: inset(calc(var(--fx-open, 1) * 7%) calc(var(--fx-open, 1) * 5%) round calc(var(--fx-open, 1) * 48px)); will-change: clip-path; }

/* Boutons « aimantés » */
html.fx .btn-primary { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease; }

/* Barre de progression de lecture */
.fx-progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); z-index: 40;
  background: linear-gradient(90deg, #f2789c, #e8b964); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html.fx .fx-split .wi, html.fx .fx-up { transform: none !important; opacity: 1 !important; transition: none !important; }
  html.fx .closing { clip-path: none; }
  .fx-canvas, .fx-progress { display: none; }
}