/**
 * Animations V2 — A Procópio
 * Micro-interações de alta qualidade e Scroll Reveals premium
 */

/* ============================================
   SCROLL REVEAL — Intersection Observer
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
    will-change: transform, opacity;
}

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

.reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition:
        opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
    will-change: transform, opacity;
}

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

.reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition:
        opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
    will-change: transform, opacity;
}

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

.reveal-scale {
    opacity: 0;
    transform: scale(0.96);
    transition:
        opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
    will-change: transform, opacity;
}

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

/* Delays para cascata visual em grids */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Cards do lookbook em cascata */
.lookbook-grid .product-card:nth-child(1) { transition-delay: 0.05s; }
.lookbook-grid .product-card:nth-child(2) { transition-delay: 0.12s; }
.lookbook-grid .product-card:nth-child(3) { transition-delay: 0.19s; }
.lookbook-grid .product-card:nth-child(4) { transition-delay: 0.24s; }
.lookbook-grid .product-card:nth-child(5) { transition-delay: 0.30s; }
.lookbook-grid .product-card:nth-child(6) { transition-delay: 0.36s; }

/* ============================================
   HERO — Keyframes de Entrada
   ============================================ */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-eyebrow {
    animation: heroFadeUp 1s var(--ease-out) 0.2s both;
}

.hero-heading {
    animation: heroFadeUp 1s var(--ease-out) 0.4s both;
}

.hero-sub {
    animation: heroFadeUp 1s var(--ease-out) 0.6s both;
}

.hero-actions {
    animation: heroFadeUp 1s var(--ease-out) 0.8s both;
}

/* ============================================
   SHIMMER EM BOTÃO (reutilizável no btn)
   ============================================ */
@keyframes shimmer {
    from { left: -100%; }
    to   { left: 160%;  }
}

/* ============================================
   FADE DE ENTRADA DO SITE
   ============================================ */
@keyframes bodyFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body {
    animation: bodyFade 0.5s ease-out both;
}

/* ============================================
   TRANSIÇÃO DAS ABAS DO LOOKBOOK
   ============================================ */
.lookbook-grid {
    transition: opacity 0.2s ease-out;
}

.lookbook-grid.fading {
    opacity: 0;
}