/* =====================================================================
   HOME — CSS específico das seções.
   Cada seção tem temperatura própria (mapa de tensão da DIRECAO_ARTE).
   Keyframes extraídos fiéis do protótipo validado.
   ===================================================================== */

/* Empilhamento das seções (cada uma ocupa a tela) */
.home-section { position: relative; }

/* --- keyframes (mesma matéria do protótipo) --- */
@keyframes ab-fall { 0% { transform: translateY(-110%); } 60%,100% { transform: translateY(260%); } }
@keyframes pr-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(221,57,21,.16), 0 0 16px 1px rgba(221,57,21,.42); } 50% { box-shadow: 0 0 0 5px rgba(221,57,21,.08), 0 0 22px 3px rgba(221,57,21,.6); } }
@keyframes pr-conv { 0%,100% { box-shadow: 0 0 0 4px rgba(221,57,21,.12), 0 0 22px 2px rgba(221,57,21,.34); } 50% { box-shadow: 0 0 0 6px rgba(221,57,21,.07), 0 0 32px 5px rgba(221,57,21,.5); } }
@keyframes cl-ring { 0%,100% { box-shadow: 0 0 0 1.5px rgba(255,255,255,.22), 0 18px 50px -12px rgba(0,0,0,.6); } 50% { box-shadow: 0 0 0 4px rgba(255,255,255,.10), 0 18px 60px -10px rgba(0,0,0,.7); } }
@keyframes dp-play { 0%,100% { box-shadow: 0 16px 40px -12px rgba(221,57,21,.9), 0 0 0 0 rgba(232,85,46,.5); } 50% { box-shadow: 0 16px 40px -12px rgba(221,57,21,.9), 0 0 0 13px rgba(232,85,46,0); } }

@media (prefers-reduced-motion: reduce) {
  [data-fall], [data-pulse], [data-conv], [data-ring] { animation: none !important; }
}

/* --- slider da calculadora (seção A Conta) --- */
.yep-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 99px; outline: none; background: rgba(244,244,242,.14); cursor: pointer; }
.yep-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #F4F4F2; border: 2px solid #E8552E; box-shadow: 0 0 0 5px rgba(232,85,46,.18); cursor: pointer; }
.yep-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #F4F4F2; border: 2px solid #E8552E; box-shadow: 0 0 0 5px rgba(232,85,46,.18); cursor: pointer; }

/* --- clímax: hover do botão (navy que rompeu) --- */
.cl-cta { transition: transform var(--dur-fast), background var(--dur-fast); }
.cl-cta:hover { background: #1F1F38 !important; transform: translateY(-2px); }

/* --- A Dor: grid de pontos (1.000 visitantes) --- */
.dor-grid { display: grid; grid-template-columns: repeat(40, 1fr); gap: clamp(2px,.5vw,4px); width: 100%; }
.dor-grid i { display: block; aspect-ratio: 1; border-radius: 50%; background: rgba(244,244,242,.07); }
/* sem JS (ou reduced-motion): as ativas já aparecem acesas (laranja) */
.dor-grid i.is-lit { background: #E8552E; box-shadow: 0 0 0 1px rgba(221,57,21,.35), 0 0 11px 1px rgba(221,57,21,.6); }

/* com JS: as ativas começam apagadas e ACENDEM em cascata (sutil, com propósito) */
.has-js .dor-grid i.is-lit {
  background: rgba(244,244,242,.07);
  box-shadow: none;
  transform: scale(.45);
  transition: background .42s var(--ease), box-shadow .42s var(--ease), transform .42s var(--ease);
}
.has-js .dor-grid i.is-lit.lit {
  background: #E8552E;
  box-shadow: 0 0 0 1px rgba(221,57,21,.35), 0 0 11px 1px rgba(221,57,21,.6);
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .has-js .dor-grid i.is-lit { background: #E8552E; box-shadow: 0 0 0 1px rgba(221,57,21,.35), 0 0 11px 1px rgba(221,57,21,.6); transform: none; transition: none; }
}