/* ═══════════════════════════════════════════════════════════
   STILL FLOW — couche d'animation
   Moteur repris du skill « Site Immersif » : smooth scroll lerp,
   scènes épinglées scrubées, tracés dessinés, rideau de lettres.
   Aucune règle ici ne change le contenu ni la mise en page de la
   maquette : seulement des états d'entrée et des transitions.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ═══════════ SMOOTH WRAPPER ═══════════ */
html.is-smooth { scroll-behavior: auto; }
body.is-smooth .smooth {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  will-change: transform;
}

/* ═══════════ SCÈNES (pin émulé) ═══════════ */
.scene { position: relative; height: calc(var(--pin, 1) * 100vh); }
.s-hero { --pin: 4.6; }
.s-process { --pin: 4.2; }
.scene .pin {
  position: relative;
  height: 100vh;
  overflow: hidden;
  will-change: transform;
}
/* sans moteur (mouvement réduit) : on retombe sur le sticky natif */
body:not(.is-smooth) .scene .pin { position: sticky; top: 0; }

/* ═══════════ LOADER ═══════════ */
.loader {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.loader::before {
  content: ''; position: absolute; inset: 0;
  background: var(--color-bg);
  transition: opacity .75s var(--ease-inout);
}
.loader.done { pointer-events: none; }
.loader.done::before { opacity: 0; }
.loader-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.loader-logo { transition: opacity .45s var(--ease-out), transform .8s var(--ease-inout); }
.loader.done .loader-logo { opacity: 0; transform: scale(.86); }
.loader-logo .ring {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: ring-draw 1.1s var(--ease-inout) .05s forwards;
}
.loader-logo path { opacity: 0; animation: fade-in .7s var(--ease-out) .45s forwards; }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }

.loader-wordmark {
  line-height: 1;
  transform-origin: center center;
  transition: transform .9s var(--ease-inout);
  will-change: transform;
  animation: rise-in .9s var(--ease-out) .15s backwards;
}
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
/* posé : le nom du loader s'efface pendant que le dock se révèle, même
   durée, même endroit — un fondu croisé, jamais une bascule sèche */
.loader-wordmark.landed { opacity: 0; transition: opacity .32s var(--ease-out); }
.loader-rule {
  display: block; width: 120px; height: 1px;
  background: color-mix(in srgb, var(--color-text) 16%, transparent);
  overflow: hidden;
  transition: opacity .3s var(--ease-out), transform .5s var(--ease-inout);
}
.loader.done .loader-rule { opacity: 0; transform: scaleX(.4); }
.loader-rule i {
  display: block; width: 100%; height: 100%;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left;
}

/* ═══════════ DOCK ═══════════ */
.dock {
  transform: translate(-50%, -180%);
  transition: transform .9s var(--ease-out) .15s, opacity .32s var(--ease-out), box-shadow .5s;
}
body.is-ready .dock { transform: translate(-50%, 0); }
/* pendant le relais le dock est déjà à sa place, simplement invisible */
body.handoff .dock { transform: translate(-50%, 0); opacity: 0; transition: none; }

.nav-link { position: relative; transition: color .3s; }
.nav-link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1.5px; border-radius: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-inout);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.ig-link { transition: background .3s, transform .4s var(--ease-out); }
.ig-link:hover { transform: rotate(-8deg) scale(1.06); }

/* boutons : un souffle au survol, un appui au clic */
.btn { transition: background .3s, border-color .3s, transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: none; transition-duration: .12s; }
.dock .btn:hover { box-shadow: none; }

/* ═══════════ HERO — entrée ═══════════ */
.fl {
  position: absolute;
  /* taille bornée par la largeur ET la hauteur de l'écran : les colonnes
     ne se chevauchent jamais, même sur un écran large et bas */
  --fw: calc(var(--s) * min(1.3px, 0.1015625vw, 0.165vh));
  width: var(--fw);
  aspect-ratio: 1;
  /* plafond de sécurité : jamais coupé en bas */
  top: min(var(--y), calc(100% - var(--fw) - 34px));
  border-radius: var(--r);
  overflow: hidden;
  will-change: transform, opacity;
  clip-path: inset(100% 0 0 0 round var(--r));
  transition: clip-path 1.3s var(--ease-inout);
  transition-delay: calc(var(--fi, 0) * 110ms + .2s);
}
/* nuage SYMÉTRIQUE : côté gauche ancré à gauche, côté droit en miroir
   ancré à droite. Colonne extérieure à 3 %, intérieure à 20 % : la
   première finit au plus à 18 % de la largeur, la seconde au plus à
   31 % — elles ne se touchent pas, et le titre commence au-delà de 33 %. */
