/* ============================================================ procaps-preloader.css Cárgalo DESPUÉS de procaps-corporate.css. TODO está escopado a #pc-preloader / prefijo pcpl-. La ÚNICA regla que toca / es el bloqueo de scroll, y sólo actúa mientras existe la clase .pcpl-lock (transitoria, igual que hace Bootstrap con .modal-open). ============================================================ */ #pc-preloader{ /* variables aisladas (no en :root) */ --pcpl-bg: #21264E; /* navy de marca · usa #013160 para el tono del arte original */ --pcpl-t-bar: .45s; /* rayita */ --pcpl-t-procaps: .70s; /* wipe Procaps */ --pcpl-t-50: .65s; /* wipe 50 años */ --pcpl-ease: cubic-bezier(.22,.61,.36,1); position: fixed; inset: 0; z-index: 99999; /* por encima de toda la escala de Bootstrap (max 1090) */ display: flex; align-items: center; justify-content: center; background: var(--pcpl-bg); opacity: 1; transition: opacity .6s ease; } #pc-preloader.pcpl-done{ opacity: 0; pointer-events: none; } #pc-preloader .pcpl-logo{ width: min(58vw, 620px); height: auto; display: block; } /* 1) Rayita: aparece primero, crece desde su centro */ #pc-preloader #pcpl-bar{ transform-box: fill-box; transform-origin: center; transform: scaleY(0); opacity: 0; animation: pcpl-bar-in var(--pcpl-t-bar) var(--pcpl-ease) forwards; } @keyframes pcpl-bar-in{ to{ transform: scaleY(1); opacity: 1; } } /* 2)+3) Wipes: escalan desde la rayita (x=582.65) hacia afuera. transform + transform-origin fijo => idéntico en Chrome/Firefox/Safari/Edge. */ #pc-preloader .pcpl-wipe{ transform-box: view-box; transform-origin: 582.65px 160px; transform: scaleX(0); } #pc-preloader .pcpl-wipe-left{ animation: pcpl-wipe var(--pcpl-t-procaps) var(--pcpl-ease) var(--pcpl-t-bar) forwards; } #pc-preloader .pcpl-wipe-right{ animation: pcpl-wipe var(--pcpl-t-50) var(--pcpl-ease) calc(var(--pcpl-t-bar) + var(--pcpl-t-procaps)) forwards; } @keyframes pcpl-wipe{ to{ transform: scaleX(1); } } /* Bloqueo de scroll (transitorio) */ html.pcpl-lock, html.pcpl-lock body{ overflow: hidden; } /* Accesibilidad: sin movimiento => todo visible con fade simple */ @media (prefers-reduced-motion: reduce){ #pc-preloader #pcpl-bar{ animation: none; transform: none; opacity: 1; } #pc-preloader .pcpl-wipe{ animation: none; transform: scaleX(1); } #pc-preloader .pcpl-logo{ opacity: 0; animation: pcpl-fade .4s ease .1s forwards; } @keyframes pcpl-fade{ to{ opacity: 1; } } }