/* Cabinet IZA — couche d'animations (js/animations.js).
   Rien ne change dans le contenu ni la mise en page : uniquement du mouvement.
   Tout s'éteint si le visiteur a demandé « réduire les animations », et si le script échoue la page reste lisible. */

:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); }

/* ══ Préchargeur : le symbole, un compteur, un filet ══ */
.loader { display: none; }
html.anim .loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--color-bg); color: var(--color-text);
  transition: clip-path 1s var(--ease-io), visibility 0s 1s; clip-path: inset(0 0 0 0);
}
html.anim .loader.is-done { clip-path: inset(0 0 100% 0); visibility: hidden; pointer-events: none; }
.loader__in { display: grid; justify-items: center; gap: 22px; width: min(300px, 68vw); }
.loader__mark { width: 56px; height: 56px; animation: loader-rise 0.9s var(--ease-out) backwards; }
.loader__val { font-family: var(--font-heading); font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: -0.02em; font-feature-settings: 'tnum' 1; }
.loader__val small { font-size: 0.34em; margin-left: 0.15em; color: var(--color-accent-700); letter-spacing: 0.1em; }
.loader__bar { width: 100%; height: 1px; background: color-mix(in srgb, var(--color-text) 16%, transparent); overflow: hidden; }
.loader__bar span { display: block; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; }
@keyframes loader-rise { from { opacity: 0; transform: translateY(14px) scale(0.92); } to { opacity: 1; transform: none; } }

/* ══ Titres : chaque ligne monte depuis son propre masque ══ */
.ln { display: block; overflow: hidden; padding: 0.09em 0.06em; margin: -0.09em -0.06em; }
.ln__i { display: block; will-change: transform; }
html.anim .hero:not(.is-in) .ln__i,
html.anim .ln-split:not(.is-in) .ln__i { transform: translate3d(0, 112%, 0); }
.hero.is-in .ln__i, .ln-split.is-in .ln__i { transition: transform 1.25s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms + var(--base, 0ms)); transform: none; }
.hero .ln__i { --base: 150ms; }

/* ══ Entrée du hero, après le préchargeur ══ */
html.anim .hero:not(.is-in) :is(.hero__top, .hero__lead, .hero__cta, .hero__tour, .stat) { opacity: 0; transform: translate3d(0, 26px, 0); }
.hero.is-in :is(.hero__top, .hero__lead, .hero__cta, .hero__tour, .stat) { transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: var(--d, 0ms); }
.hero.is-in .hero__top { --d: 80ms; }
.hero.is-in .hero__lead { --d: 650ms; }
.hero.is-in .hero__cta { --d: 780ms; }
.hero.is-in .hero__tour { --d: 900ms; }
.hero.is-in .stat:nth-child(1) { --d: 950ms; } .hero.is-in .stat:nth-child(2) { --d: 1050ms; }
.hero.is-in .stat:nth-child(3) { --d: 1150ms; } .hero.is-in .stat:nth-child(4) { --d: 1250ms; }
.stat { position: relative; }
.stat::before { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }
.hero.is-in .stat::before { animation: stat-line 1.4s var(--ease-out) forwards; animation-delay: var(--d, 900ms); }
@keyframes stat-line { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); opacity: 0; } }

/* image du hero : lent zoom d'arrivée, puis parallaxe (souris et scroll) */
.hero__media img, .hero__media video {
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--sy, 0px)), 0) scale(var(--zs, 1.08));
  will-change: transform;
}
html.anim .hero:not(.is-in) .hero__media img, html.anim .hero:not(.is-in) .hero__media video { --zs: 1.28; transition: none; }
.hero.is-in .hero__media img, .hero.is-in .hero__media video { animation: hero-zoom 2.8s var(--ease-out) backwards; }
@keyframes hero-zoom { from { --zs: 1.28; } }
@property --zs { syntax: '<number>'; inherits: true; initial-value: 1.08; }
.hero__tour .ico { animation: nudge 2.2s var(--ease-io) infinite; }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }

/* ══ Apparition au défilement ══ */
html.anim [data-rv] { opacity: 0; transform: translate3d(0, 38px, 0); transition: opacity 0.9s var(--ease-out), transform 1.15s var(--ease-out); transition-delay: var(--d, 0ms); }
html.anim [data-rv].is-in { opacity: 1; transform: none; }
html.anim [data-rv="wipe"] { transform: none; clip-path: inset(0 100% 0 0); opacity: 1; transition: clip-path 1.1s var(--ease-io); transition-delay: var(--d, 0ms); }
html.anim [data-rv="wipe"].is-in { clip-path: inset(0 0 0 0); }
html.anim [data-rv="scale"] { transform: translate3d(0, 26px, 0) scale(0.97); }
html.anim [data-rv="scale"].is-in { transform: none; }

