/* ============================================================
   Drywet Academy — Camada de movimento (compartilhada)
   Scroll reveal + luz do cursor + spotlight + botões dinâmicos.
   Pareado com motion.js. Reaproveitável em todas as páginas.
   ============================================================ */

/* —— Scroll reveal (ativado por motion.js via html.mtn) —— */
@media (prefers-reduced-motion: no-preference) {
  html.mtn .mtn-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),
                transform 0.8s cubic-bezier(0.22,1,0.36,1);
    transition-delay: var(--mtn-delay, 0s);
    will-change: opacity, transform;
  }
  html.mtn .mtn-reveal.mtn-left  { transform: translateX(-34px); }
  html.mtn .mtn-reveal.mtn-right { transform: translateX(34px); }
  html.mtn .mtn-reveal.mtn-scale { transform: translateY(26px) scale(0.965); }
  html.mtn .mtn-reveal.mtn-in    { opacity: 1; transform: none; }
}

/* —— Fundo (canvas) + luz do cursor —— */
#bg-fx-canvas, .cursor-light { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.cursor-light {
  background: radial-gradient(circle 460px at var(--mx, 50%) var(--my, 28%),
              rgba(91,61,245,0.14), rgba(91,61,245,0) 66%);
  opacity: 0; transition: opacity 0.45s ease;
}
.cursor-light.on { opacity: 1; }

/* —— Spotlight interativo nos painéis escuros —— */
.path-card, .studio-card, .cta-banner, .final-banner { --ex: 50%; --ey: 50%; }
.cta-banner, .final-banner { position: relative; overflow: hidden; }
.path-card .path-top::after,
.studio-card::after,
.cta-banner::after,
.final-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(circle 280px at var(--ex) var(--ey),
              rgba(255,255,255,0.20), rgba(255,255,255,0) 62%);
  opacity: 0; transition: opacity 0.4s ease; mix-blend-mode: soft-light;
}
@media (hover: hover) {
  .path-card:hover .path-top::after,
  .studio-card:hover::after,
  .cta-banner:hover::after,
  .final-banner:hover::after { opacity: 1; }
}

/* —— Botões mais dinâmicos (crescem no hover) —— */
.btn-primary, .btn-dark, .nav-cta, .btn-wa {
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.btn-primary:hover, .btn-dark:hover, .nav-cta:hover, .btn-wa:hover {
  opacity: 0.92; transform: scale(1.06);
}
.btn-ghost { transition: color 0.2s, transform 0.25s cubic-bezier(0.22,1,0.36,1); }
.btn-ghost:hover { transform: translateX(3px); }