/* ============================================
   ANIMAÇÕES DE SEÇÕES - GRANJA CAMAJU
   ============================================ */

/* Configurações globais de animação */
:root {
    --animation-duration: 0.8s;
    --animation-delay: 0.1s;
    --animation-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   KEYFRAMES PRINCIPAIS
   ============================================ */

/* Fade In com Slide para cima */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In com Slide para baixo */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In com Slide para esquerda */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In com Slide para direita */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale In (crescimento suave) */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Rotate In */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-5deg) scale(0.95);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* Parallax Scroll Effect */
@keyframes parallaxFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ============================================
   CLASSES DE ANIMAÇÃO APLICÁVEIS
   ============================================ */

/* Estado padrão - invisível */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
}

/* Estado ativo - visível com animação */
.animate-on-scroll.is-visible {
    animation: fadeInUp var(--animation-duration) var(--animation-easing) forwards;
}

/* Variações de direção */
.animate-on-scroll.animate-up {
    opacity: 0;
    transform: translateY(40px);
}

.animate-on-scroll.animate-up.is-visible {
    animation: fadeInUp var(--animation-duration) var(--animation-easing) forwards;
}

.animate-on-scroll.animate-down {
    opacity: 0;
    transform: translateY(-40px);
}

.animate-on-scroll.animate-down.is-visible {
    animation: fadeInDown var(--animation-duration) var(--animation-easing) forwards;
}

.animate-on-scroll.animate-left {
    opacity: 0;
    transform: translateX(-40px);
}

.animate-on-scroll.animate-left.is-visible {
    animation: fadeInLeft var(--animation-duration) var(--animation-easing) forwards;
}

.animate-on-scroll.animate-right {
    opacity: 0;
    transform: translateX(40px);
}

.animate-on-scroll.animate-right.is-visible {
    animation: fadeInRight var(--animation-duration) var(--animation-easing) forwards;
}

.animate-on-scroll.animate-scale {
    opacity: 0;
    transform: scale(0.9);
}

.animate-on-scroll.animate-scale.is-visible {
    animation: scaleIn var(--animation-duration) var(--animation-easing) forwards;
}

/* Stagger effect - atraso em cascata */
.stagger-item {
    opacity: 0;
    transform: translateY(40px);
}

.stagger-item.is-visible {
    animation: fadeInUp var(--animation-duration) var(--animation-easing) forwards;
}

/* Atrasos em cascata */
.stagger-item:nth-child(1) { animation-delay: calc(var(--animation-delay) * 0); }
.stagger-item:nth-child(2) { animation-delay: calc(var(--animation-delay) * 1); }
.stagger-item:nth-child(3) { animation-delay: calc(var(--animation-delay) * 2); }
.stagger-item:nth-child(4) { animation-delay: calc(var(--animation-delay) * 3); }
.stagger-item:nth-child(5) { animation-delay: calc(var(--animation-delay) * 4); }
.stagger-item:nth-child(6) { animation-delay: calc(var(--animation-delay) * 5); }

/* ============================================
   ANIMAÇÕES ESPECÍFICAS POR SEÇÃO
   ============================================ */

/* HERO SECTION */
.hero-title {
    opacity: 0;
    transform: translateY(30px);
}

.hero-title.is-visible {
    animation: fadeInUp 1s var(--animation-easing) forwards;
}

.hero-subtitle {
    opacity: 0;
    transform: translateY(30px);
}

.hero-subtitle.is-visible {
    animation: fadeInUp 1s var(--animation-easing) 0.15s forwards;
}

.hero-badge {
    opacity: 0;
    transform: translateY(20px);
}

.hero-badge.is-visible {
    animation: fadeInUp 0.8s var(--animation-easing) 0.05s forwards;
}

.hero-cta {
    opacity: 0;
    transform: translateY(30px);
}

.hero-cta.is-visible {
    animation: fadeInUp 1s var(--animation-easing) 0.3s forwards;
}

.hero-image {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
}

.hero-image.is-visible {
    animation: scaleIn 1.2s var(--animation-easing) 0.2s forwards;
}

/* ABOUT SECTION */
.about-content {
    opacity: 0;
    transform: translateX(-40px);
}

