/* Goal/static/css/style.css */

body {
    font-family: 'Inter', sans-serif;
}

/* Animaciones CSS */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fondo con patrón */
.bg-pattern-light {
     
    background-repeat: repeat;
    background-size: 200px; 
}

/* Video principal */
.video-background {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Se ve completo */
    background: black;
}

/* Video difuminado detrás */
.video-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(20px) brightness(0.6);
    transform: scale(1.1);
    z-index: 1;
}

/* Ajustes globales */
body, html {
    margin: 0;
    padding: 0;
}

/* --- */

/* Estilos para la sección de Trabajos (home.html) */
.showcase-image-container {
    height: 16rem; /* 256px - la misma altura que h-64 de Tailwind */
    width: 100%;
    overflow: hidden;
}

.showcase-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para que llene el contenedor sin distorsionarla */
    object-position: center; /* Centra la imagen en el contenedor */
}