/* custom.css - Complementos CSS para fidelidad 100% con Tailwind y Framer Motion */

/* Aspect Ratios */
.aspect-\[4\/3\],
.aspect-w-4.aspect-h-3 {
    aspect-ratio: 4 / 3;
}

.aspect-w-16.aspect-h-9,
.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-\[4\/3\] > img,
.aspect-w-4.aspect-h-3 > img,
.aspect-w-16.aspect-h-9 > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Transiciones de Header */
#mainHeader {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tipografía de títulos */
h1, h2, h3, .font-serif {
    font-family: 'Playfair Display', Georgia, serif;
}

/* ========================================================
   ANIMACIONES FRAMER MOTION (Replicadas con CSS estándar)
   ======================================================== */

/* 1. Zoom Out del Hero Background Image (scale: 1.1 -> 1.0 en 1.5s easeOut) */
@keyframes heroZoomOut {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.hero-bg-zoom {
    animation: heroZoomOut 1.5s cubic-bezier(0, 0, 0.2, 1) forwards;
    will-change: transform;
}

/* 2. Fade In Up con Retardos en Hero */
@keyframes heroFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-anim-welcome {
    opacity: 0;
    animation: heroFadeInUp 0.8s cubic-bezier(0, 0, 0.2, 1) 0.3s forwards;
}

.hero-anim-title {
    opacity: 0;
    animation: heroFadeInUp 0.8s cubic-bezier(0, 0, 0.2, 1) 0.5s forwards;
}

.hero-anim-desc {
    opacity: 0;
    animation: heroFadeInUp 0.8s cubic-bezier(0, 0, 0.2, 1) 0.7s forwards;
}

.hero-anim-gradient {
    opacity: 0;
    animation: heroFadeInUp 1.0s cubic-bezier(0, 0, 0.2, 1) 1.0s forwards;
}

/* 3. In-View Scroll Animations (useInView threshold 0.2) */
.motion-fade-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0, 0, 0.2, 1), transform 0.8s cubic-bezier(0, 0, 0.2, 1);
    will-change: opacity, transform;
}

.motion-fade-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s cubic-bezier(0, 0, 0.2, 1), transform 0.8s cubic-bezier(0, 0, 0.2, 1);
    transition-delay: 0.2s;
    will-change: opacity, transform;
}

.motion-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0, 0, 0.2, 1), transform 0.8s cubic-bezier(0, 0, 0.2, 1);
    will-change: opacity, transform;
}

.motion-fade-down {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.8s cubic-bezier(0, 0, 0.2, 1), transform 0.8s cubic-bezier(0, 0, 0.2, 1);
    will-change: opacity, transform;
}

/* Delays para efecto cascada (stagger) */
.delay-100 { transition-delay: 0.1s !important; }
.delay-200 { transition-delay: 0.2s !important; }
.delay-300 { transition-delay: 0.3s !important; }
.delay-400 { transition-delay: 0.4s !important; }
.delay-500 { transition-delay: 0.5s !important; }

/* Estado activo cuando entra en pantalla */
.motion-fade-left.is-visible,
.motion-fade-right.is-visible,
.motion-fade-up.is-visible,
.motion-fade-down.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}