/** * Glint Flow — intro de la page d'accueil (phase 2b). * * Écran noir + barre de progression rose + compteur 000→100 piloté par le * chargement réel des images (simulé pour l'instant via picsum.photos, à * remplacer par les `images` de glintvideo). À 100 % : compteur out → images * convergent → héro in → menu in. * * Couvert dès le 1er paint via html.glintflow-home (posé en ) → aucun * flash. Couleurs via tokens. Non layered. */ .glintflow-intro { position: fixed; inset: 0; z-index: 10000; /* au-dessus de l'overlay de transition (9999) */ background: var( --wp--preset--color--black, #222233 ); overflow: hidden; visibility: hidden; opacity: 0; pointer-events: none; } html.glintflow-home .glintflow-intro { visibility: visible; opacity: 1; /* pointer-events reste none : l'intro est purement visuelle. Les clics passent en transparence → glintflow-transitions les capte. */ } /* Scène où apparaissent les images préchargées (côté droit au repos). */ .glintflow-intro__stage { position: absolute; inset: 0; } .glintflow-intro__img { position: absolute; left: 50%; top: 50%; height: min( 42vh, 1080px ); width: auto; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0; /* GSAP gère position, scale et opacité */ will-change: transform, opacity; box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.45 ); } /* Compteur central (chiffres qui défilent de bas en haut). mix-blend-mode: difference → blanc vire au noir sur fond rose clair, reste blanc sur fond noir. Contraste garanti sans changer la couleur. */ .glintflow-intro__counter { position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% ); display: flex; gap: 0.02em; color: var( --wp--preset--color--white, #fff ); font-family: var( --wp--preset--font-family--pp-monument-extended, sans-serif ); font-size: clamp( 3rem, 2rem + 8vw, 9rem ); line-height: 1; letter-spacing: -0.02em; mix-blend-mode: difference; isolation: isolate; } .glintflow-intro__digit { display: inline-block; height: 1em; overflow: hidden; width: 1ch; /* largeur exacte du « 0 » dans la fonte chargée */ text-align: center; } .glintflow-intro__digit-strip { display: block; will-change: transform; } .glintflow-intro__digit-strip span { display: block; height: 1em; } /* Transition CSS pour le roulement des chiffres et la barre. Désactivée automatiquement en prefers-reduced-motion. */ @media ( prefers-reduced-motion: no-preference ) { .glintflow-intro__digit-strip { transition: transform 0.35s cubic-bezier( 0.4, 0, 0.2, 1 ); } .glintflow-intro__bar-fill { transition: width 0.4s ease-out; } } .glintflow-intro__pct { align-self: flex-start; font-size: 0.4em; margin-left: 0.15em; opacity: 0.7; } /* Fond rose pleine hauteur : s'élargit de gauche→droite selon la progression. Positionné en 1er dans le DOM → derrière le stage (images) et le counter. */ .glintflow-intro__bar { position: absolute; inset: 0; pointer-events: none; } .glintflow-intro__bar-fill { display: block; height: 100%; width: 0%; background: var( --wp--preset--color--background, #fbecef ); } /* Élément du header animé « en dernier » par le menu-in (non destructif). */ html.glintflow-home .glint-header { will-change: opacity, transform; } @media ( prefers-reduced-motion: reduce ) { .glintflow-intro__img { display: none; } }