/* ═══════════════════════════════════════════════════════════════════════════ Pantalla de bienvenida. Lo primero que se ve al abrir la plataforma: la carita viva sobre un fondo que respira, el nombre con un barrido de luz y una línea de progreso. Dura unos 2,3 s y se disuelve dejando el panel ya cargado debajo — cubre la carga de verdad en vez de sumarse a ella. Solo sale la primera vez en cada sesión (lo decide un script de dos líneas en el , antes de pintar nada). Siempre oscura, tenga el tema que tenga el usuario: es la marca entrando. Con prefers-reduced-motion se queda quieta y dura menos. ══════════════════════════════════════════════════════════════════════════ */ #bienvenida { display: none; } html.con-bienvenida #bienvenida { display: grid; } /* Mientras está la bienvenida, la página de debajo no se desplaza. */ html.con-bienvenida:not(.bienvenida-fuera) body { overflow: hidden; } #bienvenida { position: fixed; inset: 0; z-index: 10000; place-items: center; background: #061229; color: #fff; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); animation: b-entrar .35s ease-out both; transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s; } #bienvenida.saliendo { opacity: 0; transform: scale(1.06); visibility: hidden; pointer-events: none; } @keyframes b-entrar { from { opacity: 0 } to { opacity: 1 } } /* ── Fondo: dos manchas de luz que se mueven despacio + una malla tenue ── */ .b-fondo { position: absolute; inset: 0; overflow: hidden; } .b-fondo::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at center, rgba(255,255,255,.07) 1px, transparent 1.6px); background-size: 26px 26px; mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 75%); animation: b-malla 6s ease-in-out infinite alternate; } @keyframes b-malla { from { opacity: .45; transform: translateY(0) } to { opacity: 1; transform: translateY(-10px) } } .b-mancha { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; } .b-verde { left: -18vmax; top: -22vmax; background: radial-gradient(circle, rgba(37,211,102,.55), rgba(0,255,156,.18) 45%, transparent 70%); animation: b-flotar-a 9s ease-in-out infinite alternate; } .b-azul { right: -20vmax; bottom: -26vmax; background: radial-gradient(circle, rgba(47,134,255,.5), rgba(0,119,182,.16) 45%, transparent 70%); animation: b-flotar-b 11s ease-in-out infinite alternate; } @keyframes b-flotar-a { from { transform: translate(0,0) scale(1) } to { transform: translate(9vmax, 7vmax) scale(1.12) } } @keyframes b-flotar-b { from { transform: translate(0,0) scale(1.08) } to { transform: translate(-8vmax,-9vmax) scale(.96) } } /* ── Centro ── */ .b-centro { position: relative; display: grid; place-items: center; gap: 0; text-align: center; padding: 0 24px; } /* Anillos que nacen del logo y se van abriendo, uno tras otro. */ .b-anillos { position: absolute; top: 66px; left: 50%; width: 0; height: 0; pointer-events: none; } .b-anillos i { position: absolute; left: 0; top: 0; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; border: 1.5px solid rgba(37,211,102,.75); box-shadow: 0 0 18px rgba(37,211,102,.35), inset 0 0 18px rgba(47,134,255,.18); opacity: 0; animation: b-anillo 2.4s cubic-bezier(.2,.7,.3,1) infinite; } .b-anillos i:nth-child(2) { animation-delay: .8s; border-color: rgba(47,134,255,.7); } .b-anillos i:nth-child(3) { animation-delay: 1.6s; } @keyframes b-anillo { 0% { transform: scale(.85); opacity: 0 } 12% { opacity: .9 } 100% { transform: scale(3.6); opacity: 0 } } /* El logo: entra creciendo con un pequeño rebote y luego late su halo. */ .b-logo { position: relative; width: 132px; height: 132px; display: block; filter: drop-shadow(0 0 22px rgba(37,211,102,.55)) drop-shadow(0 0 60px rgba(0,255,156,.25)); animation: b-logo-entra .9s cubic-bezier(.34,1.56,.64,1) both, b-logo-late 2.6s ease-in-out .9s infinite; } @keyframes b-logo-entra { 0% { transform: scale(.35) rotate(-8deg); opacity: 0 } 60% { opacity: 1 } 100% { transform: scale(1) rotate(0); opacity: 1 } } @keyframes b-logo-late { 0%, 100% { filter: drop-shadow(0 0 22px rgba(37,211,102,.55)) drop-shadow(0 0 60px rgba(0,255,156,.25)) } 50% { filter: drop-shadow(0 0 34px rgba(37,211,102,.85)) drop-shadow(0 0 90px rgba(0,255,156,.42)) } } /* Destello blanco que estalla justo cuando el logo llega a su tamaño. */ .b-destello { position: absolute; top: 66px; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; pointer-events: none; box-shadow: 0 0 40px 20px rgba(255,255,255,.9), 0 0 120px 60px rgba(125,255,201,.6); opacity: 0; animation: b-destello .7s ease-out .45s both; } @keyframes b-destello { 0% { opacity: 0; transform: scale(.2) } 25% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(2.6) } } /* El nombre: cada palabra sube desde abajo y luego pasa un barrido de luz. */ .b-nombre { margin-top: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; font-size: clamp(30px, 6.4vw, 48px); display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .28em; } .b-palabra { display: inline-block; opacity: 0; transform: translateY(26px); animation: b-sube .7s cubic-bezier(.2,.8,.2,1) forwards; background: linear-gradient(100deg, #fff 0%, #fff 38%, #7dffc9 50%, #6fb2ff 58%, #fff 70%, #fff 100%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .b-palabra:nth-child(1) { animation-delay: .75s } .b-palabra:nth-child(2) { animation-delay: .87s } .b-palabra:nth-child(3) { animation-delay: .99s } @keyframes b-sube { to { opacity: 1; transform: translateY(0) } } /* Cuando ya están las tres palabras, el barrido las recorre de izquierda a derecha. */ .b-nombre.brilla .b-palabra { animation: b-sube .7s cubic-bezier(.2,.8,.2,1) forwards, b-barrido 1.5s ease-in-out 1.45s 1 both; } @keyframes b-barrido { from { background-position: 100% 0 } to { background-position: 0 0 } } .b-ia { background: linear-gradient(100deg, #7dffc9 0%, #25d366 45%, #2f86ff 100%) !important; background-size: 100% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; text-shadow: 0 0 22px rgba(37,211,102,.35); } .b-lema { margin: 12px 0 0; color: rgba(255,255,255,.62); font-size: 14.5px; letter-spacing: .01em; opacity: 0; animation: b-aparece .8s ease 1.25s forwards; } @keyframes b-aparece { to { opacity: 1 } } /* Línea de progreso abajo: recorre de izquierda a derecha durante toda la intro. */ .b-barra { position: absolute; left: 0; right: 0; bottom: calc(46px + env(safe-area-inset-bottom)); height: 2px; margin: 0 auto; width: min(220px, 48vw); border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; } .b-barra i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #25d366, #00ff9c 55%, #2f86ff); box-shadow: 0 0 14px rgba(0,255,156,.8); animation: b-progreso 2.25s cubic-bezier(.25,.1,.25,1) .1s forwards; } @keyframes b-progreso { to { transform: scaleX(1) } } .b-salta { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.32); opacity: 0; animation: b-aparece .6s ease 1.6s forwards; } /* ── Menos movimiento: todo quieto, visible, y el JS acorta el tiempo ── */ @media (prefers-reduced-motion: reduce) { #bienvenida, #bienvenida *, #bienvenida *::after { animation: none !important; } .b-palabra, .b-lema, .b-salta { opacity: 1; transform: none; } .b-barra i { transform: scaleX(1); } .b-anillos, .b-destello { display: none; } #bienvenida { transition-duration: .3s; } }