/* Motion layer: smooth scroll, scroll reveals, parallax and micro-interactions.
   Only active when assets/js/motion.js adds .fx-on to <html> (never with reduced motion). */

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.fx-on #contenu { overflow-x: clip; }

/* Scroll progress */
.fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, #0a4d28, #11743f 55%, #3fb37a);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* Header: hides on scroll down, returns on scroll up */
.fx-on .site-header { transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.fx-header-hidden .site-header { transform: translateY(-101%); }
.fx-scrolled .site-header { box-shadow: 0 10px 30px -22px rgba(10,77,40,.45); }

/* Reveals */
.fx-on [data-fx] {
  --fx-d: 0ms;
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1) var(--fx-d),
    transform 1.1s cubic-bezier(.22,1,.36,1) var(--fx-d),
    clip-path 1.2s cubic-bezier(.77,0,.18,1) var(--fx-d),
    filter .9s cubic-bezier(.22,1,.36,1) var(--fx-d);
  will-change: opacity, transform;
}
.fx-on [data-fx="up"]:not(.fx-in) { opacity: 0; transform: translate3d(0, 46px, 0); filter: blur(6px); }
.fx-on [data-fx="title"] { clip-path: inset(-25% -10% -35% -10%); }
.fx-on [data-fx="title"]:not(.fx-in) { opacity: 0; transform: translate3d(0, .55em, 0); clip-path: inset(-25% -10% 100% -10%); }
.fx-on [data-fx="img"] { clip-path: inset(0 0 0 0); }
.fx-on [data-fx="img"]:not(.fx-in) { clip-path: inset(14% 10% 14% 10%); opacity: .2; }

/* Images: zoom settling inside the clip reveal; figures drift with scroll (translate set by JS) */
.fx-on .editorial-image { will-change: translate; }
.fx-on .editorial-image img { transition: scale 1.3s cubic-bezier(.22,1,.36,1); }
.fx-on [data-fx="img"]:not(.fx-in) img { scale: 1.18; }

/* Hero: drifting brand glow + pointer spotlight */
.fx-on .hero { position: relative; isolation: isolate; }
.fx-on .hero::before {
  content: ""; position: absolute; inset: -12% -18% -8%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 30%, rgba(63,179,122,.16), transparent 70%),
    radial-gradient(34% 40% at 82% 22%, rgba(17,116,63,.12), transparent 70%),
    radial-gradient(40% 45% at 60% 85%, rgba(223,243,230,.9), transparent 70%);
  filter: blur(20px);
  animation: fx-drift 16s ease-in-out infinite alternate;
}
.fx-on .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--fx-mx, 50%) var(--fx-my, 40%), rgba(17,116,63,.09), transparent 60%);
  opacity: var(--fx-spot, 0); transition: opacity .6s ease;
}
@keyframes fx-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.02); }
}

/* Final CTA: slow breathing glow */
.fx-on .final-cta { position: relative; isolation: isolate; }
.fx-on .final-cta::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: min(900px, 110%); aspect-ratio: 2 / 1; z-index: -1;
  translate: -50% -50%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(63,179,122,.16), transparent);
  animation: fx-breathe 7s ease-in-out infinite;
}
@keyframes fx-breathe { 50% { transform: scale(1.12); opacity: .7; } }

/* Buttons: shine sweep, arrow nudge, magnetic translate set by JS */
.fx-on .button {
  position: relative; overflow: hidden; isolation: isolate;
  transition: background .2s, border-color .2s, color .2s, translate .45s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.fx-on .button::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%);
}
.fx-on .button svg { transition: translate .35s cubic-bezier(.22,1,.36,1); }

@media (hover: hover) and (pointer: fine) {
  .fx-on .button:hover { box-shadow: 0 14px 30px -16px rgba(10,77,40,.55); }
  .fx-on .button:hover::after { transform: translateX(120%); transition: transform .8s cubic-bezier(.22,1,.36,1); }
  .fx-on .button:hover svg { translate: 4px 0; }

  /* Cards lift */
  .fx-on :is(.price-card, .benefit, .tool-group, .featured-quote, .quotes-grid > *, .audience-grid > *, .process-steps > *) {
    transition: translate .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .3s ease;
  }
  .fx-on :is(.price-card, .tool-group, .featured-quote, .quotes-grid > *):hover {
    translate: 0 -6px; box-shadow: 0 24px 50px -30px rgba(10,77,40,.4);
  }
  .fx-on :is(.benefit, .audience-grid > *, .process-steps > *):hover { translate: 0 -4px; border-color: var(--ring); }

  .fx-on :is(.desktop-nav a, .text-link) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s cubic-bezier(.22,1,.36,1); }
  .fx-on :is(.desktop-nav a, .text-link):hover { background-size: 100% 1px; }
}

@media print {
  .fx-on [data-fx] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .fx-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-on *, .fx-on *::before, .fx-on *::after { animation: none !important; transition: none !important; }
}