/* Lilet Baby — quiz de atacado
   Só o que o Tailwind não resolve: keyframes, transição de etapa,
   foco acessível, reduced-motion e ajustes de formulário. */

:root { --quiz-ease: cubic-bezier(.22,.61,.36,1); }

html { -webkit-tap-highlight-color: transparent; }
body { text-wrap: pretty; }

/* ---------- Telas ---------- */
.screen { display: none; }
.screen[data-active] { display: flex; animation: screen-in 320ms var(--quiz-ease) both; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen[data-leaving] { animation: screen-out 200ms var(--quiz-ease) both; }
@keyframes screen-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}

/* Entrada escalonada das opções */
.stagger > * { animation: option-in 300ms var(--quiz-ease) both; }
.stagger > *:nth-child(1) { animation-delay: 40ms; }
.stagger > *:nth-child(2) { animation-delay: 90ms; }
.stagger > *:nth-child(3) { animation-delay: 140ms; }
.stagger > *:nth-child(4) { animation-delay: 190ms; }
@keyframes option-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Opção cápsula ---------- */
.option { transition: background-color 160ms var(--quiz-ease), border-color 160ms var(--quiz-ease),
                      color 160ms var(--quiz-ease), box-shadow 200ms var(--quiz-ease), transform 120ms var(--quiz-ease); }
.option:active { transform: scale(.98); }
.option .check { opacity: 0; transform: scale(.6); transition: opacity 180ms var(--quiz-ease), transform 220ms var(--quiz-ease); }
.option[aria-checked="true"] .check { opacity: 1; transform: scale(1); }

/* ---------- Progresso ---------- */
.progress-fill { transition: width 480ms var(--quiz-ease); }

/* ---------- Foco visível ---------- */
:where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid #A9C3AF;
  outline-offset: 2px;
  border-radius: inherit;
}

/* ---------- Formulário ---------- */
input { font-size: 16px; } /* evita zoom automático no iOS */
input::placeholder { color: #B6A797; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: #3D322B; }

/* ---------- Loading ---------- */
.spinner { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.dots span { animation: dot 1.4s ease-in-out infinite both; }
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%,80%,100% { opacity:.25 } 40% { opacity:1 } }

/* ---------- Vídeo (click-to-play) ---------- */
.video-shell .play { transition: transform 200ms var(--quiz-ease), background-color 200ms var(--quiz-ease); }
.video-shell:hover .play { transform: translate(-50%, -50%) scale(1.06); }

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }