/* ============================================================
   animations.css — Ullua-Soft Landing
   Motor: Intersection Observer nativo. Sin librerías externas.
   ============================================================ */

/* ── REDUCED MOTION: deshabilitar TODO si el usuario lo prefiere ── */
@media (prefers-reduced-motion: reduce) {
    .fade-up, .fade-left, .fade-right, .stagger-item,
    .hero-load-1, .hero-load-2, .hero-load-3,
    .hero-load-4, .hero-load-5, .hero-load-img {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* ── SCROLL: estado inicial (invisible hasta que el IO los activa) ── */
.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Los stagger-item son fade-up con delay escalonado */
.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Delays escalonados */
.stagger-item:nth-child(1)  { transition-delay: 0ms; }
.stagger-item:nth-child(2)  { transition-delay: 80ms; }
.stagger-item:nth-child(3)  { transition-delay: 160ms; }
.stagger-item:nth-child(4)  { transition-delay: 240ms; }
.stagger-item:nth-child(5)  { transition-delay: 320ms; }
.stagger-item:nth-child(6)  { transition-delay: 400ms; }
.stagger-item:nth-child(7)  { transition-delay: 480ms; }
.stagger-item:nth-child(8)  { transition-delay: 560ms; }
.stagger-item:nth-child(9)  { transition-delay: 640ms; }
.stagger-item:nth-child(10) { transition-delay: 720ms; }

/* Estado visible — el IO agrega esta clase */
.fade-up.is-visible,
.fade-left.is-visible,
.fade-right.is-visible,
.stagger-item.is-visible {
    opacity: 1;
    transform: none;
}

/* ── HERO LOAD: anima los elementos del hero al cargar la página ── */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: scale(1.02); }
    to   { opacity: 1; transform: scale(1); }
}

.hero-load-1   { animation: heroFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0ms   both; }
.hero-load-2   { animation: heroFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }
.hero-load-3   { animation: heroFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 240ms both; }
.hero-load-4   { animation: heroFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 360ms both; }
.hero-load-5   { animation: heroFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 480ms both; }
.hero-load-img { animation: heroFadeIn 0.7s  cubic-bezier(0.16, 1, 0.3, 1) 200ms both; }

/* ── SHIMMER en botones CTA (solo desktop / no-touch) ── */
@media (hover: hover) {
    .btn-solid-v2,
    .btn-solid {
        position: relative;
        overflow: hidden;
    }

    .btn-solid-v2::before,
    .btn-solid::before {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.25) 50%,
            transparent 100%
        );
        transform: skewX(-20deg);
        transition: left 0s;
        pointer-events: none;
    }

    .btn-solid-v2:hover::before,
    .btn-solid:hover::before {
        left: 160%;
        transition: left 0.6s ease;
    }
}

/* ── FAQ SMOOTH EXPAND ── */
.faq-row {
    overflow: hidden;
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    padding-top: 0;
}

.faq-row[open] .faq-a {
    max-height: 600px;
    padding-top: 0.8rem;
}

/* La flecha/ícono rota al abrir */
.faq-row summary .fa-plus {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-row[open] summary .fa-plus {
    transform: rotate(45deg);
}

/* Quitar el triángulo nativo del details */
.faq-row summary { list-style: none; }
.faq-row summary::-webkit-details-marker { display: none; }

/* ── HERO IMAGE: hover tilt ── */
.hero-photo-wrap {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-photo-wrap:hover {
    transform: rotate(0deg) scale(1.01);
}