/* =========================================================
   AICLAX — Anime.js Support CSS v1.0
   Skill: animejs-animation
   Suporte visual para as animações do anime-engine.js
   ========================================================= */

/* ─── WILL-CHANGE performance hints ──────────────────────── */
.hero-word,
.char-unit,
.sol-card,
.card,
.testimonial-card,
.blog-card,
.badge,
.eyebrow,
.contact-info-item,
.footer-grid > div,
.section-header {
  will-change: transform, opacity;
}

/* Remove will-change após animação completa (via JS data attr) */
[data-card-animated="true"] .sol-card,
[data-card-animated="true"] .card,
[data-feature-done="true"],
[data-curtain-done="true"] .section-header {
  will-change: auto;
}

/* ─── HERO WORD SPLIT — ESTADO BASE ──────────────────────── */
.hero-word {
  display: inline-block;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* ─── CHAR UNIT — ESTADO BASE ────────────────────────────── */
.char-unit {
  display: inline-block;
  backface-visibility: hidden;
}

/* ─── MAGNETIC BUTTON — CONTÊINER ────────────────────────── */
.btn-primary,
.btn-accent,
.nav-cta,
.hero-cta-neon {
  transform-origin: center center;
  backface-visibility: hidden;
}

/* ─── SECTION CURTAIN — ESTADO INICIAL ───────────────────── */
.section-header {
  overflow: hidden;
  /* clipPath inicial é controlado pelo JS (anime-engine.js) */
}

/* ─── FAQ ANSWER — OVERFLOW CONTROLADO PELO ANIME.JS ──────── */
.faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 var(--sp-5);
  will-change: max-height, opacity;
}

/* Ativa padding apenas quando o item está ativo */
.faq-item.active .faq-answer {
  padding-bottom: var(--sp-5);
}

/* ─── NAV UNDERLINE (Anime.js version) ───────────────────── */
/* Desativa o underline do spells.css para o anime.js assumir */
.nav-links > a::after {
  display: none !important;
}

/* ─── FEATURE ITEMS — ESTADO BASE ────────────────────────── */
.contact-info-item {
  will-change: transform, opacity;
}

/* ─── FOOTER COLS — ESTADO BASE ─────────────────────────── */
.footer-grid > div {
  will-change: transform, opacity;
}

/* ─── BADGE / EYEBROW — ESTADO BASE ──────────────────────── */
.badge,
.eyebrow {
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* ─── CARD STAGGER — ESTADO BASE ─────────────────────────── */
/* O anime-engine.js define o estado inicial via JS
   Este CSS previne flash de conteúdo não animado (FOUC) */
.sol-card:not([data-tilt-added]),
.card:not([data-feature-done]),
.testimonial-card:not([data-feature-done]) {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ─── ORBIT PARTICLE SVG ─────────────────────────────────── */
.hero-cta-neon svg.orbit-svg,
.btn-accent svg.orbit-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ─── PARALLAX LAYERS ────────────────────────────────────── */
.hero-bg-gradient,
.hero-visual img,
.section-bg-shape {
  will-change: transform;
  backface-visibility: hidden;
}

/* ─── REDUCED MOTION — ANIME.JS ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-word { opacity: 1 !important; transform: none !important; }
  .char-unit { opacity: 1 !important; transform: none !important; }
  .faq-answer { max-height: none !important; opacity: 1 !important; }
  .section-header { clip-path: none !important; }
  .will-change: auto;
}