/* ========================================================
   ESTILO CONSOLA (Animaciones para .columna.visual)
   ======================================================== */

/* 1. ESTADO INACTIVO (Fuera de foco) */

/* Imagen: Zoom in, oscura, blanco y negro, y desenfocada */
.columna.visual article figure div picture img {
    transform: scale(1.15);
    filter: grayscale(60%) brightness(0.4) blur(4px);
    /* Transición suave y cinemática para salir del foco */
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 0.8s ease-in-out;
}

/* Contenedor del texto: invisible y desplazado hacia abajo */
.columna.visual .contenido {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.5s ease;
}

/* Volanta (h4): Desplazada a la izquierda */
.columna.visual h4 {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.3s ease, transform 0.4s ease;
}

/* Fondo sesgado de la volanta (h4:before): Escogido a 0 de ancho */
.columna.visual h4:before {
    transform-origin: left;
    transform: skewX(-15deg) scaleX(0); /* Mezclamos el skew existente con escala */
    transition: transform 0.4s cubic-bezier(0.8, 0, 0.2, 1);
}

/* Título (h1): Desplazado hacia abajo */
.columna.visual h1 {
    opacity: 0;
    transform: translateY(20px);
    text-shadow: 0px 0px 0px rgba(255,255,255,0);
    transition: opacity 0.4s ease, 
                transform 0.5s ease,
                text-shadow 0.6s ease;
}

/* ========================================================
   2. ESTADO ACTIVO (Con clase .foco) - LA CADENCIA
   ======================================================== */

/* La imagen recobra escala, color y nitidez (Estilo PlayStation) */
.columna.visual.foco article figure div picture img {
    transform: scale(1);
    filter: grayscale(0%) brightness(1) blur(0px);
}

/* El contenedor principal sube y se hace visible */
.columna.visual.foco .contenido {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s; /* Comienza casi de inmediato */
}

/* La volanta entra con un ligero rebote (Estilo Nintendo) */
.columna.visual.foco h4 {
    opacity: 1;
    transform: translateX(0);
    /* Curva cubic-bezier con rebote al final */
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-delay: 0.2s;
}

/* El fondo sesgado hace un "barrido" rápido (Estilo Xbox UI) */
.columna.visual.foco h4:before {
    transform: skewX(-15deg) scaleX(1);
    transition-delay: 0.35s;
}

/* El título sube y adquiere un leve glow (neon) junto con su sombra original */
.columna.visual.foco h1 {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0px 0px 12px rgba(255, 255, 255, 0.4), var(--sombra-texto);
    transition: opacity 0.5s ease, 
                transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), /* Rebote ligero */
                text-shadow 0.8s ease;
    transition-delay: 0.45s; /* Es lo último en acomodarse */
}

/* ========================================================
   ESTILO HUD SCI-FI / VALORANT (Animaciones para .normal)
   ======================================================== */

/* 1. ESTADO INACTIVO (Fuera de foco) */

/* Contenedor de imagen: Oculto con un corte limpio a la izquierda, borde apagado */
.normal figure {
    clip-path: inset(0 100% 0 0); /* Oculta todo empujando el borde derecho hacia la izquierda */
    filter: grayscale(100%) contrast(1.2); /* Aspecto de cámara de seguridad */
    border-color: transparent !important;
    /* Curva rápida y afilada típica de los shooters modernos */
    transition: clip-path 0.5s cubic-bezier(0.8, 0, 0.2, 1),
                filter 0.6s ease,
                border-color 0.4s ease;
}

