/**
 * Micheleto Advocacia - Sistema de Animações Suaves e Microinterações
 * - Duração: 2.5s
 * - Curva de Easing: cubic-bezier(0.16, 1, 0.3, 1)
 * - Bidirecional (Scroll Up / Scroll Down)
 * - Cascata (Stagger) por linha / elemento
 * - Hero Zoom Out Bidirecional
 * - Acabamento Laminado (Foil / Sheen) para Botões
 */

:root {
  --anim-duration-slow: 2.5s;
  --anim-ease-noble: cubic-bezier(0.16, 1, 0.3, 1);
  --stagger-step: 110ms;
}

/* ============================================================ */
/* 1. ANIMAÇÃO SUAVE BIDIRECIONAL EM CASCATA                    */
/* ============================================================ */

.reveal-item,
.reveal-cascade > * {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: 
    opacity var(--anim-duration-slow) var(--anim-ease-noble),
    transform var(--anim-duration-slow) var(--anim-ease-noble);
  transition-delay: calc(var(--stagger, 0) * var(--stagger-step));
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Estado Ativo (Visível na Viewport - Bidirecional) */
.reveal-item.is-visible,
.reveal-cascade.is-visible > *,
.reveal-cascade > *.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Estado Pronto (Pós-revelação: microinterações e hover rápidos sem atraso) */
.reveal-item.reveal-ready,
.reveal-cascade.reveal-ready > *,
.reveal-cascade > *.reveal-ready {
  transition: 
    opacity 0.4s var(--anim-ease-noble),
    transform 0.3s var(--anim-ease-noble),
    box-shadow 0.3s var(--anim-ease-noble),
    border-color 0.3s var(--anim-ease-noble),
    background-color 0.3s var(--anim-ease-noble),
    color 0.3s var(--anim-ease-noble);
  transition-delay: 0s !important;
}

/* ============================================================ */
/* 2. ZOOM OUT BIDIRECIONAL EXCLUSIVO NA HERO                   */
/* ============================================================ */

.hero-zoom-img {
  transform: scale(1.12);
  transition: 
    transform var(--anim-duration-slow) var(--anim-ease-noble),
    opacity var(--anim-duration-slow) var(--anim-ease-noble) !important;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-origin: center center;
}

.hero-zoom-img.is-visible {
  transform: scale(1);
}

/* ============================================================ */
/* 3. ISENÇÃO DE DELAY & MICROINTERAÇÕES RÁPIDAS (HOVER)        */
/* ============================================================ */

/* Garante resposta imediata sem atraso em hover de cards, links, botões e elementos interativos */
button,
a,
.btn-laminated,
.area-tab-btn,
.faq-item,
#whatsapp-trigger-btn,
#mobile-menu-btn,
#mobile-menu-close-btn,
[role="tab"],
[role="button"],
[class*="hover:-translate"],
[class*="hover:scale"],
[class*="hover:shadow"],
[class*="hover:ring"],
[class*="focus-within:"],
[class*="group"] {
  transition-delay: 0s !important;
}

/* Resposta rápida (300ms) durante interação hover e foco */
.reveal-item:hover,
.reveal-item:focus-within,
.reveal-cascade > *:hover,
.reveal-cascade > *:focus-within,
[class*="hover:-translate"]:hover,
[class*="hover:-translate"]:focus-within,
[class*="hover:scale"]:hover,
[class*="hover:scale"]:focus-within,
[class*="hover:shadow"]:hover,
[class*="hover:shadow"]:focus-within,
[class*="hover:ring"]:hover,
[class*="hover:ring"]:focus-within,
.group:hover,
.group:focus-within,
a:hover,
a:focus-visible,
button:hover,
button:focus-visible {
  transition-duration: 0.3s !important;
  transition-delay: 0s !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Efeito Laminado Sutil / Foil Shimmer */
.btn-laminated {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-laminated::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -120%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 35%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.05) 65%,
    transparent 100%
  );
  transform: rotate(20deg);
  pointer-events: none;
  transition: left 0.75s var(--anim-ease-noble);
  z-index: 2;
}

.btn-laminated:hover::after,
.btn-laminated:focus-visible::after {
  left: 160%;
}

/* Variação para Botões Escuros/Bordas */
.btn-laminated-dark::after {
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(197, 168, 128, 0.05) 35%,
    rgba(197, 168, 128, 0.25) 50%,
    rgba(197, 168, 128, 0.05) 65%,
    transparent 100%
  );
}

/* ============================================================ */
/* 4. ACESSIBILIDADE (PREFERS-REDUCED-MOTION)                  */
/* ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .reveal-item,
  .reveal-cascade > *,
  .hero-zoom-img,
  .btn-laminated::after {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}