/*
 * RH-9 — Balayage vertical des 4 bandes-images de la S3 (home). Motion custom Lot 1.
 * Child theme versionné (blocksy-child). Greenshift/DB intacts, aucune couleur touchée.
 *
 * La S3 n'a qu'UNE image composite (`project-invest.webp`, fond transparent) dessinant les
 * 4 bandes-parallélogrammes. rh-s3-parallax.js masque l'<img> d'origine (`visibility:hidden`
 * → boîte conservée, zéro CLS) et pose 4 couches `.rh-s3-band` de la MÊME image, chacune
 * isolée HORIZONTALEMENT par `clip-path` (statique). Le MOUVEMENT est piloté par le SCROLL
 * côté CSS via `animation-timeline: view()` → il tourne sur le COMPOSITOR, PARFAITEMENT
 * synchronisé au scroll (aucun tremblement, contrairement à un pilotage JS/rAF sur le thread
 * principal qui accuse un décalage frame-à-frame vs le scroll composité).
 *
 * Balayage monotone : la bande arrive quasi de l'extérieur (0 & 2 du haut, 1 & 3 du bas),
 * TRAVERSE le bloc en se croisant, s'aligne au design quand le bloc est centré (« au logo »),
 * puis continue vers l'extrême opposé — en fondu d'opacité (nette au centre, estompée aux
 * extrémités → arrivée/sortie douces).
 *
 * Dégradation :
 *   - Rien n'est posé SANS `html.rh-js` (sans JS / reduced-motion → image d'origine statique).
 *   - Scroll-driven animations non supportées → `@supports` off → couches NON PEINTES
 *     (fallback propre = image composite d'origine). Aucun fallback JS (pas de tremblement nulle part).
 *   - Effet ACTIF ≥1000px (côte-à-côte) ; en dessous (empilé) → couches non peintes, image
 *     composite d'origine seule : sous 1000px l'<img> passe en `object-fit:cover` et les couches
 *     (`contain` + clip en % de boîte) ne peuvent PAS s'y aligner (détail au bloc `.rh-s3-band`).
 *   - transform + opacity only (compositing GPU), `overflow` maîtrisé → zéro décalage de layout.
 */

:root {
  /* Décalage À L'ENTRÉE + SENS D'ARRIVÉE par bande — TUNABLES (réglage du ressenti avec Etienne).
   * En % de la HAUTEUR de la boîte (translateY %) → fort ET responsive : les bandes arrivent quasi
   * de l'extérieur. Ces valeurs alimentent les @keyframes (via --rh-s3-b) : à l'ENTRÉE (view 0%) la
   * bande est à cette valeur ; au CENTRE (view 50%) à 0 (« au logo ») ; à la SORTIE (view 100%) à
   * l'OPPOSÉ. SIGNE = côté d'arrivée : NÉGATIF = du HAUT (descend) ; POSITIF = du BAS (monte).
   * Bandes 0 & 2 du haut, 1 & 3 du bas → elles se CROISENT (colonnes voisines, sens opposés).
   * Amplitudes/vitesses variées → sensation de profondeur. */
  --rh-s3-b0: -75%;   /* bande 0 (gauche)  → arrive du HAUT, descend */
  --rh-s3-b1:  75%;   /* bande 1           → arrive du BAS,  monte */
  --rh-s3-b2: -85%;   /* bande 2           → arrive du HAUT, descend (plus ample) */
  --rh-s3-b3:  60%;   /* bande 3 (droite)  → arrive du BAS,  monte */
}

/* Figure S3 : conteneur du parallaxe. `position:relative` = bloc conteneur des couches absolues.
 * `overflow:visible` = les bandes ARRIVENT DE L'EXTÉRIEUR du bloc (décision Etienne) → elles
 * doivent pouvoir déborder verticalement la boîte image ; sinon un bord dur les tranche au ras
 * du cadre pendant le balayage. Les extrêmes du balayage coïncident avec le bloc en bord de
 * viewport → le débordement part hors écran, il n'écrase pas le contenu voisin. L'<img> d'origine
 * est DÉCORATIF (alt="" dans le DOM) → `visibility:hidden` ne perd aucune info a11y ; il conserve
 * sa boîte (hauteur de la figure = hauteur image → zéro CLS). L'image n'est pas cliquable → aucune
 * micro-interaction RH-5 dessus. */
