/* ============================================================
   PUROALOE — Animations
   Scroll reveals, hover effects, and micro-interactions
   ============================================================ */

/* --- Scroll Reveal Base --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Directional variants */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Staggered children */
.reveal-stagger>* {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-stagger.revealed>*:nth-child(1) {
    transition-delay: 0ms;
}

.reveal-stagger.revealed>*:nth-child(2) {
    transition-delay: 80ms;
}

.reveal-stagger.revealed>*:nth-child(3) {
    transition-delay: 160ms;
}

.reveal-stagger.revealed>*:nth-child(4) {
    transition-delay: 240ms;
}

.reveal-stagger.revealed>*:nth-child(5) {
    transition-delay: 320ms;
}

.reveal-stagger.revealed>*:nth-child(6) {
    transition-delay: 400ms;
}

.reveal-stagger.revealed>*:nth-child(7) {
    transition-delay: 480ms;
}

.reveal-stagger.revealed>*:nth-child(8) {
    transition-delay: 560ms;
}

.reveal-stagger.revealed>* {
    opacity: 1;
    transform: translateY(0);
}

/* --- Parallax --- */
.parallax-container {
    overflow: hidden;
    position: relative;
}

.parallax-bg {
    position: absolute;
    inset: -20% 0;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

/* --- Hover Effects --- */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.03);
}

.hover-glow {
    transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
    box-shadow: var(--shadow-gold);
}

/* Image zoom on hover (for cards) */
.img-zoom {
    overflow: hidden;
}

.img-zoom img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-zoom:hover img {
    transform: scale(1.08);
}

/* --- Button Animations --- */
.btn-pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(26, 77, 46, 0.4);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(26, 77, 46, 0);
    }
}

.btn-pulse-gold {
    animation: pulseGold 2s ease-in-out infinite;
}

@keyframes pulseGold {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.4);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(201, 168, 76, 0);
    }
}

/* --- Floating WhatsApp Button --- */
@keyframes floatBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.float-bounce {
    animation: floatBounce 3s ease-in-out infinite;
}

/* --- Counter Animation --- */
.counter {
    display: inline-block;
}

/* --- Loading Skeleton --- */
.skeleton {
    background: linear-gradient(90deg,
            var(--color-bg-alt) 25%,
            var(--color-border-light) 37%,
            var(--color-bg-alt) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    width: 80%;
}

.skeleton-text--short {
    width: 40%;
}

.skeleton-image {
    aspect-ratio: 1;
    width: 100%;
}

/* --- Page Transition --- */
/* NOTE: NEVER apply .page-enter to body — transform on body breaks position:fixed (navbar).
   Apply .page-enter only to an inner content wrapper BELOW the navbar. */
.page-enter {
    animation: pageEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pageEnter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --- Marquee / Ticker --- */
.ticker {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}

.ticker-inner {
    display: flex;
    animation: ticker 30s linear infinite;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* --- Gradient Text --- */
.gradient-text {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-gold {
    background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent), var(--color-accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Reduce Motion --- */
@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .reveal-stagger>* {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .parallax-bg {
        transform: none !important;
    }

    .btn-pulse,
    .btn-pulse-gold,
    .float-bounce {
        animation: none;
    }

    .ticker-inner {
        animation: none;
    }

    .skeleton {
        animation: none;
    }
}