/** * Preloader de la home (Plataforma50). * * Se carga como hoja aparte y ANTES del bundle de React: el overlay tiene que * pintar en el primer frame, si no el usuario vería la web y después el loader. * Por eso no depende de GSAP ni de ningún componente — todo el movimiento es CSS. * * Está oculto por defecto; `preloader.js` añade `p50-preloader-on` al * solo en las rutas de la home. Así el markup puede vivir en index.html (y en * las páginas prerenderizadas) sin aparecer donde no toca. */ #p50-preloader { display: none; } html.p50-preloader-on { overflow: hidden; } html.p50-preloader-on #p50-preloader { display: block; position: fixed; inset: 0; z-index: 99999; /* El contenedor es transparente: el fondo opaco lo ponen los paneles, que son los que se levantan para revelar la web. */ background: transparent; pointer-events: auto; } /* --- Cortina: columnas que suben en cascada --- */ .p50-pre__panels { position: absolute; inset: 0; display: flex; } .p50-pre__panel { flex: 1 1 0; background: #0f0f0f; /* Costura tenue entre columnas: se intuye la estructura antes de que se abra. */ box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.045); transform: translateY(0); will-change: transform; } .p50-pre__panel:last-child { box-shadow: none; } /* --- Contenido centrado --- */ .p50-pre__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 24px; text-align: center; font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; } .p50-pre__logo { width: clamp(190px, 26vw, 330px); height: auto; opacity: 0; transform: translateY(14px); animation: p50-pre-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.06s forwards; } .p50-pre__track { width: min(430px, 74vw); opacity: 0; transform: translateY(14px); animation: p50-pre-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.18s forwards; } .p50-pre__bar { position: relative; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; } .p50-pre__bar-fill { display: block; height: 100%; width: 0%; border-radius: 2px; background: linear-gradient(90deg, #4988c4, #bde8f5); transition: width 0.25s linear; } .p50-pre__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 13px; letter-spacing: 0.02em; } .p50-pre__status { color: rgba(255, 255, 255, 0.58); font-weight: 500; transition: opacity 0.25s ease; } .p50-pre__count { color: #fefefe; font-weight: 600; font-variant-numeric: tabular-nums; } @keyframes p50-pre-in { to { opacity: 1; transform: translateY(0); } } /* --- Salida: primero se va el contenido, después sube la cortina --- */ html.p50-preloader-on #p50-preloader.is-leaving .p50-pre__logo, html.p50-preloader-on #p50-preloader.is-leaving .p50-pre__track { opacity: 0; transform: translateY(-16px); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.7, 0, 0.3, 1); animation: none; } html.p50-preloader-on #p50-preloader .p50-pre__panel { transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1); } html.p50-preloader-on #p50-preloader.is-lifting .p50-pre__panel { /* 101% evita una línea de 1px por redondeo en pantallas no enteras. */ transform: translateY(-101%); } .p50-pre__panel:nth-child(1) { transition-delay: 0s; } .p50-pre__panel:nth-child(2) { transition-delay: 0.045s; } .p50-pre__panel:nth-child(3) { transition-delay: 0.09s; } .p50-pre__panel:nth-child(4) { transition-delay: 0.135s; } .p50-pre__panel:nth-child(5) { transition-delay: 0.18s; } /* --- Accesibilidad: sin animación, solo un fundido corto --- */ @media (prefers-reduced-motion: reduce) { .p50-pre__logo, .p50-pre__track { opacity: 1; transform: none; animation: none; } html.p50-preloader-on #p50-preloader { transition: opacity 0.3s ease; } html.p50-preloader-on #p50-preloader.is-leaving { opacity: 0; } html.p50-preloader-on #p50-preloader.is-leaving .p50-pre__logo, html.p50-preloader-on #p50-preloader.is-leaving .p50-pre__track { transform: none; transition: none; } html.p50-preloader-on #p50-preloader .p50-pre__panel, html.p50-preloader-on #p50-preloader.is-lifting .p50-pre__panel { transition: none; transform: none; } } @media (max-width: 575.98px) { .p50-pre__content { gap: 20px; } /* En móvil tres columnas bastan: cinco quedan demasiado estrechas para leerse. */ .p50-pre__panel:nth-child(4), .p50-pre__panel:nth-child(5) { display: none; } }