html.rh-js .rh-s3 {
  position: relative;
  overflow: visible;
}
/* NB : le masquage de l'<img> d'origine est GATÉ (même `@supports` + `@media` que l'animation,
 * plus bas) → il n'est masqué QUE lorsque les bandes animées prennent réellement le relais.
 * Sans scroll-driven animations OU < 1000px, l'<img> composite reste VISIBLE (fallback statique
 * sûr : jamais de S3 vide) et les couches ne sont PAS peintes (`display:none` hors garde) → aucun
 * ghosting à travers son fond transparent. */

/* Couche = bande isolée HORIZONTALEMENT (une par bande). Absolue, épouse la figure. Le `clip-path`
 * ne rogne QUE la largeur (bornes gauche/droite = milieux des gaps transparents) ; les insets
 * haut/bas NÉGATIFS (-120%) étendent la fenêtre bien au-delà de la boîte → la bande peut glisser
 * verticalement SANS être coupée (l'amplitude max ~85% reste < 120%). Tolérance horizontale : la
 * boîte garde un aspect ~0.75 constant (mesuré 1000→1868px) vs 0.734 natif → l'offset
 * `object-fit:contain` reste ~1 % de la largeur (5–7px), très en-deçà du demi-gap (~24–34px) →
 * clip toujours dans le transparent, jamais dans un immeuble. ⚠️ Bornes gauche/droite = milieux
 * de gaps (cf. géométrie native 640px). */
html.rh-js .rh-s3-band {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Derrière le contenu en flux normal (la figure ne crée PAS de contexte d'empilement :
   * position:relative + z:auto) : quand une bande déborde dans une section voisine pendant le
   * balayage, elle glisse DERRIÈRE son fond/texte au lieu de le recouvrir. La zone S3 (row +
   * colonne transparents) laisse voir les bandes sur le blanc de page ; les sections voisines à
   * fond opaque les masquent proprement. ⚠️ Ne PAS poser d'`isolation`/`z-index` sur `.rh-s3`
   * (cela piégerait ce z-index négatif dans la section et les bandes repasseraient au-dessus). */
  z-index: -1;
  /* Couches NON PEINTES par défaut : elles ne sont posées qu'à l'intérieur de la double garde
   * ci-dessous (scroll-driven animations + ≥1000px). Raison : l'alignement couche/<img> n'est
   * acquis QUE dans la géométrie desktop (boîte d'aspect ~0.75 + `object-fit:contain` → offset
   * `contain` ~1 % de la largeur, cf. bloc suivant). Sous 1000px, Blocksy/Greenshift bascule
   * l'<img> en `object-fit:COVER` et la boîte en aspect ~1.33 : l'<img> se recadre en agrandissant,
   * tandis que les couches (`background-size:contain`) réduisent l'image entière au centre (~22.5 %
   * → 77.5 % de la largeur). Les `clip-path`, exprimés en % de la BOÎTE, ne suivent pas : les bandes
   * 0 et 3 tombent hors de l'image contenue (vides), 1 et 2 ne montrent que des tranches décalées —
   * et comme l'image composite a un FOND TRANSPARENT, ces couches désalignées se voient À TRAVERS
   * ses gaps (bandes « cassées »). Un `display:none` hors garde rend le fallback pixel-exact :
   * l'<img> composite d'origine, qui reste visible (son masquage est gaté à l'identique). */
  display: none;
}
html.rh-js .rh-s3-band--0 { clip-path: inset(-120% 77.66% -120% 0); }
html.rh-js .rh-s3-band--1 { clip-path: inset(-120% 50.08% -120% 22.34%); }
html.rh-js .rh-s3-band--2 { clip-path: inset(-120% 22.5% -120% 49.92%); }
html.rh-js .rh-s3-band--3 { clip-path: inset(-120% 0 -120% 77.5%); }

/* Image de la couche : reproduit EXACTEMENT le rendu de l'<img> d'origine (object-fit:contain
 * centré) via background-size:contain + position center. C'est l'élément TRANSLATÉ (le clip,
 * lui, reste fixe sur la bande → la bande glisse à l'intérieur de sa fenêtre). */