/* Imagen interior: Ligeramente ampliada para hacer un pequeño snap al enfocarse */
.normal figure img {
    transform: scale(1.1) translateX(-10px);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Volanta (h4): Flota hacia arriba como si perdiera señal */
.normal .contenido h4 {
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.3s ease, transform 0.4s ease;
}

/* Título (h1): Empujado hacia la derecha, sin sombras */
.normal .contenido h1 {
    opacity: 0;
    transform: translateX(20px);
    text-shadow: none;
    transition: opacity 0.4s ease, transform 0.4s ease, text-shadow 0.4s ease;
}

/* ========================================================
   2. ESTADO ACTIVO (Con clase .foco) - LA SECUENCIA DE "HACKEO"
   ======================================================== */

/* La imagen hace un "barrido" holográfico, recupera color y enciende el borde */
.columna.normal.foco figure {
    clip-path: inset(0 0 0 0);
    filter: grayscale(0%) contrast(1);
    border-color: var(--color-entrante-05) !important; /* Enciende el borde con el azul de la paleta */
}

/* La imagen encaja en su lugar en un movimiento seco */
.columna.normal.foco figure img {
    transform: scale(1) translateX(0);
}

/* La volanta cae rápidamente, simulando datos cargados */
.columna.normal.foco .contenido h4 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* El título entra de costado y adquiere un leve efecto Glitch (Cian/Magenta) */
.columna.normal.foco .contenido h1 {
    opacity: 1;
    transform: translateX(0);
    /* Aberración cromática sutil como en Cyberpunk 2077 */
    text-shadow: 2px 0px 0px rgba(0, 255, 255, 0.4), 
                -2px 0px 0px rgba(255, 0, 255, 0.4);
    /* Curva elástica rígida y retraso para ser lo último en armarse */
    transition: opacity 0.4s ease, 
                transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                text-shadow 0.6s ease;
    transition-delay: 0.3s;
}

/* ========================================================
   ESTILO GACHA / CARTA COLECCIONABLE (Animaciones para .caja)
   ======================================================== */

/* 1. ESTADO INACTIVO (Fuera de foco) */

/* La "carta" completa: Inclinada hacia atrás en 3D, transparente y más abajo */
.caja article {
    transform: perspective(800px) rotateX(15deg) translateY(40px) scale(0.95);
    opacity: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0);
    /* Transición de salida suave */
    transition: transform 0.5s ease-in, opacity 0.4s ease, box-shadow 0.5s ease;
}

/* La imagen: Estilo "ítem bloqueado" (sepia, oscura y con zoom) */
.caja article figure img {
    transform: scale(1.2);
    filter: sepia(60%) brightness(0.6) saturate(0.5);
    transition: transform 0.6s ease, filter 0.6s ease;
}

/* El texto superior: Oculto y empujado hacia arriba */
.caja .contenido h1, .caja .contenido h4 {
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* El triángulo decorativo del borde: Desplazado fuera de la pantalla */
.caja figure::before {
    transform: translate(-100%, -100%);
    transition: transform 0.3s ease;
}


/* ========================================================
   2. ESTADO ACTIVO (Con clase .foco) - EL DROP DE LA CARTA
   ======================================================== */

/* La carta aterriza: Se endereza en 3D con un rebote (slam) y revela la sombra */
.columna.caja.foco article {
    transform: perspective(800px) rotateX(0deg) translateY(0) scale(1);
    opacity: 1;
    box-shadow: var(--sombra-suave);
    /* Curva spring pesada para dar la sensación de que la carta golpea la mesa */
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.4s ease, 
                box-shadow 0.6s ease;
}

/* La imagen hace pop: Recupera su color natural y escala */
.columna.caja.foco article figure img {
    transform: scale(1);
    filter: sepia(0%) brightness(1) saturate(1);
    transition-delay: 0.15s;
}

/* La volanta y el título caen en secuencia */
.columna.caja.foco .contenido h4 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.columna.caja.foco .contenido h1 {
    opacity: 1;
    transform: translateY(0);
    /* Añadimos un micro-rebote al título para sincronizar con el impacto de la carta */
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.3s;
}

/* El triángulo hace un corte diagonal rápido al final */
.columna.caja.foco figure::before {
    transform: translate(0, 0);
    /* Curva acelerada de entrada */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.5s;
}