/* ============================================================ HERO v2 - couche d'entree animee pour l'accueil Candidat a l'integration : ce fichier n'ecrase RIEN de style.css, il n'ajoute que des regles prefixees `hv2-` plus deux proprietes de pile sur des selecteurs existants. Tout est conditionne a `.hv2-ready`, posee par un script inline en . Sans JavaScript la classe n'existe pas : le hero s'affiche normalement, sans animation et sans rien de masque. ============================================================ */ /* --- Le trace lumineux --- Insere en PREMIER enfant de .hero : a z-index egal, l'ordre du DOM decide, donc les figures decoratives (.hero-deco) restent au-dessus du trace. */ #hv2-trace { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* Le bloc central doit passer devant le canvas. */ .hero .hero-inner { position: relative; z-index: 1; } /* --- Figures 3D dans les panneaux lateraux --- Le canvas prend la place d'un .deco-svg. Le rapport 1/1,1 reprend celui des figures existantes (400x445) pour que la rotation ne fasse pas sauter la hauteur du panneau. */ .hv2-canvas3d { display: block; width: 100%; aspect-ratio: 400 / 445; } /* --- Entree du bloc central --- Etat masque uniquement si le JS est la. `will-change` est pose une fois, jamais ajoute puis retire autour de l'animation. */ .hv2-ready .hv2-el { opacity: 0; transform: translateY(18px); will-change: opacity, transform; } .hv2-play .hv2-el { animation: hv2-monte 0.72s cubic-bezier(0.16, 0.9, 0.24, 1) var(--hv2-d, 0s) forwards; } @keyframes hv2-monte { to { opacity: 1; transform: none; } } /* La mascotte arrive en se posant, pas en glissant. */ .hv2-ready .hv2-logo { opacity: 0; transform: scale(0.86); will-change: opacity, transform; } .hv2-play .hv2-logo { animation: hv2-pose 0.86s cubic-bezier(0.2, 0.9, 0.25, 1) var(--hv2-d, 0s) forwards; } @keyframes hv2-pose { to { opacity: 1; transform: scale(1); } } /* Un seul halo, au moment ou la mascotte se pose : la signature de la marque est le cercle rose, on l'appuie une fois puis on n'y revient plus. */ .hv2-play .hv2-logo { animation-name: hv2-pose, hv2-halo; animation-duration: 0.86s, 1.5s; animation-delay: var(--hv2-d, 0s), calc(var(--hv2-d, 0s) + 0.45s); animation-timing-function: cubic-bezier(0.2, 0.9, 0.25, 1), ease-out; animation-fill-mode: forwards, none; } @keyframes hv2-halo { 0% { box-shadow: 0 0 0 0 rgba(225, 50, 128, 0.55); } 70% { box-shadow: 0 0 0 26px rgba(225, 50, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(225, 50, 128, 0); } } /* --- Titre revele mot a mot --- Chaque mot glisse depuis sous une ligne de masque. Le mot garde un `padding-bottom` pour que les jambages (p, g, j) ne soient pas rognes. */ .hv2-mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; } .hv2-ready .hv2-mot > span { display: inline-block; transform: translateY(112%); opacity: 0; will-change: opacity, transform; } .hv2-play .hv2-mot > span { animation: hv2-mot-monte 0.8s cubic-bezier(0.16, 0.9, 0.24, 1) var(--hv2-d, 0s) forwards; } @keyframes hv2-mot-monte { to { opacity: 1; transform: none; } } /* --- Mouvement reduit --- Rendu final immediat : l'information passe, rien ne bouge. */ @media (prefers-reduced-motion: reduce) { .hv2-ready .hv2-el, .hv2-ready .hv2-logo, .hv2-ready .hv2-mot > span { opacity: 1; transform: none; animation: none; } .hv2-play .hv2-el, .hv2-play .hv2-logo, .hv2-play .hv2-mot > span { animation: none; } }