/* anim.css — kit d'animations web vanilla. Code original, libre d'usage, aucune mention requise. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1, 1.078 30.5%, 1.004 39.5%, .981 44.6%, .983 50.5%, .999 64.3%, 1);
  --dur-s: .3s;
  --dur-m: .7s;
  --dur-l: 1.1s;
  --reveal-dist: 32px;
  --accent: #5b5bd6;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Reveal au scroll : data-reveal="up|down|left|right|fade|scale|blur|clip|clip-x" ---------- */
.js [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--dur-m) var(--ease-out) var(--d, 0s),
    transform var(--dur-m) var(--ease-out) var(--d, 0s),
    filter var(--dur-m) var(--ease-out) var(--d, 0s),
    clip-path var(--dur-l) var(--ease-in-out) var(--d, 0s);
}
.js [data-reveal="up"]    { transform: translateY(var(--reveal-dist)); }
.js [data-reveal="down"]  { transform: translateY(calc(var(--reveal-dist) * -1)); }
.js [data-reveal="left"]  { transform: translateX(calc(var(--reveal-dist) * -1)); }
.js [data-reveal="right"] { transform: translateX(var(--reveal-dist)); }
.js [data-reveal="scale"] { transform: scale(.92); }
.js [data-reveal="blur"]  { filter: blur(14px); transform: translateY(12px); }
.js [data-reveal="clip"]   { opacity: 1; clip-path: inset(0 0 100% 0); }
.js [data-reveal="clip-x"] { opacity: 1; clip-path: inset(0 100% 0 0); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; clip-path: inset(0); }

/* ---------- Texte découpé : data-split="words|chars" ---------- */
.split-word { display: inline-block; white-space: nowrap; }
.split-unit { display: inline-block; }
.js [data-split] .split-unit {
  opacity: 0;
  transform: translateY(.55em) rotate(4deg);
  transform-origin: 0 100%;
  transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out);
  transition-delay: calc(var(--i) * var(--step, 35ms) + var(--d, 0s));
}
.js [data-split].is-in .split-unit { opacity: 1; transform: none; }

/* ---------- Bandeau défilant : data-marquee="30" (secondes) ---------- */
[data-marquee] {
  --gap: 3rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; gap: var(--gap); animation: marquee var(--speed, 30s) linear infinite; }
[data-marquee]:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

/* ---------- Barre de progression de lecture ---------- */
.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); z-index: 1000; pointer-events: none; }

/* ---------- Bouton magnétique / carte inclinable ---------- */
[data-magnetic] { transition: transform .35s var(--ease-out); }
[data-tilt] { position: relative; transform-style: preserve-3d; transition: transform .4s var(--ease-out); }
[data-tilt].glare::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .35), transparent 55%);
  opacity: 0; transition: opacity .3s;
}
[data-tilt].glare:hover::after { opacity: 1; }

/* ---------- Machine à écrire : data-type="mot 1|mot 2" ---------- */
.type-caret::after { content: ""; display: inline-block; width: .08em; height: 1em; margin-left: .06em; vertical-align: -.12em; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ---------- Accordéon : [data-acc] > .acc-head + .acc-body > div ---------- */
[data-acc] .acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-s) var(--ease-out); }
[data-acc] .acc-body > * { overflow: hidden; min-height: 0; }
[data-acc].is-open .acc-body { grid-template-rows: 1fr; }
[data-acc] .acc-icon { display: inline-block; transition: transform var(--dur-s) var(--ease-out); }
[data-acc].is-open .acc-icon { transform: rotate(45deg); }

