/* ============================================================ Séquence d'ouverture — le logo Unik animé, puis la révélation ------------------------------------------------------------ 1. Un écran blanc plein cadre, sans bord ni arrondi. 2. Le logo joue son animation Lottie au centre. 3. Il fait un bond vers l'avant, puis remonte en rétrécissant pour se poser exactement là où vit le logo de la page. 4. L'écran blanc s'efface avec un flou, révélant le dégradé. 5. Le contenu monte en opacité depuis le bas. Réglages en haut de boot.js : durée, vitesse, une fois par session ou à chaque visite. ============================================================ */ /* Pendant la séquence, le scroll est verrouillé : si la page bougeait, la cible du voyage se déplaçait et le logo atterrissait à côté avant de se recaler d'un coup. Libéré dès la fin — le glisser-pour-actualiser redevient donc disponible. */ html.booting, html.booting body{ overflow: hidden; height: 100% } #boot{ position: fixed; inset: 0; z-index: 200; background: #FFFFFF; display: grid; place-items: center; /* Aucun arrondi, aucune marge : l'écran blanc EST la page. */ border-radius: 0; transition: opacity .6s var(--ease-out-expo); will-change: opacity; } /* Sortie : le blanc s'efface, sans flou ni mise à l'échelle. Le logo n'est plus dedans, donc il traverse la transition sans être affecté. */ #boot.out{ opacity: 0; pointer-events: none } /* Le logo est un calque à part, au-dessus de l'écran blanc. La taille vit dans une variable et le centrage en découle : plus de marge négative à tenir en cohérence avec la largeur. C'était la cause du décalage vers la gauche, et du logo qui partait en haut à gauche après réimplantation, la marge continuant de s'appliquer. */ #boot-logo{ --size: min(52vw, 240px); position: fixed; width: var(--size); height: var(--size); left: calc(50% - var(--size) / 2); top: calc(50% - var(--size) / 2); margin: 0; z-index: 205; transform-origin: center center; pointer-events: none; transform-origin: center center; will-change: transform; } #boot-logo svg{ display: block; width: 100%; height: 100% } /* Le Lottie ne bouge pas : c'est le logotype SVG qui voyage, posé sur lui à la fin de l'animation (voir boot.js). */ /* Le voyage du logotype, avec deux rebonds : · au départ, il s'enfonce légèrement et grossit d'un cheveu — comme s'il prenait appui avant de partir · à l'arrivée, il dépasse un peu vers le haut puis redescend se poser --dx / --dy / --s sont calculés en JS sur la position réelle de la cible. */ @keyframes relay-travel{ /* Mouvement du logo — 920 ms ------------------------------------------------------------ Il s'accroupit doucement, il remonte, et il se pose en deux oscillations à peine marquées. Réglages : · départ progressif — la spec Figma cubic-bezier(0, .5, 0, 1) a une pente initiale infinie et faisait décrocher le logo. · aucune courbe ne freine à un extremum pour en repartir lentement : ça créait un arrêt visible au sommet. · demi-périodes resserrées (280 → 180 → 140 → 120 ms) — c'est ce resserrement qui se lit comme un amortissement. · amplitudes 4,0 % → 1,2 % → 0,35 %. Une oscillation de moins que la version précédente, et deux fois moins d'amplitude. Pour renforcer, multiplier les écarts à 1 (1.04 → 1.06 etc.). ------------------------------------------------------------ */ /* il s'accroupit — position seule, échelle intacte */ 0% { transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(.40, .02, .58, 1) } /* creux : l'élan est pris, et il repart vite */ 21.7% { transform: translate(0, var(--dip, 24px)) scale(1); animation-timing-function: cubic-bezier(.20, .72, .35, 1) } /* il monte et dépasse de 4 % */ 52.2% { transform: translate(calc(var(--dx) * 1.002), calc(var(--dy) * 1.040)) scale(calc(var(--s) * .988)); animation-timing-function: cubic-bezier(.45, 0, .55, 1) } /* il repasse 1,2 % sous sa place */ 71.7% { transform: translate(var(--dx), calc(var(--dy) * .988)) scale(calc(var(--s) * 1.004)); animation-timing-function: cubic-bezier(.45, 0, .55, 1) } /* dernier frémissement, 0,35 % */ 87% { transform: translate(var(--dx), calc(var(--dy) * 1.0035)) scale(calc(var(--s) * .999)); animation-timing-function: cubic-bezier(.4, 0, .5, 1) } /* posé */ 100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)) } } /* ---------- le contenu attend son tour ---------- Sans JavaScript, le panneau s'anime normalement : la règle par défaut reste active et rien ne dépend du script. */ /* Le PANNEAU ne change jamais d'opacité — ce sont ses enfants qui attendent leur tour. Sinon le logo, réimplanté dans l'en-tête à la fin du voyage, héritait d'une opacité en cours de transition et semblait clignoter juste après s'être posé. L'écran blanc le masque de toute façon jusqu'à la révélation. */ html.js .wrap{ animation: none } html.js .wrap > *{ opacity: 0 } /* Le panneau ne se transforme pas non plus : il déplacerait la cible du voyage. Le dézoom est porté par son contenu. */ html.js .wrap.in{ animation: none; opacity: 1 } /* Le contenu intérieur monte un cran après le panneau. */ /* Le fondu du contenu s'applique aux enfants directs du panneau, SAUF l'en-tête — car le logo vit dedans, et il vient d'arriver par son propre voyage. L'en-tête était animé en bloc, donc le logo repartait d'une opacité nulle juste après s'être posé : c'était ça le clignotement. */ html.js .wrap.in > *:not(header), html.js .wrap.in > header > *:not(.mark){ animation: boot-content .85s var(--ease-out-expo) both; animation-delay: calc(140ms + var(--i, 0) * 60ms); } html.js .wrap.in > header{ animation: none; opacity: 1 } /* Le logo n'a aucune animation d'apparition : il arrive par son voyage. */ html.js .wrap .mark, html.js .wrap.in .mark{ animation: none; opacity: 1 } @keyframes boot-content{ from{ opacity: 0; transform: scale(1.04) translateY(16px) } to { opacity: 1; transform: none } } @media (prefers-reduced-motion: reduce){ #boot{ display: none } html.js .wrap{ animation: none; opacity: 1 } html.js .wrap.in > *{ animation: none } }