/* Explain: Defines subtle animations for scrolling effects, floating elements, and hover states. */
/* ================= Revelado al hacer scroll ================= */
[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

[data-reveal="left"] {
    transform: translateX(-36px);
}

[data-reveal="right"] {
    transform: translateX(36px);
}

[data-reveal="scale"] {
    transform: scale(0.94);
}

/* ================= Flotación suave ================= */
@keyframes floaty {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

.float-slow {
    animation: floaty 6s ease-in-out infinite;
}

.float-slower {
    animation: floaty 8.5s ease-in-out infinite;
}

/* ================= Realce con profundidad ================= */
.lift {
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

/* ================= Texto con degradado ================= */
.text-gradient-gold {
    background: linear-gradient(100deg, #f8d66a, #f5c542 45%, #e6b52f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .float-slow,
    .float-slower,
    .lift {
        animation: none !important;
        transition: none !important;
    }
}