/* ---------- Ondulation au clic : data-ripple ---------- */
[data-ripple] { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .25; transform: scale(0); pointer-events: none; animation: ripple .6s var(--ease-out) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- Curseur personnalisé : <body data-cursor> ---------- */
.cursor-dot {
  position: fixed; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 9999; opacity: 0;
  transition: opacity .2s, scale .3s var(--ease-out);
}
.cursor-dot.is-on { opacity: 1; }
.cursor-dot.is-hover { scale: 3.5; }

/* ---------- Cartes empilées au scroll : data-stack ---------- */
[data-stack] > * { position: sticky; top: calc(var(--stack-top, 10vh) + var(--i, 0) * var(--stack-gap, 22px)); }

/* ---------- Écran de chargement : .page-loader ---------- */
.page-loader { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: var(--loader-bg, #0e0e10); color: #fff; transition: transform .8s var(--ease-in-out), visibility 0s .8s; }
.page-loader.is-done { transform: translateY(-100%); visibility: hidden; }
html:not(.js) .page-loader { display: none; }

/* ---------- Menu burger + panneau : button.burger[data-menu-toggle][aria-controls] ---------- */
.burger { display: inline-grid; gap: 5px; width: 28px; padding: 10px; box-sizing: content-box; background: none; border: 0; color: inherit; cursor: pointer; }
.burger span { height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-s) var(--ease-out), opacity var(--dur-s); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-panel {
  position: fixed; inset: 0; z-index: 900; visibility: hidden;
  clip-path: circle(0 at var(--menu-x, calc(100% - 34px)) var(--menu-y, 34px));
  transition: clip-path .6s var(--ease-in-out), visibility 0s .6s;
}
.menu-panel.is-open { visibility: visible; clip-path: circle(150% at var(--menu-x, calc(100% - 34px)) var(--menu-y, 34px)); transition: clip-path .6s var(--ease-in-out), visibility 0s; }
.menu-panel li { opacity: 0; transform: translateY(20px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.menu-panel.is-open li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 60ms + .2s); }

/* ---------- Effets de survol ---------- */
.link-sweep { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease-out); }
.link-sweep:hover, .link-sweep:focus-visible { background-size: 100% 1px; }
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .45) 50%, transparent 65%); transform: translateX(-100%); transition: transform .7s var(--ease-out); }
.btn-shine:hover::before { transform: translateX(100%); }
.lift { transition: transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out); }
.lift:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgb(0 0 0 / .14); }

/* ---------- Fond à bulles animées : .blobs > span*3 (parent : position:relative; isolation:isolate) ---------- */
.blobs { position: absolute; inset: 0; z-index: -1; overflow: hidden; filter: blur(60px); opacity: .7; pointer-events: none; }
.blobs span { position: absolute; width: 40vmax; aspect-ratio: 1; border-radius: 50%; background: var(--c); animation: blob 18s var(--ease-in-out) infinite alternate; }
.blobs span:nth-child(1) { --c: var(--blob-1, #7c7cf0); top: -10%; left: -10%; }
.blobs span:nth-child(2) { --c: var(--blob-2, #f0a27c); bottom: -15%; right: -10%; animation-duration: 22s; animation-delay: -6s; }
.blobs span:nth-child(3) { --c: var(--blob-3, #7cd6c4); top: 30%; left: 35%; width: 28vmax; animation-duration: 26s; animation-delay: -12s; }
@keyframes blob { 33% { transform: translate(8vw, 6vh) scale(1.1); } 66% { transform: translate(-6vw, 10vh) scale(.92); } 100% { transform: translate(4vw, -6vh) scale(1.05); } }

/* ---------- Modale native : <dialog class="anim"> ---------- */
dialog.anim {
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity var(--dur-s), transform var(--dur-s) var(--ease-out), overlay var(--dur-s) allow-discrete, display var(--dur-s) allow-discrete;
}
dialog.anim[open] { opacity: 1; transform: none; }
@starting-style { dialog.anim[open] { opacity: 0; transform: translateY(14px) scale(.98); } }
dialog.anim::backdrop { background: rgb(0 0 0 / 0); transition: background var(--dur-s), overlay var(--dur-s) allow-discrete, display var(--dur-s) allow-discrete; }
dialog.anim[open]::backdrop { background: rgb(0 0 0 / .45); }
@starting-style { dialog.anim[open]::backdrop { background: rgb(0 0 0 / 0); } }

/* ---------- Zoom lié au scroll (CSS pur, navigateurs compatibles uniquement) ---------- */
@supports (animation-timeline: view()) {
  .zoom-on-scroll { animation: zoom-in linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes zoom-in { from { scale: .86; opacity: .4; } to { scale: 1; opacity: 1; } }
}

/* ---------- Mouvement réduit : tout s'affiche, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-split] .split-unit { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .marquee-track, .blobs span, .zoom-on-scroll { animation: none !important; }
}