/* ===================================================================== PRELOADER — tiempos calcados de WelcomeMessage.jsx (Framer Motion) corchetes .4s delays .1/.15/.2/.25 logo .75s ease-out (scale .85→1, blur 12px→0) subtítulo .5s delay .5 barra 2.4s ease-in-out (0→100%) salida .7s a los 2.8s, opacity 0 + translateY(-6%) La SALIDA es CSS puro con `forwards`: sin JS el preloader se retira igual. js/preloader.js solo lo saca del DOM y pone el timeout de seguridad. Nunca al revés. ===================================================================== */ .preloader { position: fixed; inset: 0; z-index: var(--z-preloader); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg); animation: pl-out 0.7s var(--ease-out-expo) 2.8s forwards; } /* Corchetes: 64px, borde de 4px, solo dos lados cada uno */ .preloader__bracket { position: absolute; width: 4rem; height: 4rem; border: 0 solid var(--red); opacity: 0; transform: scale(0.5); animation: pl-bracket 0.4s ease both; } .preloader__bracket--tl { top: 0; left: 0; border-top-width: var(--bw); border-left-width: var(--bw); animation-delay: 0.10s; } .preloader__bracket--tr { top: 0; right: 0; border-top-width: var(--bw); border-right-width: var(--bw); animation-delay: 0.15s; } .preloader__bracket--bl { bottom: 0; left: 0; border-bottom-width: var(--bw); border-left-width: var(--bw); animation-delay: 0.20s; } .preloader__bracket--br { bottom: 0; right: 0; border-bottom-width: var(--bw); border-right-width: var(--bw); animation-delay: 0.25s; } .preloader__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } /* Logo self-hosteado (el original hotlinkeaba i.ibb.co) */ .preloader__logo { color: var(--ink); animation: pl-logo-in 0.75s ease-out both, pl-logo-out 0.7s var(--ease-out-expo) 2.8s both; } .preloader__logo svg { width: 16rem; height: auto; } @media (min-width: 768px) { .preloader__logo svg { width: 20rem; } } .preloader__sub { font-weight: 900; text-transform: uppercase; letter-spacing: 0.35em; font-size: var(--fs-100); color: var(--ink-faint); opacity: 0; transform: translateY(10px); animation: pl-sub 0.5s ease 0.5s both; } .preloader__track { position: relative; width: 13rem; height: 1px; background: var(--line-faint); overflow: hidden; } .preloader__bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--red); animation: pl-bar 2.4s ease-in-out both; } @keyframes pl-bracket { to { opacity: 1; transform: scale(1); } } @keyframes pl-logo-in { from { opacity: 0; transform: scale(0.85); filter: blur(12px); } to { opacity: 1; transform: scale(1); filter: blur(0); } } @keyframes pl-logo-out { to { opacity: 0; transform: scale(1.08); filter: blur(8px); } } @keyframes pl-sub { to { opacity: 1; transform: translateY(0); } } @keyframes pl-bar { to { width: 100%; } } @keyframes pl-out { to { opacity: 0; transform: translateY(-6%); visibility: hidden; pointer-events: none; } } /* ---- Salvaguardas ---------------------------------------------------- 1. Menos movimiento: no se muestra en absoluto. 2. Ya visto en esta sesión: no se muestra (el marca el antes del primer pintado, así que no hay parpadeo). 3. js/preloader.js lo saca del DOM y fuerza su retirada a los 4.5 s. */ @media (prefers-reduced-motion: reduce) { .preloader { display: none; } } html[data-preloaded] .preloader { display: none; }