/* ═══════════════════════════════════════════════════════════════════════════
   MUELLER — Animações e Transições
   Microinterações refinadas e tecnológicas.
   Todas as animações respeitam prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Classes Base de Reveal (Progressive Enhancement via JS) ────────── */
.js-active .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-active .reveal.revealed,
.js-active .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes direcionais sutis */
.js-active .reveal-left {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-active .reveal-left.revealed,
.js-active .reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.js-active .reveal-right {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-active .reveal-right.revealed,
.js-active .reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.js-active .reveal-scale {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-active .reveal-scale.revealed,
.js-active .reveal-scale.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ─── 2. Hierarquia de Entrada dos Cabeçalhos das Seções ───────────────── */
.js-active .section-header .section-label,
.js-active .ia-text .section-label,
.js-active .infra-text .section-label,
.js-active .exp-text .section-label,
.js-active .missao-inner .section-label,
.js-active .cta-inner .section-label {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0ms,
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0ms;
}

.js-active .section-header .section-title,
.js-active .ia-text .ia-title,
.js-active .infra-text .infra-title,
.js-active .exp-text .exp-title,
.js-active .missao-inner .missao-quote,
.js-active .cta-inner .cta-title {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.50s cubic-bezier(0.16, 1, 0.3, 1) 60ms,
              transform 0.50s cubic-bezier(0.16, 1, 0.3, 1) 60ms;
}

.js-active .section-header .section-desc,
.js-active .ia-text .ia-desc,
.js-active .infra-text .infra-desc,
.js-active .exp-text .exp-desc,
.js-active .missao-inner .missao-desc,
.js-active .cta-inner .cta-desc {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1) 120ms,
              transform 0.52s cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}

/* Quando revelado */
.js-active .section-header.revealed .section-label,
.js-active .section-header.revealed .section-title,
.js-active .section-header.revealed .section-desc,
.js-active .section-header.is-visible .section-label,
.js-active .section-header.is-visible .section-title,
.js-active .section-header.is-visible .section-desc,
.js-active .ia-text.revealed .section-label,
.js-active .ia-text.revealed .ia-title,
.js-active .ia-text.revealed .ia-desc,
.js-active .infra-text.revealed .section-label,
.js-active .infra-text.revealed .infra-title,
.js-active .infra-text.revealed .infra-desc,
.js-active .exp-text.revealed .section-label,
.js-active .exp-text.revealed .exp-title,
.js-active .exp-text.revealed .exp-desc,
.js-active .missao-inner.revealed .section-label,
.js-active .missao-inner.revealed .missao-quote,
.js-active .missao-inner.revealed .missao-desc,
.js-active .cta-inner.revealed .section-label,
.js-active .cta-inner.revealed .cta-title,
.js-active .cta-inner.revealed .cta-desc {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 3. Delays Escalonados para Cards em Grades (Stagger) ─────────────────── */
.delay-1  { transition-delay: 0.06s; }
.delay-2  { transition-delay: 0.12s; }
.delay-3  { transition-delay: 0.18s; }
.delay-4  { transition-delay: 0.24s; }
.delay-5  { transition-delay: 0.30s; }
.delay-6  { transition-delay: 0.36s; }

/* ─── Itens da Seção Inteligência Artificial ──────────────────────────────── */
.js-active .ia-feature-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              background 180ms ease,
              border-color 180ms ease,
              box-shadow 180ms ease;
}

.js-active .ia-feature-item.revealed,
.js-active .ia-feature-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ia-feature-item:hover {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.22) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}

/* ─── 4. Seção Segurança: Animação Progressiva das Camadas ────────────────── */
.js-active .sec-layer {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease,
              box-shadow 0.22s ease;
}

.js-active .sec-layer.revealed,
.js-active .sec-layer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-active .sec-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.56s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.56s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease,
              box-shadow 0.22s ease;
}

