/* ════════════════════════════════════════════════════════════════════ Page Transition — "Telón de tinta". El overlay ya no es un fundido blanco: es un telón marfil con textura de papel que SUBE como el telón de un teatro al cargar la página (clip-path) y CAE de nuevo antes de navegar. Un hilo dorado recorre el borde del telón durante el movimiento. Implementado sobre body::before / body::after para garantizar que está pintado ANTES del primer frame (el CSS se carga en ). Mantiene la misma API de clases: .page-loaded / .page-leaving. ════════════════════════════════════════════════════════════════════ */ /* El telón */ body::before { content: ''; position: fixed; inset: 0; background: #F8F5EB; z-index: 100000; pointer-events: none; clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.77, 0, .18, 1); } /* El hilo dorado que recorre el borde del telón */ body::after { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #B89760 15%, #6E1F25 50%, #B89760 85%, transparent); z-index: 100001; pointer-events: none; opacity: 1; transform: translateY(calc(100vh - 2px)); transition: transform 1s cubic-bezier(.77, 0, .18, 1), opacity .3s ease .85s; } /* Página cargada: el telón sube (se recorta desde abajo) */ body.page-loaded::before { clip-path: inset(0 0 100% 0); } body.page-loaded::after { transform: translateY(0); opacity: 0; } /* A punto de navegar: el telón cae de nuevo */ body.page-leaving::before { clip-path: inset(0 0 0 0) !important; transition: clip-path .62s cubic-bezier(.6, .05, .4, .95); } body.page-leaving::after { transform: translateY(calc(100vh - 2px)); opacity: 1; transition: transform .62s cubic-bezier(.6, .05, .4, .95), opacity .1s ease; } /* ── Preloader narrativo: la copa que se llena ────────────────────── Solo primera visita de la sesión, sobre el telón aún cerrado. */ .pt-glass { position: fixed; inset: 0; z-index: 100002; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; pointer-events: none; opacity: 1; transition: opacity .6s ease; } .pt-glass.pt-glass-out { opacity: 0; } .pt-glass svg { width: 96px; margin-bottom: 14px; filter: drop-shadow(0 6px 8px rgba(26, 26, 26, .10)); } .pt-glass-name { font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif; font-size: 15px; letter-spacing: .34em; color: #1a1a1a; } .pt-glass-sub { font-family: 'Quicksand', sans-serif; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; color: rgba(26, 26, 26, .55); } /* ── El telón es SIEMPRE el mismo crema (coherencia bajada/subida). Única excepción: hacia la cava cae oscuro (inicio del descenso). ── */ /* Hacia la cava: el telón que cae es tierra oscura */ body.pt-cava::before { background: #0E0A07; } body.pt-cava::after { background: linear-gradient(90deg, transparent, #B8763A 20%, #6E1F25 50%, #B8763A 80%, transparent); } /* Sin movimiento para quien lo pida: fundido simple */ @media (prefers-reduced-motion: reduce) { body::before { clip-path: none !important; transition: opacity .5s ease; opacity: 1; } body.page-loaded::before { opacity: 0; } body.page-leaving::before { opacity: 1 !important; } body::after { display: none; } }