/* ============================================ EL CASTILLO DEL CONDE — Preloader ============================================ */ /* Cortina inicial: tapa la página (y el preloader) hasta que partials.js añade .ready al . z-index mayor que el preloader: así cuando la cortina funde revela el preloader, nunca la página cruda. */ html { background: var(--void); } body::before { content: ''; position: fixed; inset: 0; background: var(--void); z-index: 10001; pointer-events: none; transition: opacity 0.4s ease; } html.ready body::before { opacity: 0; } /* Preloader siempre visible. La cortina (z 10001) lo cubre hasta que .ready funde la cortina, revelando el preloader por debajo. Si la carga es rápida, el JS lo oculta antes de que la cortina acabe de fundirse, el usuario solo ve la cortina fundir hacia la página. */ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--void); z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 1s ease, visibility 1s ease; } .preloader.done { opacity: 0; visibility: hidden; pointer-events: none; } .preloader-symbol { width: 160px; height: auto; margin-bottom: 40px; animation: preloader-pulse 2s infinite ease-in-out; } .preloader-symbol img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 20px var(--overlay-blood)); } @keyframes preloader-pulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } .preloader-bar { width: 200px; height: 1px; background: var(--stone-mid); position: relative; overflow: hidden; } .preloader-fill { height: 100%; width: 0%; background: var(--blood-core); transition: width 0.3s ease; } .preloader-count { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 6px; color: var(--bone); margin-top: 20px; } .preloader-count::after { content: '%'; } .preloader-text { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 3px; color: var(--ash); margin-top: 12px; text-transform: lowercase; }