/* =====================================================================
   FROST STUDIO — section « Fondateur / À propos » (founder.css)
   Direction « Contre-jour » : portrait cinématique pleine hauteur, sujet
   dans le tiers droit, texte dans le tiers gauche. Le portrait apparaît en
   silhouette dans le noir puis se révèle avec le scroll ; `--p2` (0→1) est
   la progression amortie écrite par founder.js.
   Entrée « en plans » : dès que la section arrive à l'écran (`--p1` : 0→1, amorti),
   la scène se construit du lointain au proche — ciel et lune, puis la montagne
   (d'abord en silhouette), puis la crête et Axel éclairé par son écran.
   Sortie « en plans » : quand la scène quitte l'écran (`--p3` : 0→1, brut,
   calé sur la page), le portrait se sépare en quatre plans — lointain, mer
   de nuages, texte, sol + Axel — qui descendent chacun à leur vitesse, puis
   fondu au noir vers la section suivante. Aucune dépendance au hero.
   ===================================================================== */

.founder { position: relative; height: 170vh; height: 170svh; background: var(--ob-0); color: var(--bone); --p1: 0; --p2: 0; --p3: 0; }
.founder__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: var(--ob-0); }

/* Groupe de plans : ancré à droite, un seul masque pour les trois couches (fondu vers le noir à gauche
   et en bas — appliqué au groupe, il ne s'additionne pas). Le masque reste en place pendant que les plans glissent. */
/* continuité vers studio.html : la scène est l'élément partagé de la transition entre documents (View Transitions, progressif) */
@view-transition { navigation: auto; }
.founder__plans { view-transition-name: founder-scene; }
::view-transition-group(founder-scene) { animation-duration: .9s; animation-timing-function: var(--ease-out); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .6s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; } }
.founder__plans {
  position: absolute; inset: 0 0 0 26%; z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to top, transparent 0%, #000 12%);
  mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to top, transparent 0%, #000 12%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* Plans : même cadrage, même révélation. À --p3 = 0 ils se superposent au pixel près ;
   --speed = amplitude de descente en % de leur hauteur pendant la sortie. */
.founder__portrait, .founder__layer {
  position: absolute; inset: 0; margin: 0; --speed: 0;
  transform: translate3d(0, calc(var(--p3) * var(--speed) * 1%), 0);
  will-change: transform;
}
.founder__portrait { z-index: 0; --speed: 70; }        /* (1) lointain : ciel, sommets, crête */
.founder__layer--clouds { z-index: 1; --speed: 55; }   /* (2) mer de nuages */
.founder__layer--ground { z-index: 3; --speed: 10; }   /* (4) crête + Axel : passe devant le mot */
/* (3) Mot géant entre la montagne et Axel, comme le « Parallax » de la référence : sombre sur la neige, il s'enfonce
   derrière la crête pendant la sortie. Masqué à gauche par le masque du groupe, donc jamais sous le texte. */
.founder__word {
  position: absolute; z-index: 2; margin: 0; left: 22%; top: 31%; --speed: 40;
  font-size: clamp(3rem, 8.2vw, 9.4rem); font-weight: 800; font-variation-settings: "wdth" 80, "opsz" 96; line-height: .9; letter-spacing: -.03em;
  text-transform: uppercase; white-space: nowrap; color: rgba(8, 10, 14, .9);
  opacity: calc(var(--p2) * var(--p2)); transform: translate3d(0, calc(var(--p3) * 40svh), 0); will-change: transform;
}
/* Entrée : chaque plan s'allume dans sa fenêtre de --p1 (--a → --b) : noir → silhouette → image.
   Un plan éteint est une silhouette noire posée sur le plan derrière lui (contre-jour), pas une transparence. */
.founder__portrait img, .founder__layer img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%;
  --k: clamp(0, (var(--p1) - var(--a)) / (var(--b) - var(--a)), 1);
  filter: brightness(var(--k)) contrast(calc(1.30 - 0.30 * var(--k))) saturate(calc(0.60 + 0.40 * var(--k)));
  transform: translate3d(0, calc((1 - var(--k)) * 3vh), 0) scale(calc(1.06 - 0.06 * var(--k)));
  transform-origin: 60% 55%;
  will-change: filter, transform;
}
.founder__portrait img { --a: 0; --b: .55; }         /* ciel, lune, lointain */
.founder__layer--clouds img { --a: .22; --b: .82; }  /* montagne */
.founder__layer--ground img { --a: .48; --b: 1; }    /* crête + Axel, l'écran s'allume en dernier */
/* Vignettage haut/bas pour poser la nav qui suit et le texte */
.founder__stage::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(to bottom, rgba(5,5,7,.55), rgba(5,5,7,0) 22%, rgba(5,5,7,0) 84%, rgba(5,5,7,.35)); }
/* Sortie : fondu au noir en bas de la scène, proportionnel à --p3 — la section suivante arrive sur du noir */
.founder__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; height: 34svh; z-index: 6; pointer-events: none;
  background: linear-gradient(to top, var(--ob-0) 0%, rgba(5,5,7,.86) 28%, rgba(5,5,7,0) 100%);
  opacity: var(--p3);
}