.fl.l { left: var(--x); }
.fl.r { right: var(--x); }
.fl.o1 { --x: 3%;  --y: 11%; }
.fl.i1 { --x: 20%; --y: 31%; }
.fl.o2 { --x: 3%;  --y: 55%; }
.fl.i2 { --x: 20%; --y: 74%; }
/* écran étroit : le titre occupe presque toute la largeur — les visuels
   passent dans une bande haute et une bande basse, toujours en miroir */
@media (max-width: 820px) {
  .fl { --fw: calc(var(--s) * 0.1vw + 10px); }
  /* bande haute : sous le dock ; bande basse : ancrée au bas de l'écran */
  .fl.o1 { --x: 3%;  top: calc(env(safe-area-inset-top, 0px) + 92px); }
  .fl.i1 { --x: 26%; top: calc(env(safe-area-inset-top, 0px) + 78px); }
  .fl.o2 { --x: 3%;  top: calc(100% - var(--fw) - 26px); }
  .fl.i2 { --x: 26%; top: calc(100% - var(--fw) - 26px - 4vh); }
}
.fl img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.35);
  transition: transform 1.8s var(--ease-out);
  transition-delay: calc(var(--fi, 0) * 110ms + .2s);
}
body.is-ready .fl { clip-path: inset(0 0 0 0 round var(--r)); }
body.is-ready .fl img { transform: scale(1); }

.hero-logo .ring { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-inout) .1s; }
.hero-logo .bump { opacity: 0; transition: opacity .9s var(--ease-out) .6s; }
body.is-ready .hero-logo .ring { stroke-dashoffset: 0; }
body.is-ready .hero-logo .bump { opacity: 1; }

.hero-in {
  opacity: 0; transform: translateY(18px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms + .2s);
}
body.is-ready .hero-in { opacity: 1; transform: none; }

/* titre : chaque mot monte derrière sa ligne de base */
.hw {
  display: inline-block;
  padding-bottom: .14em; margin-bottom: -.14em;
  clip-path: inset(-.4em -.3em 0 -.3em);
}
.hw > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + .45s);
}
body.is-ready .hw > span { transform: none; }

/* le logo et le titre remontent d'un cran au-dessus du centre */
#heroCopy { transform: translateY(-4vh); }
#heroBrand, #heroTitle { will-change: transform, opacity, filter; }
.studio { opacity: 0; clip-path: inset(50% 50% 50% 50%); will-change: clip-path, opacity; }
#studioImg { will-change: transform; transform-origin: 50% 50%; }

/* paragraphe « About » : les mots s'encrent au scroll */
.aw { display: inline-block; margin-right: 0.24em; opacity: .22; will-change: opacity, transform; }
.aw.hl { color: var(--color-accent-300); }
#aboutText, #aboutPortrait { will-change: transform, opacity; }

/* ═══════════ RÉVÉLATIONS GÉNÉRIQUES ═══════════ */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal-rise { transform: translateY(60px) scale(.97); transform-origin: 50% 100%; }

/* titres : mot par mot, masqués par leur propre ligne */
.rw {
  display: inline-block;
  padding-bottom: .16em; margin-bottom: -.16em;
  clip-path: inset(-.5em -.4em 0 -.4em);
}
.rw > .rwi {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 60ms);
}
.reveal-lines.in-view .rw > .rwi { transform: none; }
/* une fois posé, plus aucun masque (l'ovale dessiné déborde du mot) */
.reveal-lines.settled .rw { clip-path: none; }

.reveal-pop {
  opacity: 0; transform: scale(.82) rotate(-6deg);
  transition: opacity 1s var(--ease-out), transform 1.4s var(--ease-out);
}
.reveal-pop.in-view { opacity: 1; transform: none; }
.reveal-pop img { transform: scale(1.25); transition: transform 1.8s var(--ease-out); }
.reveal-pop.in-view img { transform: scale(1); }

/* ═══════════ WORK ═══════════ */
/* grille toujours symétrique : 3 × 2 ou 2 × 3 (1 colonne sur téléphone),
   jamais un 4 + 2 */
.tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 959px) { .tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .tracks { grid-template-columns: minmax(0, 1fr); } }
.track { will-change: transform; }
.track iframe { transition: box-shadow .5s var(--ease-out), transform .6s var(--ease-out); }
.track:hover iframe { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

/* ═══════════ PROCESS ═══════════ */
.proc-panel { will-change: transform; transform-origin: 50% 0; }
.proc-in { will-change: opacity, transform; }
.step-head, .step-text, .motif { will-change: opacity, transform; }
.step-head:not(:first-child), .step-text:not(:first-child), .motif:not(:first-child) { opacity: 0; }
#procCta { will-change: transform; }

/* ═══════════ TALK ═══════════ */
.talk-ink .hv { opacity: .22; will-change: opacity, transform; }
.talk-cal { will-change: transform, opacity; transform-origin: 50% 100%; }
body.static .talk-ink .hv { opacity: 1; }

/* ═══════════ BIO ═══════════ */
#bio { will-change: transform; }
#bioBg { will-change: transform; }

/* ═══════════ FAQ ═══════════ */
.faq { transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), background .35s, box-shadow .5s var(--ease-out); }
.faq:hover { box-shadow: var(--shadow-md); }
.faq.is-animating { overflow: hidden; }
.faq-plus { transition: transform .55s var(--ease-inout), background .3s; }
.faq summary:hover .faq-plus { transform: rotate(90deg); }
.faq[open] .faq-plus { transform: rotate(45deg); }
.faq[open] summary:hover .faq-plus { transform: rotate(135deg); }
.faq > p { transition: opacity .5s var(--ease-out) .08s, transform .6s var(--ease-out) .08s; }
.faq.is-closing > p, .faq.is-opening > p { opacity: 0; transform: translateY(-8px); }
.faq.is-opening.is-expanded > p { opacity: 1; transform: none; }

/* ═══════════ FOOTER ═══════════ */
.footer-mail { display: inline-block; align-self: flex-start; transition: color .3s; }
.footer-mail-text { position: relative; }
.footer-mail-text::after {
  content: '';
  position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease-inout);
}
.footer-mail:hover .footer-mail-text::after { transform: scaleX(1); transform-origin: left; }

.footer-logo {
  opacity: 0; transform: rotate(-140deg) scale(.5);
  transition: opacity .8s var(--ease-out), transform 1.6s var(--ease-out);
}
.footer-brand.in-view .footer-logo { opacity: 1; transform: none; }
#footerName .ch {
  display: inline-block;
  clip-path: inset(-.3em -.2em -.06em -.2em);
}
#footerName .chi {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 38ms + .1s);
}
.footer-brand.in-view #footerName .chi { transform: none; }

/* ═══════════ SURVOL DU TEXTE ═══════════
   Chaque mot se soulève légèrement sous la souris. On passe par la
   propriété `translate` (et non `transform`) : elle se compose avec les
   transforms posés en continu par le moteur de scroll, sans les écraser. */
.hv { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  /* un frémissement plutôt qu'un saut : levée minime, aucune rotation,
     montée et retombée lentes et douces */
  .hv, .aw, .rw, .hw, #footerName .ch {
    transition: translate .8s var(--ease-soft);
  }
  .hv:hover { translate: 0 -0.035em; }
  .aw:hover, .rw:hover, .hw:hover, .big-hv .hv:hover { translate: 0 -0.03em; }
  #footerName .ch:hover { translate: 0 -0.04em; }

  /* hero : le conteneur ignore la souris (maquette), mais le logo et les
     mots du titre la reçoivent pour réagir au survol */
  .hero-logo, #heroBrand > span .hv, #heroTitle .hw { pointer-events: auto; }
  .hero-logo { transition: scale 1.1s var(--ease-soft); }
  .hero-logo:hover { scale: 1.025; }
}

/* ═══════════ MOUVEMENT RÉDUIT ═══════════ */
body.static .fl, body.static .fl img,
body.static .hw > span, body.static .hero-in,
body.static .reveal, body.static .rw > .rwi,
body.static .reveal-pop, body.static .reveal-pop img,
body.static .footer-logo, body.static #footerName .chi { opacity: 1; transform: none; clip-path: none; transition: none; }
body.static .hero-logo .ring { stroke-dashoffset: 0; }
body.static .hero-logo .bump { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}