/* =========================================================
   AGORA MENTORA — Camada de Interatividade
   Cursor · Scroll Progress · Magnetic · Tilt · Spotlight · Reveals
   ========================================================= */

/* ---------- Cursor customizado ---------- */
.am-cursor-dot,
.am-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: opacity .25s ease, transform .18s cubic-bezier(.2,.8,.2,1),
              width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1),
              background .25s ease, border-color .25s ease;
  will-change: transform;
}
.am-cursor-dot {
  width: 6px; height: 6px;
  background: #f5e7c8;
  transform: translate(-50%, -50%);
}
.am-cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(245, 231, 200, 0.6);
  background: transparent;
  transform: translate(-50%, -50%);
}
.am-cursor-ring.hover {
  width: 64px; height: 64px;
  border-color: rgba(245, 231, 200, 0.95);
  background: rgba(212, 175, 55, 0.08);
}
.am-cursor-ring.click {
  transform: translate(-50%, -50%) scale(0.7);
}
.am-cursor-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f5e7c8;
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
}
.am-cursor-ring.hover .am-cursor-label { opacity: 1; }

@media (hover: none), (pointer: coarse) {
  .am-cursor-dot, .am-cursor-ring { display: none; }
}

/* ---------- Scroll Progress Bar ---------- */
.am-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold-light) 50%, var(--gold) 100%);
  z-index: 9998;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
  transition: width .08s linear;
}

/* ---------- Cursor Spotlight (hero) ---------- */
.hero {
  position: relative;
  isolation: isolate;
}
.am-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(212, 175, 55, 0.10) 0%,
    rgba(212, 175, 55, 0.04) 30%,
    transparent 60%
  );
  z-index: 1;
  opacity: 0;
  transition: opacity .35s ease;
}
.hero:hover .am-spotlight { opacity: 1; }

/* ---------- Magnetic Buttons ---------- */
.btn {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  will-change: transform;
}
.btn .btn-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    180px circle at var(--bx, 50%) var(--by, 50%),
    rgba(245, 231, 200, 0.25) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.btn:hover .btn-bg { opacity: 1; }

/* ---------- 3D Tilt Cards ---------- */
.am-tilt {
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
  will-change: transform;
}
.am-tilt-inner {
  transform: translateZ(20px);
}

/* ---------- Word-by-word reveal ---------- */
.am-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em) rotate(2deg);
  filter: blur(4px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1),
              transform .9s cubic-bezier(.2,.8,.2,1),
              filter .9s ease;
  transition-delay: calc(var(--i, 0) * 60ms);
}
.am-words.in .word {
  opacity: 1;
  transform: translateY(0) rotate(0);
  filter: blur(0);
}
.am-words .word .space { display: inline-block; width: 0.3em; }

/* ---------- Numbers count-up on hover (pricing) ---------- */
.price { position: relative; cursor: default; }
.price::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -8px;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 1px;
  background: var(--gold);
  transform-origin: center;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.first-lot:hover .price::after { transform: translateX(-50%) scaleX(1); }

/* ---------- VSL frame — magnetic play + glow ---------- */
.vsl-frame {
  position: relative;
  isolation: isolate;
  transition: box-shadow .5s ease;
}
.vsl-frame:hover {
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 0 80px -10px rgba(212,175,55,0.45),
    0 0 0 1px rgba(212,175,55,0.4);
}
.vsl-play {
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
.vsl-frame:hover .vsl-play {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 0 0 12px rgba(212, 175, 55, 0.1),
              0 0 50px rgba(212, 175, 55, 0.3);
}

/* ---------- Result cards — tilt on hover (cards in carousel) ---------- */
.r-card {
  transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s;
  transform-style: preserve-3d;
  cursor: pointer;
}
.results-track:hover .r-card { filter: brightness(0.78) saturate(0.85); }
.results-track:hover .r-card:hover {
  filter: brightness(1.08) saturate(1.1);
  transform: translateY(-8px) scale(1.04);
  z-index: 2;
}

/* ---------- For-you cards — sweep + magnetic ---------- */
.for-you-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.for-you-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(212, 175, 55, 0.08) 0%,
    rgba(91, 14, 22, 0.04) 50%,
    rgba(212, 175, 55, 0.08) 100%);
  opacity: 0;
  transition: opacity .5s;
  z-index: -1;
}
.for-you-card::after {
  content: '';
  position: absolute;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  width: 1px; height: 1px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.35) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  z-index: -1;
}
.for-you-card:hover::before { opacity: 1; }
.for-you-card:hover::after { transform: translate(-50%, -50%) scale(300); }
.for-you-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -20px rgba(91, 14, 22, 0.18);
}
.for-you-card .index {
  transition: transform .4s cubic-bezier(.2,.8,.2,1), color .3s;
}
.for-you-card:hover .index {
  transform: scale(1.15) translateX(4px);
  color: var(--gold-deep);
}

