/* ============================================================================ zs-motion-v1-20260902.css · LA GRAMMAIRE DES TROIS VITESSES · la feuille ---------------------------------------------------------------------------- ▸ Vitesse 1 · l'entrée de page · les blocs paraissent au scroll, les grands titres Fraunces reçoivent le balayage d'or de la maison (la technique du livre blanc, héritée telle quelle · dégradé découpé dans le texte). ▸ Vitesse 2 · la vie permanente · rien ici, les orbes vivent déjà. Seule la micro parallaxe des semis d'étoiles (transform pur, pilotée par zs-motion). ▸ Vitesse 3 · l'instant · le survol qui révèle. ⛔ LES TROIS GARDES · prefers-reduced-motion coupe TOUT · aucune propriété qui touche la mise en page (opacity et transform seulement, la place est déjà prise) · un onglet en arrière plan ne consomme rien (rAF gelé). ⛔ Sans JavaScript, rien n'est caché · c'est le script qui arme .zsm-rev, jamais le HTML servi. Une page sans script est une page entière. ============================================================================ */ /* ── VITESSE 1 · l'apparition ──────────────────────────────────────────── */ .zsm-rev{opacity:0;transform:translateY(16px); transition:opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--zsm-i,0)*70ms);will-change:opacity,transform} .zsm-rev.zsm-vu{opacity:1;transform:none} /* le repli sans IntersectionObserver et l'impression · tout est là */ .zsm-tout .zsm-rev{opacity:1;transform:none} @media print{.zsm-rev{opacity:1!important;transform:none!important}} /* la voie 2026 · l'animation pilotée par le scroll elle même, réversible. zs-motion pose .zsm-sd sur quand le navigateur la porte · la transition ci dessus se tait, la timeline de vue prend la main. */ .zsm-sd .zsm-rev{transition:none;opacity:1;transform:none; animation:zsmEntre .8s cubic-bezier(.2,.8,.2,1) both; animation-timeline:view();animation-range:entry 8% entry 52%} @keyframes zsmEntre{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* ── VITESSE 1 · le balayage d'or des grands titres ──────────────────────── La technique du livre blanc, au caractère près · le titre EST un dégradé découpé dans le texte, et le balayage est un déplacement de fond. */ .zsm-or{position:relative; background:linear-gradient(96deg,#FFF5E6 22%,#FFD480 46%,#fff 54%,#FFF5E6 78%); background-size:280% 100%;background-position:120% 0; -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent!important} .zsm-or.zsm-vu{animation:zsmBalayage 1.8s .25s cubic-bezier(.4,0,.2,1) forwards} @keyframes zsmBalayage{to{background-position:-40% 0}} /* ✦ l'égg de 20 h 26 · à l'heure de la naissance de l'Oracle, l'or se rosit */ .zsm-2026 .zsm-or{background:linear-gradient(96deg,#FFF5E6 22%,#FF1F8B 46%,#FFD480 54%,#FFF5E6 78%); background-size:280% 100%;background-position:120% 0; -webkit-background-clip:text;background-clip:text} /* ── VITESSE 2 · la micro parallaxe ──────────────────────────────────────── [data-zsm-para="0.12"] · le script traduit le scroll en translateY. Transform pur · aucune mise en page ne bouge, jamais. */ [data-zsm-para]{will-change:transform} /* ── VITESSE 3 · le survol qui révèle ─────────────────────────────────── */ .zsm-survol{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s} @media(hover:hover){ .zsm-survol:hover{transform:translateY(-3px); box-shadow:0 14px 44px rgba(255,31,139,.14),0 4px 18px rgba(255,212,128,.10)} } .zsm-dit{position:relative} .zsm-dit>.zsm-mot{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px); font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.28em;text-transform:uppercase; color:#FFD480;background:rgba(5,0,16,.94);border:1px solid rgba(255,212,128,.38); padding:7px 12px;white-space:nowrap;opacity:0;pointer-events:none; transition:opacity .3s,transform .3s} @media(hover:hover){.zsm-dit:hover>.zsm-mot{opacity:1;transform:translateX(-50%)}} /* ── LES PASSAGES ENTRE PAGES · View Transitions ────────────────────────── On ne recharge pas un univers, on s'y déplace. L'at-rule est ignorée par les navigateurs qui ne la portent pas · c'est son repli naturel. */ @media(prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} ::view-transition-old(root){animation:zsmVaTo .28s ease both} ::view-transition-new(root){animation:zsmVient .34s ease both} @keyframes zsmVaTo{to{opacity:0}} @keyframes zsmVient{from{opacity:0}} } /* ── LA GARDE MAÎTRESSE · le lecteur a demandé moins de mouvement ───────── */ @media(prefers-reduced-motion:reduce){ .zsm-rev,.zsm-sd .zsm-rev{opacity:1!important;transform:none!important;animation:none!important;transition:none!important} .zsm-or,.zsm-or.zsm-vu{animation:none!important;background-position:-40% 0} [data-zsm-para]{transform:none!important} .zsm-survol,.zsm-survol:hover{transform:none!important;transition:none!important} .zsm-dit>.zsm-mot{transition:none!important} }