/* ============================================================
   course.css — shell visual do deck do curso
   Extraído VERBATIM do bloco <style> de design-system.html.
   Não alterar valores: é a fonte da verdade visual do protótipo.
   ============================================================ */

:root{ --grad-signature:linear-gradient(90deg,#7b2ff7 0%,#e5177b 50%,#ff6a3d 100%); }
html,body{ height:100%; }
body{ background:#f7f7f5; color:#1d1d1f; overflow:hidden; }

/* textura de papel sutil */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* grifo marca-texto */
.hl{ background:linear-gradient(104deg,transparent .5%,rgba(255,207,51,.5) .5%,rgba(255,207,51,.5) 99%,transparent 99%); padding:0 .15em; border-radius:2px; }

/* traço "desenhado" */
.draw path,.draw line,.draw circle,.draw polygon,.draw rect{ stroke-dasharray:1600; stroke-dashoffset:1600; animation:draw 1.4s ease forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.count-up{ font-variant-numeric:tabular-nums; }

/* mensageiro visível */
#gateMsg.show{ opacity:1 !important; transform:translateX(0) translateY(0) !important; }
/* botão avançar travado por atividade */
#nextBtn.is-locked{ background:#fff; color:#9a9aa0; border:1px solid #d8d8d4; cursor:not-allowed; }
#nextBtn.is-locked:hover{ background:#fff; }

/* seta "role para baixo" pulsando */
#scrollCue{ transition:opacity .3s ease; }
#scrollCueArrow{ animation:cueBob 1.4s ease-in-out infinite; }
@keyframes cueBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(4px) } }
@media (prefers-reduced-motion: reduce){ #scrollCueArrow{ animation:none; } }

.tap{ transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease; }
.tap:hover{ transform:translateY(-2px); }
:focus-visible{ outline:3px solid #7b2ff7; outline-offset:3px; border-radius:6px; }

/* ---------- SLIDE DECK ---------- */
.deck{ position:fixed; inset:0; z-index:1; }
.slide{
  position:absolute; inset:0; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
  overflow-y:auto;
}
.slide.active{ opacity:1; visibility:visible; transform:none; transition:opacity .45s ease, transform .45s ease; }

/* fundos de slide — variação com parcimônia (ver 00-design-system.md §2.1) */
.slide{ background:#f7f7f5; transition:opacity .45s ease, transform .45s ease, background-color .45s ease, visibility 0s linear .45s; }
.slide--cool{ background:#f1f2f4; }
.slide--warm{ background:#f6f1ea; }
.slide--tint-purple{ background:#f1ecfd; }  /* wash de purple ~6% */
.slide--tint-yellow{ background:#fdf6dd; }  /* wash de yellow ~10% */
.slide--ink{ background:#1d1d1f; color:#f7f7f5; }
.slide--ink .text-ink{ color:#f7f7f5 !important; }
.slide--ink .text-ink-soft{ color:#c9c9ce !important; }
.slide--ink .text-ink-faint{ color:#8a8a90 !important; }
.slide--ink .hl{ background:linear-gradient(104deg,transparent .5%,rgba(255,207,51,.28) .5%,rgba(255,207,51,.28) 99%,transparent 99%); }
.slide-inner{
  max-width:980px; width:100%;
  /* margin:auto centra quando cabe; não recorta o topo quando transborda (block+inline) */
  margin-block:auto; margin-inline:auto; flex:0 0 auto;
  padding:clamp(28px,6vh,72px) clamp(24px,5vw,64px);
}
/* folga inferior só quando o slide transborda — reserva espaço p/ a navegação
   sem inflar a altura de slides curtos (que não devem rolar) */
.slide::after{ content:""; display:block; flex:0 0 auto; height:0; }
.slide.is-scrollable::after{ height:96px; }
.lucide{ width:1em; height:1em; stroke-width:1.75; }
@media (prefers-reduced-motion: reduce){
  .draw path,.draw line,.draw circle,.draw polygon,.draw rect{ animation:none; stroke-dashoffset:0; }
  .slide{ transition:opacity .2s ease; transform:none; }
  .tap{ transition:none; }
}