/* ========================================
   ANIMAÇÕES PREMIUM - CAMINHÃO PIPA LÉO
   ======================================== */

/* ========================================
   KEYFRAMES - Animações Base
   ======================================== */

/* Fade In Elegante de Baixo */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Suave */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade In da Esquerda */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In da Direita */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Animação de Pulsação Premium */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* Flutuação Suave */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* Shimmer Dourado */
@keyframes shimmerGold {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Glow Pulse */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(212, 165, 116, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(212, 165, 116, 0.5);
    }
}

/* Rotação Sutil */
@keyframes subtleRotate {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(1deg);
    }
    75% {
        transform: rotate(-1deg);
    }
}

/* Bounce Suave */
@keyframes softBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Typing Effect */
@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* Gradiente Animado */
@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* ========================================
   HEADER - Animações
   ======================================== */
#header {
    animation: fadeIn 0.8s ease-out;
}

.logo h1 {
    animation: fadeInUp 0.9s ease-out 0.2s both;
}

/* ========================================
   HERO - Animações Impressionantes
   ======================================== */
#hero h1 {
    animation: fadeInUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

#hero p {
    animation: fadeInUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.cta-buttons, .hero-ctas {
    animation: fadeInUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}

/* Animação escalonada dos botões */
.cta-primary {
    animation: fadeInUp 0.8s ease-out 0.8s both;
}

.cta-secondary {
    animation: fadeInUp 0.8s ease-out 0.95s both;
}

.cta-tertiary {
    animation: fadeInUp 0.8s ease-out 1.1s both;
}

/* ========================================
   BOTÕES - Efeitos Premium
   ======================================== */
.cta-primary, .cta-secondary, .cta-tertiary, .content-cta, .cta-button {
    transition: 
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s ease,
        background 0.3s ease;
}

/* Hover State - Elevação */
.cta-primary:hover, 
.cta-secondary:hover, 
.cta-tertiary:hover,
.cta-button:hover {
    animation: none;
}

.content-cta:hover {
    animation: none;
}

/* Active State - Press Effect */
.cta-primary:active, 
.cta-secondary:active, 
.cta-tertiary:active,
.content-cta:active,
.cta-button:active {
    transform: translateY(-2px) scale(0.98);
}

/* ========================================
   CONTENT SECTIONS - Animações
   ======================================== */
.content-section {
    animation: fadeInUp 0.9s ease-out both;
    transition: 
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s ease;
}

/* Animação escalonada das seções */
.content-section:nth-child(1) { animation-delay: 0.1s; }
.content-section:nth-child(2) { animation-delay: 0.15s; }
.content-section:nth-child(3) { animation-delay: 0.2s; }
.content-section:nth-child(4) { animation-delay: 0.25s; }
.content-section:nth-child(5) { animation-delay: 0.3s; }
.content-section:nth-child(6) { animation-delay: 0.35s; }
.content-section:nth-child(7) { animation-delay: 0.4s; }
.content-section:nth-child(8) { animation-delay: 0.45s; }
.content-section:nth-child(9) { animation-delay: 0.5s; }

/* Títulos das Seções */
.content-section h2 {
    transition: color 0.3s ease;
}

.content-section:hover h2 {
    color: #0f4c75;
}

/* Parágrafos */
.content-section p {
    transition: color 0.3s ease;
}

.content-section:hover p {
    color: #1e293b;
}

/* Efeito de linha decorativa no hover */
.content-section h2::after {
    transition: width 0.4s ease, background 0.3s ease;
}

.content-section:hover h2::after {
    width: 100px;
    background: linear-gradient(135deg, #d4a574 0%, #b8956c 50%, #d4a574 100%);
    background-size: 200% 100%;
    animation: shimmerGold 2s ease-in-out infinite;
}

/* ========================================
   MAP SECTION - Animações
   ======================================== */
#map-embed {
    animation: fadeIn 1s ease-out 0.3s both;
}

#map-container {
    animation: scaleIn 1s ease-out 0.5s both;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

#map-container:hover {
    transform: scale(1.01);
    box-shadow: 0 25px 70px rgba(10, 25, 47, 0.18);
}

/* ========================================
   FOOTER - Animações
   ======================================== */
#footer {
    animation: fadeIn 0.8s ease-out both;
}

.footer-section {
    animation: fadeInUp 0.8s ease-out both;
}

.footer-section:nth-child(1) { animation-delay: 0.15s; }
.footer-section:nth-child(2) { animation-delay: 0.25s; }
.footer-section:nth-child(3) { animation-delay: 0.35s; }

/* Links do Footer - Efeito Underline */
.footer-section a {
    position: relative;
    transition: color 0.3s ease;
}

.footer-section a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #64ffda, #d4a574);
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-section a:hover::after {
    width: 100%;
}

/* ========================================
   WHATSAPP FLOAT - Animações Atraentes
   ======================================== */
.whatsapp-link {
    animation: 
        fadeIn 0.8s ease-out 1.5s both,
        float 4s ease-in-out 2.5s infinite;
}

.whatsapp-link:hover {
    animation: none;
}

/* ========================================
   SCROLL ANIMATIONS (via Intersection Observer)
   ======================================== */

/* Classes para JavaScript de scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: 
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: 
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: 
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: 
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* ========================================
   LOADING STATES
   ======================================== */
.loading {
    opacity: 0;
    animation: fadeIn 0.6s ease-out 0.3s forwards;
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmerGold 1.5s infinite;
}

/* ========================================
   FOCUS & ACCESSIBILITY ANIMATIONS
   ======================================== */
.cta-primary:focus-visible, 
.cta-secondary:focus-visible, 
.cta-tertiary:focus-visible, 
.content-cta:focus-visible,
.cta-button:focus-visible,
.whatsapp-link:focus-visible {
    outline: 3px solid #64ffda;
    outline-offset: 3px;
    animation: pulse 0.6s ease-in-out;
}

/* ========================================
   MICRO-INTERACTIONS
   ======================================== */
@media (prefers-reduced-motion: no-preference) {
    /* Hover suave nos links gerais */
    a {
        transition: color 0.3s ease;
    }

    /* Imagens com transição */
    img {
        transition: transform 0.4s ease, filter 0.4s ease;
    }

    img:hover {
        transform: scale(1.02);
    }

    /* Lists items stagger */
    .footer-section li {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .footer-section li:hover {
        transform: translateX(5px);
    }
}

/* ========================================
   REDUÇÃO DE MOVIMENTO (Acessibilidade)
   ======================================== */
@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;
    }

    .content-section,
    .footer-section,
    #hero h1,
    #hero p,
    .cta-buttons,
    .whatsapp-link {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;
        transform: none;
    }
}

/* ========================================
   ANIMAÇÕES ESPECIAIS - EFEITOS DECORATIVOS
   ======================================== */

/* Efeito de partículas no hover do hero (CSS only) */
@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

/* Linha decorativa animada */
@keyframes lineGrow {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}

/* Entrada dramática para elementos importantes */
@keyframes dramaticEntry {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Para uso em elementos especiais */
.dramatic-entry {
    animation: dramaticEntry 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Efeito de texto gradiente animado */
.animated-gradient-text {
    background: linear-gradient(
        90deg,
        #d4a574,
        #64ffda,
        #3282b8,
        #d4a574
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 6s ease infinite;
}