/* Activer les Cross-document View Transitions */ @view-transition { navigation: auto; } /* Désactiver l'animation par défaut du root pour garder le contrôle total */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; } /* ── Overlay ───────────────────────────────────────────────── */ .page-transition-overlay { position: fixed; inset: 0; background: var(--wp--preset--color--secondary); z-index: 99999; display: flex; align-items: center; justify-content: center; clip-path: inset(100% 0 0 0); pointer-events: none; will-change: clip-path; } .page-transition-overlay img { max-width: 220px; width: 70px; opacity: 0; } /* ── Keyframes ─────────────────────────────────────────────── */ /* L'overlay monte depuis le bas (départ de page) */ @keyframes overlayReveal { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0% 0 0 0); } } /* L'overlay se retire vers le bas (arrivée sur la nouvelle page) */ @keyframes overlayHide { from { clip-path: inset(0% 0 0 0); } to { clip-path: inset(0 0 100% 0); } } /* L'ours apparaît au milieu de l'animation de montée */ @keyframes bearFadeIn { 0%, 40% { opacity: 0; transform: scale(0.8) translateY(16px); } 100% { opacity: 1; transform: translateY(0); } } /* ── États ─────────────────────────────────────────────────── */ /* Phase départ : l'overlay couvre l'écran en montant */ .page-transition-overlay.is-entering { animation: overlayReveal 0.4s cubic-bezier(0.76, 0, 0.24, 1) forwards; } .page-transition-overlay.is-entering img { animation: bearFadeIn 0.2s ease 0.2s forwards; } /* Phase arrivée : l'overlay se retire vers le bas (classe posée avant le premier rendu via ) */ [data-transition="leaving"] .page-transition-overlay { clip-path: inset(0% 0 0 0); animation: overlayHide 0.5s cubic-bezier(0.76, 0, 0.24, 1) forwards; } [data-transition="leaving"] .page-transition-overlay img { opacity: 1; }