/* Apparitions au défilement des pages Découvrir. Chaque bloc a son geste, comme sur les pages Apple :
   montée, pose (échelle), rideau, gravure, glissé latéral, chute, paquet de cartes. Une seule lecture par bloc.
   On n'anime que opacity, filter, clip-path et les propriétés indépendantes translate / scale :
   les transform existants (italiques penchés, téléphones centrés) restent intacts.
   `backwards` : à la fin, l'élément retrouve exactement son style d'origine. */
:root{--rv-ease:cubic-bezier(.22,1,.36,1);--rv-soft:cubic-bezier(.33,1,.68,1)}
html.rv body{overflow-x:clip}
html.rv [data-rv]:not(.rv-in){opacity:0}
html.rv [data-rv].rv-in{animation-duration:var(--rv-dur,900ms);animation-timing-function:var(--rv-ease);animation-delay:var(--rv-delay,0ms);animation-fill-mode:backwards}

html.rv [data-rv=rise].rv-in{animation-name:rv-rise}
html.rv [data-rv=settle].rv-in{animation-name:rv-settle;--rv-dur:1400ms}
html.rv [data-rv=line].rv-in{animation-name:rv-line;--rv-dur:1000ms}
html.rv [data-rv=blur].rv-in{animation-name:rv-blur;--rv-dur:1100ms}
html.rv [data-rv=slide-l].rv-in{animation-name:rv-slide-l;--rv-dur:1000ms}
html.rv [data-rv=drop].rv-in{animation-name:rv-drop;--rv-dur:1000ms;animation-timing-function:var(--rv-soft)}

/* Textes, avec retenue et fluidité : montée seule (ni flou ni grossissement), courbe douce
   sans démarrage brusque, mouvements longs qui se chevauchent pour former un seul geste continu.
   Retours de Franck : le mot par mot faisait « kéké », puis « ça manque de fluidité ». */
html.rv [data-rv=soft].rv-in{animation-name:rv-soft;--rv-dur:1300ms;animation-timing-function:var(--rv-soft)}
html.rv .hero [data-rv=settle].rv-in{animation-name:rv-settle-soft;--rv-dur:1500ms;animation-timing-function:var(--rv-soft)}
/* Gravure (logo ALPHA) : le dessin se découvre de gauche à droite. */
html.rv [data-rv=wipe].rv-in{animation-name:rv-wipe;--rv-dur:1500ms;animation-timing-function:var(--rv-soft)}

@keyframes rv-soft{from{opacity:0;translate:0 26px}}
@keyframes rv-settle-soft{from{opacity:0;scale:1.035}}
@keyframes rv-wipe{0%{opacity:0;clip-path:inset(-5% 100% -5% -5%)}25%{opacity:1}100%{opacity:1;clip-path:inset(-5% -5% -5% -5%)}}
@keyframes rv-rise{from{opacity:0;translate:0 28px}}
@keyframes rv-settle{from{opacity:0;scale:1.06}}
@keyframes rv-drop{from{opacity:0;translate:0 -22px}}
/* Rideau : le texte monte d'une hauteur de ligne, le haut de la découpe reste à sa place d'origine.
   La découpe ne coupe que verticalement : les titres en accent débordent de leur cadre avant d'être
   resserrés (« SE CONSTRUIT » : 427 pt de texte pour 334 pt de cadre), d'où -100 % sur les côtés. */
@keyframes rv-line{from{opacity:0;translate:0 100%;clip-path:inset(-100% -100% 100% -100%)}to{opacity:1;translate:0 0;clip-path:inset(-20% -100% -20% -100%)}}
@keyframes rv-blur{from{opacity:0;filter:blur(12px);translate:0 10px}}
@keyframes rv-slide-l{from{opacity:0;translate:-44px 0}}
@keyframes rv-lift{from{translate:0 60px;scale:.96}}

/* Appareils : progression attachée au défilement (timeline de vue), calculée par le navigateur au
   rythme du défilement lui-même. Jamais de transparence ni de rotation (retours de Franck, 05/10) :
   des gestes pleins — glisser, monter, grandir, se poser. Le mouvement repart en arrière si l'on remonte.
   Navigateur sans cette fonction : l'appareil est simplement affiché, immobile.
   Longhands seulement : le raccourci `animation` remettrait animation-timeline à zéro. */
