/* ============================================================================ * Centro Óptico Sicuani — PRELOADER ultra-premium (video de fondo + carga) * Carga cinematográfica que fluye hacia el hero. Carga al final del . * ========================================================================== */ .hp-preloader { position: fixed; inset: 0; z-index: 99999; overflow: hidden; background: #0c0a08; display: grid; place-items: center; transition: opacity .9s ease, transform 1.1s cubic-bezier(.7,0,.2,1), visibility .9s; } .hp-preloader.done { opacity: 0; visibility: hidden; transform: scale(1.06); pointer-events: none; } .hp-pre__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.06); transform: scale(1.06); } .hp-pre__scrim { position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 42%, rgba(12,10,8,.42) 0%, rgba(12,10,8,.7) 55%, rgba(12,10,8,.9) 100%); } .hp-pre__box { position: relative; z-index: 2; text-align: center; color: #fff; padding: 2rem; } .hp-pre__logo { height: 66px; width: auto; border-radius: 10px; display: block; margin: 0 auto 1.5rem; box-shadow: 0 16px 50px rgba(0,0,0,.55); animation: preLogo 1.1s cubic-bezier(.2,.7,.2,1) both; } .hp-pre__name { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(1.9rem, 4.6vw, 3.2rem); line-height: 1.05; letter-spacing: .005em; opacity: 0; animation: preUp 1s ease .28s both; } .hp-pre__name em { font-style: italic; color: #ffd9a8; } .hp-pre__sub { font-family: 'Inter', system-ui, sans-serif; font-size: .76rem; letter-spacing: .42em; text-transform: uppercase; color: #d6c09a; margin-top: .65rem; opacity: 0; animation: preUp 1s ease .46s both; } .hp-pre__loader { display: flex; align-items: center; justify-content: center; gap: .95rem; margin-top: 2.1rem; opacity: 0; animation: preUp 1s ease .62s both; } .hp-pre__bar { width: min(280px, 62vw); height: 2px; background: rgba(255,255,255,.18); border-radius: 2px; overflow: hidden; } .hp-pre__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6b8cff, #ffd9a8); border-radius: 2px; animation: preBar 3.75s cubic-bezier(.6,.05,.2,1) forwards; } .hp-pre__pct { font-family: 'Inter', ui-monospace, monospace; font-size: .82rem; letter-spacing: .08em; color: rgba(255,255,255,.72); min-width: 38px; text-align: left; font-variant-numeric: tabular-nums; } .hp-pre__pct::after { content: '%'; opacity: .55; margin-left: 1px; } @keyframes preBar { 0% { width: 0; } 72% { width: 84%; } 100% { width: 100%; } } @keyframes preUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes preLogo { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .hp-pre__video { animation: none; transform: none; } .hp-pre__bar i { animation: none; width: 100%; } .hp-pre__logo, .hp-pre__name, .hp-pre__sub, .hp-pre__loader { animation: none; opacity: 1; } .hp-preloader { transition: opacity .3s ease; } }