/* ---------- Lesson modules — gold draw line on hover ---------- */
.lesson {
  position: relative;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), background .4s;
  overflow: hidden;
}
.lesson::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 100%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.lesson::after {
  content: '';
  position: absolute;
  right: 32px; top: 50%;
  width: 24px; height: 1px;
  background: var(--gold);
  transform: translateY(-50%) scaleX(0);
  transform-origin: right;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.lesson:hover::before { transform: scaleY(1); }
.lesson:hover::after { transform: translateY(-50%) scaleX(1); }
.lesson:hover {
  transform: translateX(8px);
  background: rgba(212, 175, 55, 0.04);
}
.lesson-num {
  transition: color .35s, letter-spacing .35s;
}
.lesson:hover .lesson-num {
  color: var(--gold-light);
  letter-spacing: 0.12em;
}

/* ---------- Event card — date parallax ---------- */
.event-card {
  perspective: 1200px;
  cursor: default;
}
.event-date {
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
  will-change: transform;
}
.event-card:hover .event-date {
  transform: translateZ(30px);
}

/* ---------- Pricing — animated number ---------- */
.first-lot {
  position: relative;
  overflow: hidden;
}
.first-lot::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.06) 50%,
    transparent 100%);
  transition: left 1.4s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.first-lot:hover::before { left: 100%; }

/* ---------- Recap list — link underline trick ---------- */
.recap-list li {
  position: relative;
  transition: padding-left .4s cubic-bezier(.2,.8,.2,1), color .3s;
  cursor: default;
}
.recap-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 0;
  height: 1px;
  background: var(--gold);
  transform: translateY(-50%);
  transition: width .4s cubic-bezier(.2,.8,.2,1);
}
.recap-list li:hover {
  padding-left: 32px;
  color: var(--gold-light);
}
.recap-list li:hover::before { width: 24px; }

/* ---------- Mentor portraits — clip-path reveal + tilt ---------- */
.mentor-portrait {
  position: relative;
  overflow: hidden;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}
.mentor-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(212, 175, 55, 0.18) 0%,
    transparent 30%,
    transparent 70%,
    rgba(91, 14, 22, 0.25) 100%);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.mentor:hover .mentor-portrait::after { opacity: 1; }
.mentor .seal {
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.mentor:hover .seal {
  transform: scale(1.08) rotate(-5deg);
}

/* ---------- FAQ — chevron rotate + hover line ---------- */
.faq-item {
  position: relative;
}
.faq-item::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.faq-item:hover::before { width: 100%; }
.faq-q {
  transition: padding-left .35s cubic-bezier(.2,.8,.2,1);
}
.faq-item:hover .faq-q { padding-left: 12px; }
.faq-q .icon {
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.faq-item.open .faq-q .icon { transform: rotate(45deg); }

/* ---------- Stats — hover lift + glow ---------- */
.stat {
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  cursor: default;
}
.stat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.stat:hover { transform: translateY(-6px); }
.stat:hover::after { opacity: 1; }
.stat:hover .stat-icon {
  animation: am-stat-pulse 1.2s ease-in-out infinite;
}
@keyframes am-stat-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* ---------- Warning bar — shimmer ---------- */
.warning-bar {
  position: relative;
  overflow: hidden;
}
.warning-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245, 231, 200, 0.18) 50%,
    transparent 100%);
  animation: am-shimmer 6s ease-in-out infinite;
}
@keyframes am-shimmer {
  0%, 100% { left: -40%; }
  50% { left: 110%; }
}

/* ---------- Final CTA — magnetic + glow ---------- */
.final-cta .btn {
  position: relative;
  overflow: visible;
}
.final-cta .btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    var(--gold-deep),
    var(--gold-light),
    var(--gold-deep));
  background-size: 200% 200%;
  z-index: -1;
  opacity: 0;
  filter: blur(16px);
  transition: opacity .5s;
  animation: am-glow-shift 4s ease-in-out infinite;
}
.final-cta .btn:hover::before { opacity: 0.7; }
@keyframes am-glow-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- Brand stamp / logo — hover spin ---------- */
.brand-stamp .a-mark {
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.brand-stamp:hover .a-mark {
  transform: rotate(360deg);
}

/* ---------- Marquee — pause on hover already handled ---------- */
/* Boost on scroll: speed up when scrolling */
.am-marquee.scrolling .am-marquee-track {
  animation-duration: 18s;
}
.am-marquee.scrolling .am-marquee-track--reverse {
  animation-duration: 20s;
}

/* ---------- Section title hover — underline draw ---------- */
.section-title em {
  position: relative;
  cursor: default;
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .am-cursor-dot, .am-cursor-ring, .am-scroll-progress,
  .am-spotlight, .am-words .word {
    animation: none !important;
    transition: none !important;
  }
  .am-words .word {
    opacity: 1; transform: none; filter: none;
  }
}