/* === extraído de Elements/splash_screen.ctp (#539) === */ :root { /* El splash se pinta antes de que cargue colors.css (la vista lo carga en el , este CSS va en el ): tokens locales con el literal original. */ --splash-shadow-strong: rgba(0, 0, 0, 0.3); /* lint-tokens-ok: colors.css no está cargado en el primer paint del splash */ --splash-shadow-soft: rgba(0, 0, 0, 0.1); /* lint-tokens-ok: colors.css no está cargado en el primer paint del splash */ } .startup-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* lint-tokens-ok: gradiente decorativo del splash, no es color de marca */ display: flex; justify-content: center; align-items: center; z-index: 9999; animation: fadeOut 1s ease-in-out 2.5s forwards; } .startup-logo { animation: logoAnimation 2s ease-in-out, moveToPosition 1s ease-in-out 2.5s forwards; transform-origin: center; filter: drop-shadow(0 10px 30px var(--splash-shadow-strong)); transition: filter 1s ease-in-out; } .startup-logo svg { width: 200px; height: auto; animation: pulse 2s ease-in-out infinite alternate; } /* Transition the logo to landing position */ @keyframes moveToPosition { 0% { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 10px 30px var(--splash-shadow-strong)); } 100% { position: fixed; top: 2rem; left: max(2rem, calc(50vw - 600px + 2rem)); /* Align with content on desktop */ transform: translate(0, 0) scale(0.8); filter: drop-shadow(0 2px 10px var(--splash-shadow-soft)); z-index: 1000; } } @keyframes logoAnimation { 0% { opacity: 0; transform: scale(0.5) rotate(-10deg); } 50% { opacity: 1; transform: scale(1.1) rotate(5deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } @keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } @keyframes fadeOut { 0% { opacity: 1; visibility: visible; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* lint-tokens-ok: gradiente decorativo del splash, no es color de marca */ } 90% { opacity: 1; background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); /* lint-tokens-ok: gradiente decorativo del splash, no es color de marca */ } 100% { opacity: 0; visibility: hidden; background: transparent; } } /* Hide landing logo initially and show after transition */ .landing-logo-hidden { opacity: 0 !important; /* lint-tokens-ok: pisa estado inline anterior del logo durante la transición del splash */ visibility: hidden !important; /* lint-tokens-ok: pisa estado inline anterior del logo durante la transición del splash */ } /* Higher specificity to override hidden state */ .hero-logo-container.landing-logo-show { opacity: 1 !important; /* lint-tokens-ok: pisa .landing-logo-hidden de mayor especificidad */ visibility: visible !important; /* lint-tokens-ok: pisa .landing-logo-hidden de mayor especificidad */ animation: showLandingLogo 0.5s ease-in-out forwards; } @keyframes showLandingLogo { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } } @media (max-width: 1200px) { @keyframes moveToPosition { 0% { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 10px 30px var(--splash-shadow-strong)); } 100% { position: fixed; top: 2rem; left: 2rem; transform: translate(0, 0) scale(0.8); filter: drop-shadow(0 2px 10px var(--splash-shadow-soft)); z-index: 1000; } } } @media (max-width: 768px) { .startup-logo svg { width: 150px; } @keyframes moveToPosition { 0% { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 10px 30px var(--splash-shadow-strong)); } 100% { position: fixed; top: 1.5rem; left: 1rem; transform: translate(0, 0) scale(0.7); filter: drop-shadow(0 2px 10px var(--splash-shadow-soft)); z-index: 1000; } } } @media (max-width: 480px) { .startup-logo svg { width: 120px; } @keyframes moveToPosition { 0% { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 10px 30px var(--splash-shadow-strong)); } 100% { position: fixed; top: 1rem; left: 1rem; transform: translate(0, 0) scale(0.6); filter: drop-shadow(0 2px 10px var(--splash-shadow-soft)); z-index: 1000; } } }