.js-active .sec-card.revealed,
.js-active .sec-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 5. Seção Desenvolvimento: Destaque Automático nos Cards ─────────────── */
.dev-mini-card {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
              background 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dev-mini-card.is-spotlight {
  border-color: rgba(166, 226, 46, 0.45);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(166, 226, 46, 0.20);
  transform: translateY(-2px);
  background: #FFFFFF;
}

.dev-mini-card.is-spotlight svg {
  color: #1F3C00;
  transform: scale(1.03);
  transition: transform 220ms ease, color 220ms ease;
}

/* ─── 6. Seção Clientes: Reveal Progressivo dos Cards ─────────────────────── */
.js-active .client-card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 180ms ease,
              box-shadow 180ms ease;
}

.js-active .client-card.revealed,
.js-active .client-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 7. CTA Final: Microinteração no Hover ─────────────────────────────── */
.cta-btn-magnetic {
  transition: transform 220ms ease-out, box-shadow 220ms ease, background 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .cta-btn-magnetic:hover {
    box-shadow: 0 8px 24px rgba(166, 226, 46, 0.35);
  }
}

/* ─── 8. Microanimações Contextuais em Ícones no Hover ───────────────────── */
.card-icon svg,
.hosting-feature-icon svg,
.sec-layer-icon svg,
.ia-feature-icon svg,
.attend-feature-icon svg,
.dev-mini-card svg {
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), color 240ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover .card-icon svg,
  .hosting-feature-card:hover .hosting-feature-icon svg,
  .sec-layer:hover .sec-layer-icon svg,
  .ia-feature-item:hover .ia-feature-icon svg,
  .attend-feature:hover .attend-feature-icon svg {
    transform: scale(1.05);
  }

  .dev-mini-card:hover svg {
    transform: scale(1.05);
  }
}

/* ─── 9. Movimento de Background Quase Imperceptível no Hero ─────────────── */
@keyframes heroBgDrift1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(8px, 10px) scale(1.02); }
  100% { transform: translate(-6px, -4px) scale(0.99); }
}

@keyframes heroBgDrift2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-10px, -8px) scale(0.98); }
  100% { transform: translate(6px, 8px) scale(1.02); }
}

.hero-bg-circle-1 {
  animation: heroBgDrift1 26s ease-in-out infinite alternate;
}

.hero-bg-circle-2 {
  animation: heroBgDrift2 32s ease-in-out infinite alternate;
}

/* ─── Hero Animações ──────────────────────────────────────────────────────── */
@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-badge-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-badge { animation: hero-badge-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-title { animation: hero-fade-in 0.65s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-sub   { animation: hero-fade-in 0.65s 0.24s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero-ctas  { animation: hero-fade-in 0.65s 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ─── Flutuação suave (elemento orbital logo) ─────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.float-anim {
  animation: float 4s ease-in-out infinite;
}

/* ─── Indicadores e Painel Tecnológico ────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(166, 226, 46, 0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(166, 226, 46, 0); }
}

.pulse-anim { animation: pulse 2.5s ease-in-out infinite; }

@keyframes flowBeam {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  20%, 80% {
    opacity: 1;
  }
  100% {
    transform: translateX(180%);
    opacity: 0;
  }
}

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

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .section-label,
  .section-title,
  .section-desc,
  .sec-layer,
  .sec-card,
  .client-card,
  .cta-btn-magnetic {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-badge,
  .hero-title,
  .hero-sub,
  .hero-ctas,
  .hero-tech-panel {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-bg-circle-1,
  .hero-bg-circle-2,
  .hero-bg-circle-3 {
    animation: none !important;
    transform: none !important;
  }

  .float-anim { animation: none !important; }
  .pulse-anim { animation: none !important; }
  .status-dot { animation: none !important; }
  .tech-live-dot { animation: none !important; }
  .tech-flow-pulse { animation: none !important; }

  .scroll-progress { transition: none !important; }
  .site-header { transition: none !important; }
  .ia-visual-item-bar { transition: none !important; }

  .card,
  .card-dark,
  .dev-mini-card,
  .hosting-feature-card,
  .infra-card,
  .sec-layer,
  .attend-feature,
  .client-card,
  .card-icon svg,
  .hosting-feature-icon svg,
  .sec-layer-icon svg,
  .ia-feature-icon svg,
  .attend-feature-icon svg {
    transform: none !important;
  }

  .dev-mini-card.is-spotlight {
    transform: none !important;
    box-shadow: none !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
  }
}