html.rh-js .rh-s3-band__img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* --- Balayage piloté par le SCROLL sur le COMPOSITOR (scroll-driven animation) → synchronisé
 * au scroll, ZÉRO tremblement, zéro travail JS pendant le défilement. Double garde :
 *   - `@supports (animation-timeline: view())` : sinon aucune animation → bandes STATIQUES à leur
 *     position d'origine (base ci-dessus : transform none, opacity 1 = design). Fallback propre.
 *   - `@media (min-width:1000px)` : côte-à-côte ; en dessous (empilé) → statique.
 * `view()` mesure la traversée du viewport par la bande : 0% = entre par le bas, 50% = centré,
 * 100% = sort par le haut. Les @keyframes encodent le balayage : entrée (±b, opacité 0) → centre
 * (0, opacité 1, « au logo ») → sortie (∓b, opacité 0). Chaque bande reçoit son amplitude+sens via
 * --rh-s3-b (depuis les tokens :root). Transform + opacité sur la MÊME feuille (sans clip-path) →
 * couche de compositing propre ; `backface-visibility:hidden` = anti-shimmer. --- */
@supports (animation-timeline: view()) {
  @media (min-width: 1000px) {
    /* Masquage de l'<img> d'origine SEULEMENT ici (animation active) → sinon elle reste
     * visible (fallback statique). `visibility:hidden` garde la boîte → zéro CLS. */
    html.rh-js .rh-s3 > img { visibility: hidden; }

    /* Couches peintes ICI SEULEMENT — exactement là où la géométrie garantit leur alignement sur
     * l'<img> masquée juste au-dessus (même garde). Le swap reste atomique : l'<img> disparaît et
     * les couches apparaissent sous la même condition, jamais l'une sans l'autre. */
    html.rh-js .rh-s3-band { display: block; }

    html.rh-js .rh-s3-band--0 .rh-s3-band__img { --rh-s3-b: var(--rh-s3-b0); }
    html.rh-js .rh-s3-band--1 .rh-s3-band__img { --rh-s3-b: var(--rh-s3-b1); }
    html.rh-js .rh-s3-band--2 .rh-s3-band__img { --rh-s3-b: var(--rh-s3-b2); }
    html.rh-js .rh-s3-band--3 .rh-s3-band__img { --rh-s3-b: var(--rh-s3-b3); }

    html.rh-js .rh-s3-band__img {
      will-change: transform, opacity;
      backface-visibility: hidden;
      animation-name: rh-s3-sweep;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-duration: auto;              /* piloté par la timeline, pas par le temps */
      animation-timeline: view();
      animation-range: cover 0% cover 100%;  /* toute la traversée du viewport */
    }
  }
}

/* Balayage : entrée (view 0%) quasi hors-cadre + transparent → centre (50%) au design, opaque
 * → sortie (100%) à l'opposé + transparent. Stops 25/75 % = plateau « stable au centre »
 * (≈ courbe quadratique) ; opacité 0.85 à mi-course = fondu doux (reste visible presque tout
 * du long, ne s'estompe qu'aux extrémités). --rh-s3-b = amplitude+sens de la bande (cf. :root). */
@keyframes rh-s3-sweep {
  0%   { transform: translate3d(0, var(--rh-s3-b, 0), 0);               opacity: 0; }
  25%  { transform: translate3d(0, calc(0.25 * var(--rh-s3-b, 0)), 0);  opacity: 0.85; }
  50%  { transform: translate3d(0, 0, 0);                               opacity: 1; }
  75%  { transform: translate3d(0, calc(-0.25 * var(--rh-s3-b, 0)), 0); opacity: 0.85; }
  100% { transform: translate3d(0, calc(-1 * var(--rh-s3-b, 0)), 0);    opacity: 0; }
}

/* prefers-reduced-motion : défense en profondeur (rh-js n'est de toute façon pas posé, donc les
 * couches ne sont même pas créées) → aucune animation, bandes fixes et opaques au design. */
@media (prefers-reduced-motion: reduce) {
  html .rh-s3-band__img {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto !important;
  }
}