/* =========================================== SOIC — Intro / preloader animado Overlay autocontenido que se reproduce al entrar (1x por sesión) y revela el logo real. Se enlaza en (render-blocking) para cubrir la página desde el primer paint. =========================================== */ .intro { position: fixed; inset: 0; z-index: 9999; background: #0b0f19; display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 1; transition: opacity 0.45s ease; } .intro.is-out { opacity: 0; } /* Red de nodos de fondo */ .intro__particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4; pointer-events: none; } /* Escenario centrado */ .intro__stage { position: relative; display: flex; align-items: center; justify-content: center; width: min(90vw, 520px); aspect-ratio: 1 / 1; } /* ---- Rombo central ---- */ .intro__diamond { --d-scale: 1; position: relative; width: clamp(96px, 22vw, 132px); height: clamp(96px, 22vw, 132px); border-radius: 24px; background: #CC1021; display: flex; align-items: center; justify-content: center; transform: rotate(45deg) scale(var(--d-scale)); box-shadow: 0 0 28px 4px rgba(204, 16, 33, 0.45); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, opacity 0.15s ease; animation: intro-breathe 2.4s ease-in-out infinite; } /* Fase carga: palpita más fuerte y se contrae un poco */ .intro.is-charging .intro__diamond { --d-scale: 0.86; animation: intro-pulse 0.35s ease-in-out infinite; box-shadow: 0 0 60px 14px rgba(204, 16, 33, 0.85); } /* Fase pulso: expande masivamente */ .intro.is-pulsing .intro__diamond { --d-scale: 1.9; animation: none; box-shadow: 0 0 120px 50px rgba(255, 90, 90, 0.95); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease, opacity 0.12s ease; } /* Rombo desaparece tras el destello */ .intro.is-revealed .intro__diamond { opacity: 0; } /* Icono de herramienta dentro del rombo (contra-rotado) */ .intro__tool { width: clamp(46px, 11vw, 62px); height: clamp(46px, 11vw, 62px); transform: rotate(-45deg); opacity: 0; transition: opacity 0.12s ease; } .intro__tool.is-pop { animation: intro-tool-pop 0.22s ease-out; } .intro.is-charging .intro__tool, .intro.is-pulsing .intro__tool { opacity: 0 !important; } /* ---- Logo real (oculto hasta el destello) ---- */ .intro__logo { position: absolute; width: min(78vw, 460px); height: auto; opacity: 0; transform: scale(1.08); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .intro.is-revealed .intro__logo { opacity: 1; transform: scale(1); } /* ---- Anillo de choque radial ---- */ .intro__ring { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; border-radius: 50%; border: 6px solid rgba(255, 120, 120, 0.9); transform: translate(-50%, -50%) scale(0.1); opacity: 0; pointer-events: none; } .intro.is-pulsing .intro__ring { animation: intro-ring 0.6s ease-out forwards; } /* ---- Destello a pantalla completa ---- */ .intro__flash { position: absolute; inset: 0; background: radial-gradient(circle at center, #ffffff 0%, #fff3f0 35%, rgba(255, 120, 90, 0.6) 70%, rgba(255, 90, 90, 0) 100%); opacity: 0; pointer-events: none; } .intro.is-pulsing .intro__flash { animation: intro-flash 0.5s ease-out forwards; } /* =========================================== Keyframes =========================================== */ @keyframes intro-breathe { 0%, 100% { box-shadow: 0 0 24px 3px rgba(204, 16, 33, 0.4); } 50% { box-shadow: 0 0 40px 8px rgba(204, 16, 33, 0.6); } } @keyframes intro-pulse { 0%, 100% { transform: rotate(45deg) scale(0.82); } 50% { transform: rotate(45deg) scale(0.92); } } @keyframes intro-tool-pop { 0% { transform: rotate(-45deg) scale(0.4); opacity: 0; } 60% { transform: rotate(-45deg) scale(1.12); opacity: 1; } 100% { transform: rotate(-45deg) scale(1); opacity: 1; } } @keyframes intro-ring { 0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0.95; border-width: 8px; } 100% { transform: translate(-50%, -50%) scale(14); opacity: 0; border-width: 1px; } } @keyframes intro-flash { 0% { opacity: 0; } 16% { opacity: 0.97; } 100% { opacity: 0; } } /* Shake del escenario en el pulso */ .intro.is-pulsing .intro__stage { animation: intro-shake 0.4s ease-in-out; } @keyframes intro-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } } /* Reduced motion: la intro no se reproduce (refuerza el CSS crítico inline) */ @media (prefers-reduced-motion: reduce) { .intro { display: none !important; } }