/* ==========================================================================
   GICACO LUXURY TEA THEME - ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes: Floating Organic Leaves & Subtle Particles
   -------------------------------------------------------------------------- */

@keyframes floatLeaf1 {
    0% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }
    33% {
        transform: translateY(-24px) rotate(8deg) scale(1.03);
    }
    66% {
        transform: translateY(-10px) rotate(-6deg) scale(0.98);
    }
    100% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }
}

@keyframes floatLeaf2 {
    0% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }
    50% {
        transform: translateY(-30px) rotate(-10deg) scale(1.04);
    }
    100% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }
}

@keyframes subtleBob {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes gentlePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

@keyframes teaGlow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.55;
        transform: scale(1.08);
    }
}

/* --------------------------------------------------------------------------
   Scroll Reveal States (Controlled by IntersectionObserver in animations.js)
   -------------------------------------------------------------------------- */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.animate-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delays */
.animate-on-scroll[data-delay="100"] { transition-delay: 0.1s; }
.animate-on-scroll[data-delay="200"] { transition-delay: 0.2s; }
.animate-on-scroll[data-delay="300"] { transition-delay: 0.3s; }
.animate-on-scroll[data-delay="400"] { transition-delay: 0.4s; }

/* Entrance Animations on Load */
.animate-fade-up {
    animation: fadeUpIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scale-in {
    animation: scaleIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

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

/* --------------------------------------------------------------------------
   Interactive Micro-Animations
   -------------------------------------------------------------------------- */

/* Button Ripple / Glow */
.btn-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        60deg,
        rgba(255, 255, 255, 0) 20%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0) 80%
    );
    transform: rotate(25deg) translateY(-100%);
    transition: transform 0.75s ease-in-out;
}

.btn-primary:hover::after {
    transform: rotate(25deg) translateY(100%);
}

/* Card Tilt & Lift */
.product-card, 
.value-card, 
.brewing-step-card,
.testimonial-card {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.3s ease;
}

/* Accordion Smooth Height Transition */
.faq-answer-pane {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.3s ease;
    opacity: 0;
}

.faq-item.is-active .faq-answer-pane {
    max-height: 350px;
    opacity: 1;
    padding-bottom: 22px;
}

/* --------------------------------------------------------------------------
   Accessibility: prefers-reduced-motion Support (Requirement 8)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .floating-leaf,
    .hero-product-box,
    .final-cta-box-wrap {
        animation: none !important;
        transform: none !important;
    }

    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}