/* ============================================================ 87seconds — apparitions du HERO (proposition « 2 · Diaphragme ») Extrait du banc d'essai `motion/` : on ne reprend que ce que le client a retenu — l'ENTRÉE des textes et des visuels, plus la parallaxe des visuels. Le hero long épinglé, la dérive du texte au scroll, la dispersion, la turbulence et le survol galerie restent dans le banc d'essai et ne sont pas embarqués ici. FICHIER ADDITIF : aucune feuille existante n'est modifiée. Tout est sous `.mo-on`, classe posée sur par le script en ligne du . Sans JavaScript la classe n'existe pas : la page reste dans son état final, entièrement visible. Le périmètre est le HERO SEUL — les sélecteurs sont tous préfixés par `.hero`, pour que le reste de la page garde ses apparitions `.rv` d'origine. ============================================================ */ :root { /* Courbe « expo.out » : départ très rapide, arrivée très longue. C'est elle qui donne le mouvement posé ; une courbe symétrique (ease-in-out) rend le geste mécanique. */ --mo-ease: cubic-bezier(.16, 1, .3, 1); --mo-dur-text: 1s; --mo-dur-img: 1.15s; /* Le dézoom dure près de TROIS FOIS l'ouverture du cadre. C'est le rapport, pas la valeur, qui fait l'effet : le cadre a fini de s'ouvrir depuis longtemps et l'image continue de se poser. */ --mo-dur-zoom: 3.2s; /* La courbe expo place ~80 % du trajet dans le premier quart : sur 3,2 s elle ferait un à-coup puis un rampement. Le dézoom prend donc un ease-out franc. */ --mo-ease-zoom: ease-out; --mo-zoom-scale: 1.28; } /* ------------------------------------------------------------ 1. Anti-flash Le découpage en mots a lieu au DOMContentLoaded : entre le premier rendu et ce moment-là, le texte serait visible puis masqué. On le masque donc dès la feuille de style, et le script rend la main en posant `.mo-split` / `.mo-img`. ------------------------------------------------------------ */ .mo-on .hero :is(.h-title, .h-baseline, .hero-art figure):not(.mo-split):not(.mo-img) { opacity: 0; } /* ------------------------------------------------------------ 2. Texte — ouverture par mot Chaque mot est enveloppé dans `.mo-w` (la fenêtre, en overflow:hidden) qui contient `.mo-i` (le mot). Le rembourrage compense les jambages : sans lui, le masque coupe le bas des « g », « p », « y ». `vertical-align:top` aligne toutes les fenêtres d'une même ligne sur le même `offsetTop` — c'est ce que le script mesure pour regrouper les mots par ligne visuelle. ------------------------------------------------------------ */ .hero .mo-split { opacity: 1; } .hero .mo-w { display: inline-block; vertical-align: top; overflow: hidden; padding: .08em 0 .2em; margin: -.08em 0 -.2em; } /* Diaphragme : le texte s'ouvre COMME les visuels — un cadre qui s'écarte depuis sa ligne médiane — plutôt que de monter. Appliqué au MOT, pas au bloc : chaque mot garde le `--mo-d` mesuré par cadence() (hero-motion.js), qui regroupe les mots par LIGNE VISUELLE. Les mots d'une même ligne s'ouvrent donc quasi ensemble, et chaque ligne suit la précédente : ça se lit « ligne par ligne » sans avoir à réorganiser le DOM en un conteneur par ligne. */ .hero .mo-i { display: inline-block; clip-path: inset(50% 0 50% 0); transition: clip-path var(--mo-dur-text) var(--mo-ease); transition-delay: calc(var(--mo-base, 0s) + var(--mo-d, 0s)); } .hero .mo-split.is-in .mo-i { clip-path: inset(0 0 0 0); } /* ------------------------------------------------------------ 3. Visuels — le cadre s'ouvre depuis sa ligne médiane, et le contenu se dézoome longuement derrière. ------------------------------------------------------------ */ .hero .mo-img { opacity: 1; clip-path: inset(50% 0 50% 0); transition-property: clip-path; transition-duration: var(--mo-dur-img); transition-timing-function: var(--mo-ease); transition-delay: var(--mo-base, 0s); } .hero .mo-img.is-in { clip-path: inset(0 0 0 0); } .hero .mo-zoom { transform: scale(var(--mo-zoom-scale)); transition: transform var(--mo-dur-zoom) var(--mo-ease-zoom); transition-delay: var(--mo-base, 0s); } .hero .mo-img.is-in .mo-zoom { transform: scale(1); } /* ------------------------------------------------------------ 3 bis. Logo 87s — mode « pop » Anti-flash : le est encore un enfant DIRECT de `.hero-sign` (pas encore enveloppé par initLogo(), qui tourne en JS différé) au tout premier rendu. Le sélecteur `>` cesse de s'appliquer dès que le script déplace l'image dans `.mo-logo` : aucune classe à retirer, la structure du DOM suffit. ------------------------------------------------------------ */ .mo-on .hero-sign > img { clip-path: circle(37.5% at 50% 50%); } .hero .mo-logo > img { clip-path: none; } .hero .mo-logo { display: inline-block; opacity: 0; transform: scale(.72) rotate(-9deg); transition: opacity .6s var(--mo-ease), transform .7s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--mo-base, 0s); } .hero .mo-logo.is-in { opacity: 1; transform: scale(1) rotate(0deg); } /* ------------------------------------------------------------ 4. Pastille NOW Elle porte déjà `transform: rotate(-8.4deg)` en base (r-home.css). On neutralise ce `transform` et on le REMPLACE par la propriété INDIVIDUELLE `rotate`, qui se compose avec `scale` — elle aussi individuelle — sans que l'une écrase l'autre : la pastille part droite et arrive penchée, au lieu d'arriver déjà penchée. ------------------------------------------------------------ */ .mo-on .hero .badge-now { transform: none; rotate: 0deg; opacity: 0; scale: .82; transition: opacity .7s var(--mo-ease), scale .9s var(--mo-ease), rotate .8s var(--mo-ease); transition-delay: var(--mo-base, 0s); } .mo-on .hero .badge-now.is-in { opacity: 1; scale: 1; rotate: -8.4deg; } /* ------------------------------------------------------------ 5. Parallaxe Le décalage est écrit par le script dans la propriété `translate` (et non `transform`) : les propriétés individuelles s'appliquent AVANT `transform`, donc la parallaxe se compose proprement avec le dézoom des visuels au lieu de l'écraser. ------------------------------------------------------------ */ .hero .mo-px { will-change: transform; } /* ------------------------------------------------------------ 6. Accessibilité — tout est neutralisé ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .mo-on .hero :is(.h-title, .h-baseline, .hero-art figure, .badge-now) { opacity: 1; } .hero .mo-i, .hero .mo-zoom { transform: none; clip-path: none; transition: none; } .hero .mo-img { clip-path: none; transition: none; } .hero .mo-logo { opacity: 1; transform: none; transition: none; } .mo-on .hero-sign > img { clip-path: none; } .mo-on .hero .badge-now { transform: rotate(-8.4deg); rotate: none; scale: 1; transition: none; } .hero .mo-px { translate: none !important; will-change: auto; } }