/* ============================================================
   splash-pixar.css — ESCENOGRAFÍA DE BIENVENIDA v19.0
   ------------------------------------------------------------
   Render de estilo Pixar para la página de bienvenida.

   PLANTEAMIENTO. La portada pasa a componerse por planos, como un
   fotograma de animación:

     plano 0 · decorado    imagen renderizada (el escenario)
     plano 1 · atmósfera   velo de color y viñeta que asientan la luz
     plano 2 · profundidad orbes y retícula ya existentes
     plano 3 · reparto     los dos imanes, con materiales de juguete
     plano 4 · rótulos     el texto de la interfaz

   DOS DECORADOS. Uno horizontal y otro vertical. No es un capricho:
   una imagen apaisada recortada en un móvil deja fuera todo el
   interés visual, y una vertical estirada en un monitor se ve
   deformada. Se elige por orientación con `image-set` no — con
   consultas de medio, que es lo que permite descargar SOLO la que
   se va a usar.

   LEGIBILIDAD POR ENCIMA DEL LUCIMIENTO. Las dos imágenes se
   generaron con el centro y la mitad inferior deliberadamente
   oscuros y vacíos, y encima se aplica un velo. Un fondo bonito que
   impida leer el texto es un fondo fallido.
   ============================================================ */

/* ============================================================
   1 · PLANO 0 · EL DECORADO
   ------------------------------------------------------------
   Se pinta sobre `.splash-bg`, que ya existía como capa absoluta
   ocupando toda la portada. Así no hace falta añadir marcado.
   ============================================================ */
.splash-bg {
    /* El degradado de `style.css` permanece como color de respaldo:
       si la imagen tarda o falla, la portada sigue siendo digna. */
    background-image: url('../images/splash-tall.png');
    background-size: cover;
    background-position: 50% 22%;
    background-repeat: no-repeat;
    /* Fija el decorado mientras el contenido se desplaza: da la
       sensación de que el texto avanza dentro de la escena. */
    background-attachment: scroll;
    /* La imagen entra con una disolvencia suave en lugar de
       aparecer de golpe cuando termina de descargarse. */
    animation: pixarFadeIn 1.15s ease-out both;
    animation-delay: .05s;
}

/* Decorado apaisado a partir de una ventana claramente horizontal. */
@media (min-aspect-ratio: 1/1) and (min-width: 700px) {
    .splash-bg {
        background-image: url('../images/splash-wide.png');
        background-position: 50% 30%;
    }
}

@keyframes pixarFadeIn {
    from { opacity: 0; transform: scale(1.045); }
    to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   2 · PLANO 1 · ATMÓSFERA
   ------------------------------------------------------------
   Dos velos superpuestos sobre el decorado:
     ::before  velo de color, asienta la imagen en la paleta índigo
               de la obra y rebaja su contraste.
     ::after   viñeta, oscurece bordes y centro-bajo para que los
               rótulos se apoyen sobre una base tranquila.
   ============================================================ */
.splash-bg::before,
.splash-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Velo de color: unifica la imagen con la paleta de la obra. */
.splash-bg::before {
    background:
        linear-gradient(165deg,
            rgba(15, 23, 42, .58) 0%,
            rgba(30, 27, 75, .50) 38%,
            rgba(49, 46, 129, .44) 68%,
            rgba(15, 23, 42, .62) 100%);
    mix-blend-mode: multiply;
}

/* Viñeta: aclara ligeramente la zona alta (donde vive el interés
   del decorado) y oscurece el centro y el pie (donde vive el
   texto). Es lo que garantiza el contraste de lectura. */
.splash-bg::after {
    background:
        radial-gradient(ellipse 120% 62% at 50% 8%,
            rgba(129, 140, 248, .16) 0%, transparent 62%),
        radial-gradient(ellipse 96% 74% at 50% 74%,
            rgba(10, 14, 30, .80) 0%, rgba(10, 14, 30, .42) 48%, transparent 78%),
        linear-gradient(to bottom,
            transparent 0%, transparent 46%, rgba(10, 14, 30, .74) 100%);
}

/* ============================================================
   3 · PLANO 3 · EL REPARTO
   ------------------------------------------------------------
   Los dos imanes del emblema dejan de ser dos cuadros planos y se
   componen como objetos de juguete: bisel superior claro, base
   oscura, brillo especular y sombra de contacto proyectada.
   ============================================================ */

/* Halo cálido y difuso tras el emblema, como una luz de relleno
   que despega las piezas del decorado. */
.splash-logo-wrap {
    position: relative;
    filter: drop-shadow(0 18px 26px rgba(5, 8, 20, .55));
}

.splash-magnet {
    position: relative;
    /* Los degradados dan volumen: luz arriba, sombra abajo. */
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, .55),
        inset 0 -3px 6px rgba(0, 0, 0, .38),
        0 10px 18px -4px rgba(5, 8, 20, .62),
        0 2px 4px rgba(5, 8, 20, .45);
    /* Respiración muy leve: la escena no queda congelada. */
    animation: pixarFloat 5.2s ease-in-out infinite;
    will-change: transform;
}

