/* ========================================================= Horizon Immobilier — transitions.css Transition de page type "rideau" entre les pages internes ========================================================= */ .page-transition { position: fixed; inset: 0; z-index: 10000; pointer-events: none; display: flex; align-items: center; justify-content: center; background: var(--c-dark, #0a0a0a); transform: translateY(100%); transition: transform 1.2s cubic-bezier(.65, 0, .35, 1); will-change: transform; } /* Phase 1 : le rideau monte et couvre l'écran */ .page-transition.is-covering { transform: translateY(0); pointer-events: all; } /* Phase 2 (page suivante) : le rideau, déjà en haut, sort par le haut */ .page-transition.is-revealing { transform: translateY(-100%); } /* Marque centrée sur le rideau */ .page-transition__brand { display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; transform: translateY(14px); transition: opacity .5s ease .15s, transform .5s ease .15s; } .page-transition.is-covering .page-transition__brand { opacity: 1; transform: translateY(0); } .page-transition__title { font-family: 'Playfair Display', serif; font-size: 2rem; font-style: italic; font-weight: 400; color: var(--c-gold-light, #d8c9a8); letter-spacing: .04em; } .page-transition__line { width: 60px; height: 1px; background: var(--c-gold, #b89968); position: relative; overflow: hidden; } .page-transition__line::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--c-gold-light, #d8c9a8); } .page-transition.is-covering .page-transition__line::after { animation: line-sweep 1.1s ease-out .25s forwards; } @keyframes line-sweep { to { left: 100%; } } .page-transition__sub { font-size: .7rem; letter-spacing: .35em; text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 500; } /* ---------- Arrivée douce sur la nouvelle page ---------- Quand on arrive d'une transition, html.is-page-entering est posé en inline dans le AVANT le rendu — un overlay noir plein écran recouvre immédiatement la page. JS ajoute ensuite .is-page-ready et l'overlay fade out, révélant la page dessous : continuité parfaite entre le rideau de l'ancienne page et l'apparition de la nouvelle. */ html.is-page-entering::after { content: ""; position: fixed; inset: 0; z-index: 9999; background: var(--c-dark, #0a0a0a); opacity: 1; pointer-events: none; transition: opacity .9s cubic-bezier(.4, 0, .2, 1); } html.is-page-entering.is-page-ready::after { opacity: 0; } /* ---------- Réduction de mouvement ---------- */ @media (prefers-reduced-motion: reduce) { .page-transition { display: none !important; } html.is-page-entering::after { display: none !important; } }