/* ============================================================
   scrollcraft — Fondations motion
   Tout style de mouvement DOIT être gaté sous html.has-motion.
   html.no-motion = site statique intégral (prefers-reduced-motion).
   ============================================================ */

/* ---------- split-text ---------- */
html.has-motion [data-split] .sw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
html.has-motion [data-split] .swi {
  display: inline-block;
  transform: translateY(115%) rotate(2.2deg);
  opacity: 0;
  transform-origin: 0 100%;
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
  transition-delay: calc(var(--i) * var(--stg, 0.05s));
  will-change: transform;
}
html.has-motion [data-split].split-in .swi {
  transform: none;
  opacity: 1;
}

/* variante liée au scroll : chaque mot apparaît sur une plage de --p */
html.has-motion [data-split][data-split-scroll] .swi {
  transition: none;
  --w0: calc(var(--from, 0.18) + var(--i) * var(--per, 0.05));
  --e: clamp(0, calc((var(--p, 0) - var(--w0)) / 0.12), 1);
  transform: translateY(calc((1 - var(--e)) * 115%));
  opacity: var(--e);
}

/* ---------- helpers d'entrée scroll-linked ----------
   Utiliser --p du [data-sp] ancêtre :
   .x { --e: clamp(0, calc((var(--p) - début) / durée), 1); }        */
html.has-motion .m-ease { --e: clamp(0, calc((var(--p, 0) - var(--m0, 0.12)) / var(--m1, 0.3)), 1); }

/* ---------- nav auto-hide ---------- */
html.has-motion .nav {
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
html.has-motion .nav--hidden { transform: translateY(-105%); }

/* ---------- scène épinglée générique ---------- */
html.has-motion .pin-scene { position: relative; }
html.has-motion .pin-scene > .pin-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
/* fallback statique : le wrapper ne réserve pas de hauteur */
html.no-motion .pin-scene { height: auto !important; }