/* El imán rojo respira en contrafase: dos objetos que se mueven
   exactamente igual parecen una sola pieza. */
.splash-magnet-s { animation-delay: -2.6s; }

@keyframes pixarFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-5px) rotate(-.6deg); }
}

/* Brillo especular: una banda clara en el cuarto superior de la
   pieza, que es donde caería la luz principal de la escena. */
.splash-magnet::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    top: 5%;
    height: 30%;
    border-radius: 999px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
    pointer-events: none;
}

/* Sombra de contacto en el suelo: sin ella las piezas parecen
   pegadas al fondo en lugar de flotar sobre él. */
.splash-logo-wrap::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 132px;
    height: 14px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(5, 8, 20, .52) 0%, transparent 72%);
    filter: blur(3px);
    pointer-events: none;
    animation: pixarShadow 5.2s ease-in-out infinite;
}

/* La sombra se estrecha y aclara cuando las piezas suben: es lo
   que vende la ilusión de altura. */
@keyframes pixarShadow {
    0%, 100% { transform: translateX(-50%) scaleX(1);   opacity: 1;   }
    50%      { transform: translateX(-50%) scaleX(.86); opacity: .68; }
}

/* Las líneas de campo ganan brillo, como filamentos de luz. */
.splash-energy .energy-line {
    box-shadow: 0 0 7px rgba(167, 139, 250, .85);
}

/* ============================================================
   4 · PLANO 4 · LOS RÓTULOS SOBRE LA ESCENA
   ------------------------------------------------------------
   Sobre una imagen, el texto necesita ayuda para no perderse. Se
   le añade una sombra suave y se refuerzan los cristales.
   ============================================================ */
.splash-content { position: relative; z-index: 3; }

.splash-title,
.splash-subtitle,
.splash-claim,
.splash-credits {
    text-shadow: 0 2px 14px rgba(5, 8, 20, .72);
}

/* Las cifras y los sellos se apoyan en cristal ahumado: sobre una
   fotografía, un panel translúcido lee mucho mejor que el texto
   suelto. */
.splash-stats,
.splash-badges li,
.splash-eyebrow {
    backdrop-filter: blur(16px) saturate(135%);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
}

.splash-stats {
    padding: 14px 10px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(16, 20, 44, .40);
    box-shadow: 0 12px 30px -12px rgba(5, 8, 20, .7);
}

.splash-badges li { background: rgba(16, 20, 44, .42); }

/* El botón principal recibe un realce cálido para destacar sobre
   la escenografía. */
.splash-btn {
    box-shadow:
        0 12px 26px -8px rgba(99, 102, 241, .75),
        0 2px 6px rgba(5, 8, 20, .5),
        inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* ============================================================
   5 · AJUSTES POR VENTANA
   ============================================================ */

/* En pantallas muy bajas el decorado se recorta demasiado por
   arriba; se sube el encuadre para conservar el interés visual. */
@media (max-height: 700px) {
    .splash-bg { background-position: 50% 14%; }
}

/* En móviles la respiración es más discreta: en una pantalla
   pequeña un movimiento amplio resulta inquieto. */
@media (max-width: 480px) {
    @keyframes pixarFloat {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-3px); }
    }
    .splash-logo-wrap::after { width: 108px; }
}

/* ============================================================
   6 · TEMA CLARO
   ------------------------------------------------------------
   El decorado es nocturno. En tema claro se aclara el velo para
   que la portada no resulte una mancha oscura.
   ============================================================ */
[data-theme="light"] .splash-bg::before {
    background:
        linear-gradient(165deg,
            rgba(30, 27, 75, .46) 0%,
            rgba(49, 46, 129, .38) 50%,
            rgba(15, 23, 42, .52) 100%);
}

/* ============================================================
   7 · ACCESIBILIDAD
   ------------------------------------------------------------
   Quien pide menos movimiento recibe la escena quieta: el decorado
   y los materiales se conservan, sólo cesa la animación. Una
   escenografía no debería costarle un mareo a nadie.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .splash-bg,
    .splash-magnet,
    .splash-logo-wrap::after {
        animation: none !important;
    }
    .splash-bg { opacity: 1; transform: none; }
}

/* ============================================================
   8 · IMPRESIÓN
   ------------------------------------------------------------
   En papel el decorado sólo gasta tinta y perjudica la lectura.
   ============================================================ */
@media print {
    .splash-bg,
    .splash-bg::before,
    .splash-bg::after,
    .splash-logo-wrap::after { display: none !important; }
    .splash-title, .splash-subtitle, .splash-claim, .splash-credits {
        text-shadow: none;
    }
}