/* ============================================================================
   Cosmeek V2 — « Le travail est sérieux. » (node 3104:37037)
   Cadre 1328 × 768. Toutes les positions sont données en coordonnées Figma
   puis rapportées au cadre : la composition se met à l'échelle d'un bloc,
   sans point de rupture intermédiaire.
   ========================================================================= */


.human__stage {
  --frame-w: 1328;
  --frame-h: 768;
  /* Course horizontale d'une photo de profondeur 1, sur toute la traversée.
     Une largeur de fenêtre entière : il en faut autant pour que la vignette
     qui couvre le titre le dégage vraiment avant qu'on arrive dessus. */
  --span: clamp(360px, 100vw, 1440px);

  position: relative;
  aspect-ratio: var(--frame-w) / var(--frame-h);
}

/* Les photos débordent le cadre de 1328 des deux côtés : l'export Figma part
   du bord de page, pas du bord de cadre, et les montre dans la gouttière.
   Le rognage se fait donc en pleine largeur. `clip` plutôt que `hidden` :
   aucun défilement parasite n'est créé, et aucun contexte de défilement. */
.human__bleed {
  overflow: clip;
}

.human__blob {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(148.01 / var(--frame-w) * 100%);
  inline-size: calc(1031.99 / var(--frame-w) * 100%);
  block-size: 100%;
  rotate: 180deg; /* la maquette pose le tracé retourné */
  pointer-events: none;
}

/* ── Titre ──────────────────────────────────────────────────────────────
   Aligné à droite dans une boîte de 824.203, elle-même poussée au bord droit
   du cadre, et centré verticalement. Les photos passent PAR-DESSUS : c'est
   l'ordre de la maquette, où « Le travail » est partiellement masqué. */
.human__title {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  translate: 0 -50%;
  margin: 0;
  margin-inline-start: auto;
  max-inline-size: calc(824.203 / var(--frame-w) * 100%);
  text-align: right;
}

.human__title span {
  display: block;
}

/* Le rognage optique se répartit sur les deux lignes : trim-both sur chacune
   écraserait l'interligne entre elles. */
.human__title span:first-child {
  text-box: trim-start cap alphabetic;
}

.human__title span:last-child {
  text-box: trim-end cap alphabetic;
}

/* ── Champ de photos ────────────────────────────────────────────────────
   `--p` est la progression de la section dans la bande de défilement, et
   `--anchor` la progression à laquelle elle se trouve centrée : les deux sont
   écrites par le JS. Chaque photo retrouve sa position Figma exactement quand
   la section est bien cadrée. Sans JS et en mouvement réduit, les deux valeurs
   par défaut se confondent : la composition est celle de la maquette,
   immobile.

   Le champ dérive vers la GAUCHE quand on descend : c'est `--anchor` moins
   `--p`, et non l'inverse.

   `--anchor` est calée sur l'ENTRÉE de la section, pas sur son centre. La
   section fait 768 dans une fenêtre de 900 : elle n'est bien cadrée qu'autour
   de la mi-course, et y placer la maquette revenait à masquer le titre pile au
   moment où on le lit. La composition Figma est donc ce qu'on voit quand la
   section arrive ; le champ s'ouvre ensuite et dégage le texte. */
.human__field {
  position: absolute;
  inset: 0;
}

.human__photo {
  --depth: 0.5;

  position: absolute;
  inset-inline-start: calc(var(--x) / var(--frame-w) * 100%);
  inset-block-start: calc(var(--y) / var(--frame-h) * 100%);
  inline-size: calc(var(--w) / var(--frame-w) * 100%);
  block-size: calc(var(--h) / var(--frame-h) * 100%);
  margin: 0;
  border-radius: var(--r-sm);
  overflow: clip;
  transform: translate3d(
    calc((var(--anchor, 0.5) - var(--p, 0.5)) * var(--depth) * var(--span)),
    0,
    0
  );
}

.human__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Réservé aux images pendant que la section défile, retiré ensuite : neuf
   calques promus en permanence coûtent de la mémoire pour rien. */
.human.is-live .human__photo {
  will-change: transform;
}

/* ── Petits écrans ──────────────────────────────────────────────────────
   Même esprit qu'en bureau : un nuage libre de photos qui dérivent pendant le
   défilement, sur un cadre vertical (634 × 1180) rapporté à la largeur de
   l'écran. Tout se met à l'échelle d'un bloc.

   Le titre doit rester lisible sur TOUS les téléphones, à tout moment du
   défilement. Les photos ne se mêlent donc pas à lui : elles occupent le haut
   et le bas du cadre, la bande du titre (au plus 510 → 670 sur 1180, centrée
   à 50 %) reste libre. Les photos se chevauchent entre elles, pas avec lui. La dérive est horizontale seulement : aucune photo ne
   peut entrer dans cette bande, quelle que soit la hauteur de l'écran.

   Sept photos sur neuf. Elles portent `data-mobile` et leurs
   coordonnées propres (`--mx`, `--my`, `--mw`, `--mh`) ; les autres
   disparaissent. Elles débordent volontairement du cadre : c'est la dérive
   (`--p`, `--anchor`, écrites par le JS) qui les fait entrer. */
@media (width < 900px) {
  .human__stage {
    --frame-w: 634;
    --frame-h: 1180;
    /* Dérive plus ample qu'avant : les photos traversent l'écran au lieu de
       traîner dans un coin. */
    --span: 110vw;

    container-type: inline-size;
    /* Le cadre mobile part du bord de l'écran, pas de la gouttière. */
    margin-inline: calc(-1 * var(--gutter));
    aspect-ratio: var(--frame-w) / var(--frame-h);
  }

  /* Le SVG est en `preserveAspectRatio="none"` : dans un cadre vertical il
     serait étiré. On lui rend ses proportions (1032 × 768) et on le centre,
     plus large que l'écran pour que ses courbes restent visibles. */
  .human__blob {
    inset-block-start: 50%;
    inset-inline-start: -30%;
    inline-size: 160%;
    block-size: auto;
    aspect-ratio: 1031.99 / 767.999;
    translate: 0 -50%;
  }

  /* Titre : même taille que les autres titres (`.t-h1`), aligné à droite sur
     la gouttière, au centre du cadre. */
  .human__title {
    inset-block-start: 50%;
    padding-inline: var(--gutter);
    max-inline-size: none;
  }

  .human__photo:not([data-mobile]) {
    display: none;
  }

  .human__photo[data-mobile] {
    inset-inline-start: calc(var(--mx) / var(--frame-w) * 100%);
    inset-block-start: calc(var(--my) / var(--frame-h) * 100%);
    inline-size: calc(var(--mw) / var(--frame-w) * 100%);
    block-size: calc(var(--mh) / var(--frame-h) * 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .human__photo {
    transform: none;
  }
}