/* ──────────────────────────────────────────────────────────────────────
   Animations — showcase choreography + scroll reveals.
   Honors prefers-reduced-motion: reduce → all autoplay disabled.
   ────────────────────────────────────────────────────────────────────── */

/* ── Scroll reveal (.is-visible applied via IntersectionObserver) ───── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Showcase: act stage transitions ────────────────────────────────── */
.showcase-act {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.showcase-act.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

/* ── Wireframe shared helpers ───────────────────────────────────────── */
.wf-phone {
  background: var(--mock-phone-bg);
  border-radius: 40px;
  border: 2px solid var(--border-card);
  box-shadow: 0 40px 80px rgba(0,0,0,0.4), 0 0 0 1px var(--mock-divider);
  position: relative;
  overflow: hidden;
}
.wf-screen-clip {
  overflow: hidden;
  position: relative;
}

/* ══════════════════════════════════════════════════════════════════════
   ACT 1 — Desafio Diário
   Cycle: 12s
   0-2s   : idle (greeting visible, streak at 12)
   3-4s   : "Resolver" button highlight glow
   4-5s   : streak pill flashes 12→13
   5-7s   : +10 XP float rises from daily card
   7-12s  : idle loop back
   ══════════════════════════════════════════════════════════════════════ */
@keyframes act1-resolver-glow {
  0%, 22%  { box-shadow: none; transform: scale(1); }
  27%      { box-shadow: 0 0 0 3px rgba(37,99,235,0.5), 0 0 16px rgba(37,99,235,0.4); transform: scale(1.03); }
  33%      { box-shadow: none; transform: scale(1); }
  100%     { box-shadow: none; transform: scale(1); }
}
@keyframes act1-streak-flash {
  0%, 31%  { opacity: 1; }
  35%      { opacity: 0; }
  37%      { opacity: 1; }
  40%      { opacity: 0; }
  42%      { opacity: 1; }
  100%     { opacity: 1; }
}
@keyframes act1-streak-13 {
  0%, 32%  { opacity: 0; }
  37%      { opacity: 1; }
  100%     { opacity: 1; }
}
@keyframes act1-streak-12 {
  0%, 32%  { opacity: 1; }
  37%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes act1-xp-float {
  0%, 38%  { opacity: 0; transform: translateY(0) scale(0.8); }
  43%      { opacity: 1; transform: translateY(-8px) scale(1.1); }
  65%      { opacity: 1; transform: translateY(-28px) scale(1); }
  75%      { opacity: 0; transform: translateY(-44px) scale(0.9); }
  100%     { opacity: 0; }
}
@keyframes act1-xp-bar-grow {
  0%, 38%  { width: 38%; }
  70%      { width: 46%; }
  100%     { width: 46%; }
}

/* ══════════════════════════════════════════════════════════════════════
   ACT 2 — Praticar Livre (Free Practice / Study Sessions)
   Cycle: 13s
   0-2s   : list of question sets visible
   2-4s   : one card slides into focus (scale up)
   4-6s   : transition to question view (list slides out left)
   6-8s   : pre-answer options visible
   8-9s   : tap on option D (blue flash)
   9-11s  : reveal correct answer (green)
   11-13s : "Próxima questão" footer visible, idle
   ══════════════════════════════════════════════════════════════════════ */
@keyframes act2-list-slide-out {
  0%, 28%  { opacity: 1; transform: translateX(0); }
  38%      { opacity: 0; transform: translateX(-32px); }
  100%     { opacity: 0; transform: translateX(-32px); }
}
@keyframes act2-question-slide-in {
  0%, 30%  { opacity: 0; transform: translateX(32px); }
  40%      { opacity: 1; transform: translateX(0); }
  100%     { opacity: 1; transform: translateX(0); }
}
@keyframes act2-pre-opts {
  0%, 40%  { opacity: 1; }
  48%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes act2-opt-click {
  0%, 46%  { opacity: 0; }
  49%      { opacity: 1; }
  53%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes act2-post-opts {
  0%, 53%  { opacity: 0; }
  58%      { opacity: 1; }
  100%     { opacity: 1; }
}
@keyframes act2-correct-glow {
  0%, 57%  { transform: scale(1); box-shadow: none; }
  62%      { transform: scale(1.025); box-shadow: 0 0 0 4px rgba(34,197,94,0.28); }
  68%      { transform: scale(1); box-shadow: none; }
  100%     { transform: scale(1); box-shadow: none; }
}
@keyframes act2-next-btn {
  0%, 55%  { opacity: 0; }
  62%      { opacity: 1; }
  100%     { opacity: 1; }
}
/* phone version scrolls to reveal question */
@keyframes act2-phone-scroll {
  0%, 28%  { transform: translateY(0); }
  36%      { transform: translateY(-80px); }
  100%     { transform: translateY(-80px); }
}

/* ══════════════════════════════════════════════════════════════════════
   ACT 3 — Praticar Premium (timer, AI panel, flashcard save)
   Cycle: 12s
   0-1s   : question card appears, timer bar full
   1-6s   : timer bar drains (100%→0%)
   6-7s   : tap on option (blue flash)
   7-9s   : AI explanation panel slides up from bottom
   9-10s  : "Salvar como flashcard" button glows + tapped
   10-11s : toast "✓ Flashcard salvo" appears
   11-12s : fade out, restart
   ══════════════════════════════════════════════════════════════════════ */
@keyframes act3-timer-drain {
  0%       { width: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); }
  8%       { width: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); }
  50%      { width: 40%; background: linear-gradient(90deg, #f59e0b, #d97706); }
  55%      { width: 28%; background: linear-gradient(90deg, #ef4444, #dc2626); }
  100%     { width: 0%; background: linear-gradient(90deg, #ef4444, #dc2626); }
}
@keyframes act3-pre-opts {
  0%, 46%  { opacity: 1; }
  54%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes act3-opt-click {
  0%, 50%  { opacity: 0; }
  54%      { opacity: 1; }
  58%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes act3-post-opts {
  0%, 57%  { opacity: 0; }
  63%      { opacity: 1; }
  100%     { opacity: 1; }
}
@keyframes act3-ai-panel {
  0%, 54%  { opacity: 0; transform: translateY(24px); }
  64%      { opacity: 1; transform: translateY(0); }
  90%      { opacity: 1; transform: translateY(0); }
  97%, 100%{ opacity: 0; transform: translateY(8px); }
}
@keyframes act3-fc-btn-glow {
  0%, 74%  { box-shadow: none; transform: scale(1); }
  80%      { box-shadow: 0 0 0 4px rgba(37,99,235,0.4), 0 0 20px rgba(37,99,235,0.3); transform: scale(1.04); }
  85%      { box-shadow: none; transform: scale(0.97); }
  87%      { transform: scale(1); }
  100%     { transform: scale(1); }
}
@keyframes act3-toast {
  0%, 84%  { opacity: 0; transform: translateY(6px); }
  88%      { opacity: 1; transform: translateY(0); }
  96%      { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   ACT 4 — Flashcards (3D flip + difficulty rating)
   Cycle: 10s
   0-2s   : front of card visible (question)
   2-4s   : 3D flip to reveal answer (rotateY 0→180)
   4-6s   : answer visible, difficulty buttons appear
   6-7s   : "Bom" button tapped (scale + glow)
   7-9s   : next card slides in from the right
   9-10s  : idle, reset
   ══════════════════════════════════════════════════════════════════════ */
@keyframes act4-card-flip {
  0%, 18%  { transform: perspective(600px) rotateY(0deg); }
  38%      { transform: perspective(600px) rotateY(-90deg); }
  44%      { transform: perspective(600px) rotateY(-180deg); }
  88%      { transform: perspective(600px) rotateY(-180deg); }
  96%, 100%{ transform: perspective(600px) rotateY(0deg); }
}
@keyframes act4-front-visible {
  0%, 20%  { opacity: 1; }
  36%      { opacity: 0; }
  88%      { opacity: 0; }
  96%, 100%{ opacity: 1; }
}
@keyframes act4-back-visible {
  0%, 34%  { opacity: 0; }
  44%      { opacity: 1; }
  88%      { opacity: 1; }
  96%, 100%{ opacity: 0; }
}
@keyframes act4-difficulty-btns {
  0%, 42%  { opacity: 0; transform: translateY(8px); }
  52%      { opacity: 1; transform: translateY(0); }
  88%      { opacity: 1; transform: translateY(0); }
  96%, 100%{ opacity: 0; }
}
@keyframes act4-bom-tap {
  0%, 58%  { transform: scale(1); box-shadow: none; }
  64%      { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(37,99,235,0.5); }
  68%      { transform: scale(0.96); box-shadow: none; }
  72%      { transform: scale(1); }
  100%     { transform: scale(1); }
}
@keyframes act4-next-card-slide {
  0%, 65%  { transform: translateX(0); opacity: 1; }
  72%      { transform: translateX(-32px); opacity: 0; }
  78%      { transform: translateX(32px); opacity: 0; }
  85%      { transform: translateX(0); opacity: 1; }
  100%     { transform: translateX(0); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   ACT 5 — Clube → Ranking ao vivo
   Cycle: 10s
   0-2s   : turma summary card visible
   2-3s   : click animation (scale) on card
   3-5s   : transition to ranking list (card slides out, list slides in)
   5-7s   : "+10 pts" floats up from a lower row
   7-9s   : row slides up 2 positions, rank counter ticks #247→#245
   9-10s  : idle
   ══════════════════════════════════════════════════════════════════════ */
@keyframes act5-summary-out {
  0%, 18%  { opacity: 1; transform: translateX(0) scale(1); }
  22%      { opacity: 1; transform: scale(0.97); }
  32%      { opacity: 0; transform: translateX(-24px) scale(0.95); }
  100%     { opacity: 0; }
}
@keyframes act5-ranking-in {
  0%, 28%  { opacity: 0; transform: translateY(12px); }
  38%      { opacity: 1; transform: translateY(0); }
  100%     { opacity: 1; }
}
@keyframes act5-pts-float {
  0%, 44%  { opacity: 0; transform: translateY(0) scale(0.8); }
  50%      { opacity: 1; transform: translateY(-6px) scale(1.1); }
  68%      { opacity: 1; transform: translateY(-24px) scale(1); }
  76%      { opacity: 0; transform: translateY(-38px) scale(0.9); }
  100%     { opacity: 0; }
}
@keyframes act5-row-rise {
  0%, 47%  { transform: translateY(0); }
  62%      { transform: translateY(-36px); }
  100%     { transform: translateY(-36px); }
}
@keyframes act5-rank-247 {
  0%, 63%  { opacity: 1; }
  67%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes act5-rank-245 {
  0%, 65%  { opacity: 0; }
  70%      { opacity: 1; }
  100%     { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   ACT 6 — Stats + gráficos
   Cycle: 14s
   0-3s   : KPI tiles visible, counters tick up
   3-6s   : auto-scroll down to bar chart; bars fill left-to-right
   6-10s  : scroll down to radar chart; spokes draw outward
   10-12s : idle at radar
   12-14s : scroll back to top
   ══════════════════════════════════════════════════════════════════════ */
@keyframes act6-scroll {
  0%, 7%   { transform: translateY(0); }
  20%, 40% { transform: translateY(-140px); }
  54%, 78% { transform: translateY(-280px); }
  90%, 100%{ transform: translateY(0); }
}
/* KPI counter tick */
@keyframes act6-kpi-zero {
  0%, 4%   { opacity: 1; }
  7%       { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes act6-kpi-val {
  0%, 5%   { opacity: 0; }
  8%       { opacity: 1; }
  100%     { opacity: 1; }
}
/* Bar chart fills */
@keyframes act6-bar1 {
  0%, 18%  { height: 0%; }
  30%      { height: 55%; }
  100%     { height: 55%; }
}
@keyframes act6-bar2 {
  0%, 21%  { height: 0%; }
  34%      { height: 72%; }
  100%     { height: 72%; }
}
@keyframes act6-bar3 {
  0%, 24%  { height: 0%; }
  37%      { height: 45%; }
  100%     { height: 45%; }
}
@keyframes act6-bar4 {
  0%, 27%  { height: 0%; }
  40%      { height: 85%; }
  100%     { height: 85%; }
}
@keyframes act6-bar5 {
  0%, 30%  { height: 0%; }
  43%      { height: 60%; }
  100%     { height: 60%; }
}
/* Radar SVG spokes draw (stroke-dashoffset → 0) */
@keyframes act6-spoke {
  0%, 52%  { stroke-dashoffset: 80; opacity: 0; }
  58%      { opacity: 1; }
  68%      { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 0; }
}
@keyframes act6-radar-area {
  0%, 54%  { opacity: 0; }
  64%      { opacity: 1; }
  100%     { opacity: 1; }
}

/* phone variants (compact) */
@keyframes act6-phone-scroll {
  0%, 7%   { transform: translateY(0); }
  20%, 40% { transform: translateY(-100px); }
  55%, 75% { transform: translateY(-200px); }
  88%, 100%{ transform: translateY(0); }
}

/* ── Reduced motion override ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .showcase-act { transition: none; }
  *[style*="animation"] { animation: none !important; }
  /* Freeze all act keyframes at their "settled" state */
  [class*="act1-"],
  [class*="act2-"],
  [class*="act3-"],
  [class*="act4-"],
  [class*="act5-"],
  [class*="act6-"] { animation: none !important; }
}