.about-content.is-visible {
    animation: fadeInLeft 1s var(--animation-easing) forwards;
}

.about-image {
    opacity: 0;
    transform: translateX(40px);
}

.about-image.is-visible {
    animation: fadeInRight 1s var(--animation-easing) forwards;
}

.about-card {
    opacity: 0;
    transform: translateY(30px);
}

.about-card.is-visible {
    animation: fadeInUp 0.8s var(--animation-easing) forwards;
}

/* DELIVERY SECTION */
.delivery-image {
    opacity: 0;
    transform: translateX(-40px);
}

.delivery-image.is-visible {
    animation: fadeInLeft 1s var(--animation-easing) forwards;
}

.delivery-content {
    opacity: 0;
    transform: translateX(40px);
}

.delivery-content.is-visible {
    animation: fadeInRight 1s var(--animation-easing) forwards;
}

.delivery-card {
    opacity: 0;
    transform: translateY(30px);
}

.delivery-card.is-visible {
    animation: fadeInUp 0.8s var(--animation-easing) forwards;
}

/* PRODUCTS SECTION */
.products-header {
    opacity: 0;
    transform: translateY(30px);
}

.products-header.is-visible {
    animation: fadeInUp 0.8s var(--animation-easing) forwards;
}

.product-card {
    opacity: 0;
    transform: translateY(40px);
}

.product-card.is-visible {
    animation: fadeInUp 0.8s var(--animation-easing) forwards;
}

/* TESTIMONIALS SECTION */
.testimonials-header {
    opacity: 0;
    transform: translateY(30px);
}

.testimonials-header.is-visible {
    animation: fadeInUp 0.8s var(--animation-easing) forwards;
}

.testimonial-card {
    opacity: 0;
    transform: translateY(40px);
}

.testimonial-card.is-visible {
    animation: fadeInUp 0.8s var(--animation-easing) forwards;
}

/* INSTAGRAM SECTION */
.instagram-header {
    opacity: 0;
    transform: translateY(30px);
}

.instagram-header.is-visible {
    animation: fadeInUp 0.8s var(--animation-easing) forwards;
}

.instagram-embed {
    opacity: 0;
    transform: scale(0.95);
}

.instagram-embed.is-visible {
    animation: scaleIn 1s var(--animation-easing) forwards;
}

/* CONTACT SECTION */
.contact-content {
    opacity: 0;
    transform: translateX(-40px);
}

.contact-content.is-visible {
    animation: fadeInLeft 1s var(--animation-easing) forwards;
}

.contact-form {
    opacity: 0;
    transform: translateX(40px);
}

.contact-form.is-visible {
    animation: fadeInRight 1s var(--animation-easing) forwards;
}

/* ============================================
   EFEITOS ADICIONAIS
   ============================================ */

/* Parallax effect para elementos de fundo */
.parallax-element {
    animation: parallaxFloat 6s ease-in-out infinite;
}

/* Hover effect para cards */
.card-hover {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-hover:hover {
    transform: translateY(-8px);
}

/* Pulse effect */
@keyframes pulse-soft {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.pulse-animation {
    animation: pulse-soft 2s ease-in-out infinite;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    :root {
        --animation-duration: 0.6s;
        --animation-delay: 0.08s;
    }

    .about-content {
        transform: translateY(40px);
    }

    .about-content.is-visible {
        animation: fadeInUp 0.8s var(--animation-easing) forwards;
    }

    .about-image {
        transform: translateY(40px);
    }

    .about-image.is-visible {
        animation: fadeInUp 0.8s var(--animation-easing) forwards;
    }

    .delivery-image {
        transform: translateY(40px);
    }

    .delivery-image.is-visible {
        animation: fadeInUp 0.8s var(--animation-easing) forwards;
    }

    .delivery-content {
        transform: translateY(40px);
    }

    .delivery-content.is-visible {
        animation: fadeInUp 0.8s var(--animation-easing) forwards;
    }

    .contact-content {
        transform: translateY(40px);
    }

    .contact-content.is-visible {
        animation: fadeInUp 0.8s var(--animation-easing) forwards;
    }

    .contact-form {
        transform: translateY(40px);
    }

    .contact-form.is-visible {
        animation: fadeInUp 0.8s var(--animation-easing) forwards;
    }
}