/* ================================================================
   DIGITALFY — PARALLAX & PANEL ANIMATIONS
   Controla camadas de profundidade e transições entre seções.
   ================================================================ */

/* ── Parallax layers ─────────────────────────────────────────── */
.parallax-bg,
.parallax-el {
  will-change: transform;
  /* transform é aplicado via JavaScript em horizontal-scroll.js */
}

/* ── Panel enter/exit opacity ────────────────────────────────── */
/*
  Quando o painel não é ativo (.is-active), o conteúdo fica
  suavemente desfocado. O JS adiciona/remove .is-active.
  Painel-0 (hero) começa visível para evitar flash ao carregar.
*/
.p-inner {
  opacity: 0;
  transition: opacity 0.55s ease;
}
.panel.is-active .p-inner {
  opacity: 1;
}
/* Hero sempre visível — evita tela em branco antes do JS iniciar */
#panel-0 .p-inner { opacity: 1; }

/* ── Staggered text reveal dentro de painel ativo ────────────── */
.panel.is-active .section-tag    { transition-delay: 0.05s; }
.panel.is-active .section-title  { transition-delay: 0.12s; }
.panel.is-active .section-desc   { transition-delay: 0.18s; }
.panel.is-active .badge          { transition-delay: 0.05s; }
.panel.is-active .hero-title     { transition-delay: 0.08s; }
.panel.is-active .hero-desc      { transition-delay: 0.15s; }
.panel.is-active .hero-btns      { transition-delay: 0.22s; }
.panel.is-active .about-stats    { transition-delay: 0.28s; }
.panel.is-active .services-hd   { transition-delay: 0.05s; }
.panel.is-active .services-grid  { transition-delay: 0.14s; }
.panel.is-active .diff-list      { transition-delay: 0.2s; }
.panel.is-active .results-grid   { transition-delay: 0.14s; }
.panel.is-active .testimonial    { transition-delay: 0.3s; }
.panel.is-active .contact-form   { transition-delay: 0.12s; }
.panel.is-active .contact-info   { transition-delay: 0.22s; }

/* ── Glow depth effect (suave pulsing) ───────────────────────── */
.g1 { animation: glow-drift1 12s ease-in-out infinite; }
.g2 { animation: glow-drift2 15s ease-in-out infinite; }
.g3 { animation: glow-drift1 18s ease-in-out infinite reverse; }
.g4 { animation: glow-drift2 14s ease-in-out infinite; }
.g5 { animation: glow-drift1 16s ease-in-out infinite 2s; }
.g6 { animation: glow-drift2 13s ease-in-out infinite reverse; }
.g7 { animation: glow-drift1 20s ease-in-out infinite; }
.g8 { animation: glow-drift2 11s ease-in-out infinite; }

@keyframes glow-drift1 {
  0%,100% { transform: translate(0, 0)   scale(1); }
  33%      { transform: translate(30px,-20px) scale(1.06); }
  66%      { transform: translate(-20px, 15px) scale(0.95); }
}
@keyframes glow-drift2 {
  0%,100% { transform: translate(0, 0)    scale(1); }
  40%      { transform: translate(-25px, 20px) scale(1.05); }
  70%      { transform: translate(20px, -10px) scale(0.97); }
}

/* ── Initial panel (hero) — always visible ───────────────────── */
#panel-0 .p-inner {
  opacity: 1;
  transition: none;
}