@supports(animation-timeline:view()){
/* Textes, chiffres et boutons hors haut de page : même gestes, mais suivant le défilement.
   Le mouvement commence quand l'élément entre par le bas et se termine vers les deux tiers de l'écran ;
   --rv-k décale légèrement les éléments d'un même bloc. `backwards` : passé la fin, style d'origine exact. */
html.rv [data-sv]{animation-timeline:view();animation-duration:auto;animation-fill-mode:backwards;animation-timing-function:var(--rv-soft);animation-range:entry calc(10% + var(--rv-k,0) * 3%) cover calc(32% + var(--rv-k,0) * 3%)}
html.rv :is([data-sv=soft],[data-sv=rise]){animation-name:rv-soft}
html.rv [data-sv=line]{animation-name:rv-line}
html.rv [data-sv=blur]{animation-name:rv-blur}
html.rv [data-sv=slide-l]{animation-name:rv-slide-l}
html.rv [data-sv=drop]{animation-name:rv-drop}
html.rv [data-sv=settle]{animation-name:rv-settle}
html.rv [data-sv=wipe]{animation-name:rv-wipe}
html.rv [data-scrub]{animation-timeline:view();animation-range:entry 0% contain 12%;animation-duration:auto;animation-fill-mode:both;animation-timing-function:var(--rv-soft)}
html.rv [data-scrub=lift]{animation-name:rv-lift}
/* Paquet de cartes (trois iPhone) : aucune opacité animée, rien ne se voit à travers.
   Retour de Franck : l'ancien éventail en fondu laissait voir les téléphones les uns à travers les autres. */
html.rv :is([data-scrub=deck],[data-scrub=deck-front]){animation-range:entry 25% cover 45%;animation-timing-function:cubic-bezier(.3,.7,.4,1)}
html.rv [data-scrub=deck]{animation-name:rv-deck}
html.rv [data-scrub=deck-front]{animation-name:rv-deck-front}
/* Gestes amples, qui durent jusqu'à ce que l'élément arrive vers le milieu de l'écran, là où on le
   regarde. Retour de Franck : trop léger, déjà fini à l'arrivée. */
html.rv :is([data-scrub=sweep-l],[data-scrub=sweep-r],[data-scrub=rise-big],[data-scrub=land],[data-scrub=in-l],[data-scrub=in-r],[data-scrub=stand]){animation-range:entry 10% cover 40%;animation-timing-function:cubic-bezier(.3,.7,.4,1)}
html.rv [data-scrub=sweep-l]{animation-name:rv-sweep-l}
html.rv [data-scrub=sweep-r]{animation-name:rv-sweep-r}
html.rv [data-scrub=rise-big]{animation-name:rv-rise-big}
/* Pose (iPhone couché d'ALPHA) : il descend légèrement et vient se poser sur la table. */
html.rv [data-scrub=land]{animation-name:rv-land}
/* Arrivées latérales (séances et légendes autour d'un appareil). */
html.rv [data-scrub=in-l]{animation-name:rv-in-l}
html.rv [data-scrub=in-r]{animation-name:rv-in-r}
/* Monter droit (PMT) : l'appareil monte et grandit légèrement. Plus de bascule : une image plate qui pivote
   se voit (retour de Franck, 05/10 : « c'est bien quand c'est un vrai téléphone en 3D, pas une image »). */
html.rv [data-scrub=stand]{animation-name:rv-stand}
/* Vague (formats de CIRCUIT) : des appareils côte à côte montent l'un après l'autre ; --rv-k décale chacun. */
html.rv [data-scrub=wave]{animation-name:rv-wave;animation-range:entry calc(20% + var(--rv-k,0) * 10%) cover calc(40% + var(--rv-k,0) * 4%);animation-timing-function:cubic-bezier(.3,.7,.4,1)}
}
/* Deuxième retour de Franck : « pas super ample ». Distance doublée (bornée sur téléphone) et profondeur. */
@keyframes rv-sweep-l{from{translate:max(-300px,-45vw) 0;scale:.84}}
@keyframes rv-sweep-r{from{translate:min(300px,45vw) 0;scale:.84}}
@keyframes rv-rise-big{from{translate:0 320px;scale:.8}}
@keyframes rv-deck{from{translate:var(--deck-x,0) 90px;scale:.9}}
@keyframes rv-deck-front{from{translate:0 90px}}
@keyframes rv-land{from{translate:0 -80px;scale:1.06}}
@keyframes rv-in-l{from{translate:max(-140px,-30vw) 0}}
@keyframes rv-in-r{from{translate:min(140px,30vw) 0}}
@keyframes rv-stand{from{translate:0 140px;scale:.9}}
/* Vague, sans aucune transparence (retour de Franck : le fondu « fait on ne savait pas quoi faire ») :
   chaque appareil part plus petit et un peu plus bas, puis grandit jusqu'à sa taille, l'un après l'autre.
   (Une sortie de fente a été essayée : les téléphones, plus hauts que la moitié de l'écran, la jouaient hors de vue.) */
@keyframes rv-wave{from{translate:0 80px;scale:.75}}

@media(prefers-reduced-motion:reduce){
@keyframes rv-soft{from{opacity:0}}
@keyframes rv-settle-soft{from{opacity:0}}
@keyframes rv-wipe{from{opacity:0}}
@keyframes rv-rise{from{opacity:0}}
@keyframes rv-settle{from{opacity:0}}
@keyframes rv-drop{from{opacity:0}}
@keyframes rv-line{from{opacity:0}}
@keyframes rv-blur{from{opacity:0}}
@keyframes rv-slide-l{from{opacity:0}}
@keyframes rv-lift{from{}}
@keyframes rv-sweep-l{from{}}
@keyframes rv-sweep-r{from{}}
@keyframes rv-rise-big{from{}}
@keyframes rv-deck{from{}}
@keyframes rv-deck-front{from{}}
@keyframes rv-land{from{}}
@keyframes rv-in-l{from{}}
@keyframes rv-in-r{from{}}
@keyframes rv-stand{from{}}
@keyframes rv-wave{from{}}
}