/* ══ Interface vivante ══ */
.scroll-progress { position: fixed; left: 0; top: 0; z-index: 90; height: 2px; width: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.site-header { transition: box-shadow 0.4s ease, background-color 0.4s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 34px color-mix(in srgb, var(--color-text) 10%, transparent); background: color-mix(in srgb, var(--color-bg) 88%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }

.site-nav a { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; padding-bottom: 4px; transition: background-size 0.45s var(--ease-out), color 0.25s ease; }
.site-nav a:hover { background-size: 100% 1px; }

/* reflet de verre qui traverse les boutons */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, #fff 38%, transparent) 50%, transparent 70%); transform: translateX(-130%); pointer-events: none; }
.btn:hover::before { transform: translateX(130%); transition: transform 0.9s var(--ease-out); }
[data-magnet] { transition: transform 0.35s var(--ease-out), background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; will-change: transform; }

/* cartes : inclinaison 3D et reflet qui suit le curseur */
.tilt { position: relative; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.4s var(--ease-out); }
.tilt:hover { z-index: 2; }
.tilt::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, #fff 26%, transparent), transparent 60%); mix-blend-mode: soft-light; }
.tilt:hover::after { opacity: 1; }
.work__media img { transition: transform 1.2s var(--ease-out); }
.work:hover .work__media img { transform: scale(1.06); }
.pledge { transition: background-color 0.4s ease; }
.pledge:hover { background: color-mix(in srgb, #fff 9%, transparent); }
.pledge__n { transition: transform 0.5s var(--ease-out); }
.pledge:hover .pledge__n { transform: translateX(10px); }
.mission h3 { transition: letter-spacing 0.6s var(--ease-out); }
.mission:hover h3 { letter-spacing: 0.01em; }

/* changements d'étape, questions, créneaux, avis */
.step-panel.swap :is(.step-panel__num, h3, .step-panel__text, .fact) { animation: swap-in 0.7s var(--ease-out) backwards; }
.step-panel.swap h3 { animation-delay: 60ms; } .step-panel.swap .step-panel__text { animation-delay: 120ms; } .step-panel.swap .fact { animation-delay: 190ms; }
@keyframes swap-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
.faq__a:not([hidden]), .step__detail:not([hidden]), .notice:not([hidden]) { animation: swap-in 0.6s var(--ease-out) backwards; }
.day, .slot { animation: swap-in 0.55s var(--ease-out) backwards; }
.day:nth-child(2), .slot:nth-child(2) { animation-delay: 60ms; } .day:nth-child(3), .slot:nth-child(3) { animation-delay: 120ms; }
.day:nth-child(4), .slot:nth-child(4) { animation-delay: 180ms; } .day:nth-child(5), .slot:nth-child(5) { animation-delay: 240ms; } .day:nth-child(6) { animation-delay: 300ms; }
.pick.pop { animation: pick-pop 0.6s var(--ease-out); }
@keyframes pick-pop { 0% { transform: translateY(0.12em); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
.faq__icon { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.5s var(--ease-out); }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }

/* assistant */
.chat { animation: chat-open 0.55s var(--ease-out) backwards; transform-origin: bottom right; }
@keyframes chat-open { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.96); } to { opacity: 1; transform: none; } }
.chat__msg { animation: msg-in 0.45s var(--ease-out) backwards; }
.chat__msg--bot { transform-origin: left bottom; } .chat__msg--you { transform-origin: right bottom; }
@keyframes msg-in { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.97); } to { opacity: 1; transform: none; } }
.chat__chip { animation: msg-in 0.5s var(--ease-out) backwards; }
.chat__chip:nth-child(2) { animation-delay: 70ms; } .chat__chip:nth-child(3) { animation-delay: 140ms; } .chat__chip:nth-child(4) { animation-delay: 210ms; } .chat__chip:nth-child(n+5) { animation-delay: 280ms; }
.chat-launcher { animation: launcher-in 0.8s var(--ease-out) 2.2s backwards; }
.chat-launcher::after { content: ''; position: absolute; inset: -2px; border: 1px solid var(--color-accent); opacity: 0; animation: launcher-ping 2.4s var(--ease-out) 3.4s 3; pointer-events: none; }
@keyframes launcher-in { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
@keyframes launcher-ping { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }

/* ══ Curseur réticule (ordinateur) : point, anneau aux graduations qui tournent, inversion de couleur ══ */
.rt-dot, .rt-ring { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; border-radius: 50%; opacity: 0; mix-blend-mode: difference; will-change: transform; }
.rt-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #fff; transition: opacity 0.3s ease, width 0.3s var(--ease-out), height 0.3s var(--ease-out), margin 0.3s var(--ease-out); }
.rt-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid #fff; transition: opacity 0.3s ease, width 0.45s var(--ease-out), height 0.45s var(--ease-out), margin 0.45s var(--ease-out); }
.rt-ring i { position: absolute; background: #fff; }
.rt-ring i:nth-child(1) { left: 50%; top: -6px; width: 1px; height: 5px; } .rt-ring i:nth-child(2) { left: 50%; bottom: -6px; width: 1px; height: 5px; }
.rt-ring i:nth-child(3) { top: 50%; left: -6px; width: 5px; height: 1px; } .rt-ring i:nth-child(4) { top: 50%; right: -6px; width: 5px; height: 1px; }
.rt-ring i { animation: none; }
html.has-reticle body.rt-live .rt-dot, html.has-reticle body.rt-live .rt-ring { opacity: 1; }
body.rt-hover .rt-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
body.rt-hover .rt-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
body.rt-down .rt-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
html.has-reticle, html.has-reticle * { cursor: none !important; }
html.has-reticle body.rt-off, html.has-reticle body.rt-off * { cursor: auto !important; }
html.has-reticle body.rt-off :is(button, a, select, label, summary, [role="button"]) { cursor: pointer !important; }
html.has-reticle body.rt-off :is(input, textarea) { cursor: text !important; }
html.has-reticle body.rt-off .rt-dot, html.has-reticle body.rt-off .rt-ring { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .loader, .rt-dot, .rt-ring, .scroll-progress { display: none !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
}