/* ========================================
   AliveTeams — Motion & Animations
   
   Princípio fundamental: movimento sentido, não percebido.
   O site se move como um organismo vivo em repouso.
   
   Nunca como máquina, apresentação ou produto buscando atenção.
   ======================================== */

/* ========================================
   Keyframes — Entrada de conteúdo (scroll-based reveal)
   ======================================== */

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================================
   Intersection Observer — Elementos que entram ao scroll
   ======================================== */

.fade-in-up {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger effect para múltiplos elementos */
.fade-in-up:nth-child(1) { transition-delay: 0ms; }
.fade-in-up:nth-child(2) { transition-delay: 100ms; }
.fade-in-up:nth-child(3) { transition-delay: 200ms; }
.fade-in-up:nth-child(4) { transition-delay: 300ms; }
.fade-in-up:nth-child(5) { transition-delay: 400ms; }

/* ========================================
   Interação com Links e CTAs
   ======================================== */

.nav-link {
    position: relative;
    transition: color 300ms ease-out;
}

.nav-link:hover {
    color: var(--color-text);
}

/* Sublinhado sutil em links */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link:hover::after {
    width: 100%;
}

/* Botões — mudança suave de cor, sem bounce */
.btn {
    transition: background-color 300ms ease-out,
                color 300ms ease-out,
                border-color 300ms ease-out;
}

.btn--primary:hover {
    transform: none;
}

.btn--secondary:hover {
    transform: none;
}

/* Links em texto — sublinhado suave */
a[href] {
    position: relative;
    transition: color 300ms ease-out;
}

.confianca-link a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.confianca-link a:hover::after {
    width: 100%;
}

/* ========================================
   Movimento contínuo extremamente sutil (opcional)
   
   Apenas em imagens grandes/editoriais
   Zoom muito lento (1-2% em 20-30s)
   ======================================== */

@keyframes subtleZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.015);
    }
}

.hero__image img,
.section__image img,
.lente__image img,
.confianca-image img,
.fechamento__image img {
    animation: subtleZoom 25s ease-in-out infinite alternate;
}

/* ========================================
   Respeito a prefers-reduced-motion
   
   Se o usuário preferir movimento reduzido,
   remover TODAS as animações não essenciais
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .fade-in-up {
        opacity: 1;
        transform: none;
    }

    .hero__image img,
    .section__image img,
    .lente__image img,
    .confianca-image img,
    .fechamento__image img {
        animation: none;
    }

    .nav-link::after,
    .confianca-link a::after {
        display: none;
    }
}

/* ========================================
   Transições suaves para mudanças de estado
   ======================================== */

body {
    transition: background-color 300ms ease-out;
}

/* ========================================
   Scroll behavior — suave, não abrupto
   ======================================== */

html {
    scroll-behavior: smooth;
}

/* ========================================
   Fade-in para seções ao carregar
   ======================================== */

.section {
    animation: fadeIn 800ms ease-out forwards;
}

.section:nth-of-type(1) { animation-delay: 0ms; }
.section:nth-of-type(2) { animation-delay: 100ms; }
.section:nth-of-type(3) { animation-delay: 200ms; }
.section:nth-of-type(4) { animation-delay: 300ms; }
.section:nth-of-type(5) { animation-delay: 400ms; }
.section:nth-of-type(6) { animation-delay: 500ms; }
.section:nth-of-type(7) { animation-delay: 600ms; }
.section:nth-of-type(8) { animation-delay: 700ms; }

/* ========================================
   Hover suave em elementos interativos
   ======================================== */

.lente {
    transition: box-shadow 300ms ease-out,
                transform 300ms ease-out;
}

.lente:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.confianca-bloco {
    transition: box-shadow 300ms ease-out,
                transform 300ms ease-out;
}

.confianca-bloco:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* ========================================
   Transição suave do header ao scroll
   ======================================== */

.header {
    transition: background-color 300ms ease-out,
                border-color 300ms ease-out;
}