/* Texte : tiers gauche — plan (4) : pendant la sortie il descend plus vite que le sol et s'enfonce dans le fondu noir */
.founder__copy {
  position: absolute; left: var(--gutter); right: auto; bottom: 10vh; z-index: 3; max-width: min(44vw, 40rem); display: grid; gap: 1.1rem;
  /* 2D volontairement : à l'arrêt (--p3 = 0) le texte n'est pas promu en calque, il garde son rendu net */
  transform: translateY(calc(var(--p3) * 40vh)); transform: translateY(calc(var(--p3) * 40svh));
}
.founder__copy > * { --k: clamp(0, (var(--p2) - var(--at, .3)) * 4, 1); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 22px)); }
.founder__label { --at: .28; margin: 0; font-size: .64rem; color: var(--bone-soft); }
.founder__title { --at: .34; margin: 0; }
.founder__line { display: block; }
.founder__line--sans { font-size: clamp(3rem, 7.4vw, 7.6rem); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; line-height: .86; letter-spacing: -.02em; text-transform: uppercase; }
.founder__line--serif { font: italic clamp(2.3rem, 5.6vw, 5.7rem)/.98 var(--font-serif); letter-spacing: -.01em; margin: -.04em 0 0 clamp(.4rem, 3.2vw, 3rem); color: rgba(233,228,220,.94); }
.founder__body { --at: .46; margin: .4rem 0 0; max-width: 34rem; font-size: clamp(.98rem, 1.1vw, 1.12rem); line-height: 1.55; color: var(--bone-soft); }
.founder__body strong { font-weight: 500; color: var(--bone); }
.founder__meta { --at: .56; margin: .6rem 0 0; display: grid; grid-template-columns: repeat(3, auto); gap: .5rem 2.2rem; justify-content: start; font-size: .62rem; }
.founder__meta div { display: grid; gap: .35rem; }
.founder__meta dt { color: var(--bone-faint); }
.founder__meta dd { margin: 0; color: var(--bone); }
.founder__actions { --at: .64; display: flex; align-items: center; gap: 1.6rem; margin-top: .4rem; }
.founder__sign { display: inline-flex; align-items: center; gap: .55rem; font-size: .62rem; letter-spacing: .16em; color: var(--bone-faint); }
.founder__sign svg { width: 1.05rem; height: 1.05rem; color: var(--bone-soft); }

/* Tablette / paysage : colonne texte plus large, portrait plus à droite */
@media (max-width: 1023px) and (min-width: 768px) {
  .founder__copy { max-width: min(54vw, 36rem); }
  .founder__plans { inset: 0 0 0 18%; }
}
/* Téléphone en paysage */
@media (max-height: 520px) and (orientation: landscape) {
  .founder__line--sans { font-size: clamp(2rem, 9vh, 3.6rem); }
  .founder__line--serif { font-size: clamp(1.5rem, 7vh, 2.8rem); }
  .founder__body { display: none; }
  .founder__copy { bottom: 6vh; gap: .7rem; }
}
/* Mobile : portrait en haut (recadrage 4:5, visage dans le tiers haut), texte en bas sur noir.
   Sortie plus courte (les plans n'occupent que 60 % de la scène) et texte fixe, au-dessus des plans : il reste lisible. */
@media (max-width: 767px), (pointer: coarse) and (max-height: 520px) {
  /* mobile : pas de paragraphe ni de fiche — l'histoire est sur la page Studio (« Découvrir le studio ») */
  .founder__body, .founder__meta { display: none; }
  .founder { height: 150vh; height: 150svh; }
  .founder__plans { inset: 0 0 40% 0; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 34%); mask-image: linear-gradient(to top, transparent 0%, #000 34%); -webkit-mask-composite: initial; mask-composite: initial; }
  .founder__portrait { --speed: 40; }
  .founder__layer--clouds { --speed: 28; }
  .founder__layer--ground { --speed: 6; }
  .founder__word { left: 6%; top: 30%; font-size: clamp(2.4rem, 13.5vw, 4rem); transform: translate3d(0, calc(var(--p3) * 22svh), 0); }
  .founder__portrait img, .founder__layer img { object-position: 58% 22%; transform-origin: 58% 30%; }
  .founder__copy { left: var(--gutter); right: var(--gutter); bottom: 5.5vh; max-width: none; gap: .85rem; z-index: 7; transform: none; }
  .founder__fade { height: 40vh; height: 40svh; }
  .founder__line--sans { font-size: clamp(2.6rem, 13vw, 3.9rem); }
  .founder__line--serif { font-size: clamp(2rem, 9.5vw, 2.9rem); margin-left: 1rem; }
  .founder__body { font-size: .95rem; line-height: 1.5; max-width: none; }
  .founder__meta { grid-template-columns: repeat(2, auto); gap: .4rem 1.6rem; }
  .founder__actions { gap: 1.1rem; flex-wrap: wrap; }
}
/* Téléphone en paysage (retour d'Axel : « on ne me voit plus ») : les plans prennent toute la hauteur de la scène et
   la photo est cadrée sur Axel (image desktop 3:2, largeur pleine, bande visible ≈ 70 % de la hauteur, calée vers le bas) ;
   le masque du bas est plus court pour ne pas effacer Axel, le texte reste en bas à gauche sur le fondu. */
@media (pointer: coarse) and (max-height: 520px) and (orientation: landscape) {
  .founder__plans { inset: 0; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 16%); mask-image: linear-gradient(to top, transparent 0%, #000 16%); }
  .founder__portrait img, .founder__layer img { object-position: 62% 80%; transform-origin: 62% 75%; }
  .founder__word { top: 14%; left: 8%; font-size: clamp(2rem, 7vw, 3.4rem); }
  .founder__fade { height: 55svh; }
  .founder__copy { bottom: 5vh; gap: .5rem; }
}
/* Mouvement réduit : tout est visible, pas d'épinglage, pas de sortie en plans */
@media (prefers-reduced-motion: reduce) {
  .founder { height: auto; --p1: 1 !important; --p2: 1 !important; --p3: 0 !important; }
  .founder__stage { position: relative; height: auto; min-height: 100svh; }
  .founder__copy, .founder__copy > *, .founder__portrait, .founder__layer, .founder__word { transform: none; }
  .founder__portrait img, .founder__layer img { transition: none; }
}