/* ============================================================
   ELOS 53 Anos — LP Quiz + Roleta
   Estilos de apoio (fonte, animações e estados que o Tailwind
   não cobre). Todo o layout visual está nas classes Tailwind
   do index.html / js/app.js.
   ============================================================ */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../assets/fonts/SourceSans3-latin.woff2") format("woff2");
}

html,
body {
  height: 100%;
  overflow: hidden;
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Palco 1920x1080 escalado para cobrir a viewport ---------- */
#stage {
  transform-origin: center center;
}

/* ---------- Elementos exclusivos de cada LP ----------
   lp1 = index.html (totem: termina no brinde + reiniciar)
   lp2 = futurize.html (site: código + resgate via formulário CF7) */
body[data-lp="lp1"] .lp2-only {
  display: none;
}

body[data-lp="lp2"] .lp1-only {
  display: none;
}

/* ---------- Modo site (LP2/futurize) ----------
   O palco preenche a largura da janela e a página rola na
   vertical como um site comum — nada é cortado. */
html.site-mode,
html.site-mode body {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

html.site-mode #viewport {
  position: static;
  display: block;
}

html.site-mode #stage {
  transform-origin: top left;
}

/* ---------- Transição entre telas ---------- */
.screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s ease;
}

.screen.active {
  opacity: 1;
  visibility: visible;
}

/* ---------- Botões de resposta ---------- */
.answer-btn {
  transition: background .3s ease, transform .3s ease, opacity .3s ease;
  z-index: 9999;
}

#quiz-answers {
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

#quiz-answers.feedback-pos {
  transform: translateY(-165px);
}

/* ---------- Banner de feedback ---------- */
.feedback-banner {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .4s ease .15s, transform .4s ease .15s;
  pointer-events: none;
}

.feedback-banner.show {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Formulário ---------- */
.form-input {
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(197, 200, 245, .45);
  outline: none;
  transition: border-color .25s ease;
}

.form-input::placeholder {
  color: #A9ADE0;
}

.form-input:focus {
  border-bottom-color: #EA5B1A;
}

.form-input.invalid {
  border-bottom-color: #FF6B6B;
}

/* checkbox customizado */
.form-check {
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  border: 2px solid #A9ADE0;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-grid;
  place-content: center;
  transition: background .2s ease, border-color .2s ease;
}

.form-check::before {
  content: "";
  width: 16px;
  height: 16px;
  transform: scale(0);
  transition: transform .15s ease;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: #fff;
}

.form-check:checked {
  background: #EA5B1A;
  border-color: #EA5B1A;
}

.form-check:checked::before {
  transform: scale(1);
}

.form-check.invalid {
  border-color: #FF6B6B;
}

/* ---------- Roleta ---------- */
#wheel-clip {
  pointer-events: none;
}

#wheel-rotor {
  will-change: transform;
}

#girar-hub {
  transition: transform .2s ease, box-shadow .2s ease;
}

#girar-hub:not(:disabled):hover {
  transform: scale(1.05);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

#girar-hub:disabled {
  cursor: default;
}

@keyframes hubPulse {

  0%,
  100% {
    box-shadow: 0 18px 50px rgba(0, 0, 0, .4), 0 0 0 0 rgba(255, 255, 255, .45);
  }

  50% {
    box-shadow: 0 18px 50px rgba(0, 0, 0, .4), 0 0 0 26px rgba(255, 255, 255, 0);
  }
}

#girar-hub.pulse {
  animation: hubPulse 1.8s ease-out infinite;
}

/* bloco de texto da roleta sobe quando sai o resultado */
#roleta-content {
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

#roleta-content.result-pos {
  transform: translateY(-186px);
}

#roleta-result {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .5s ease .35s, transform .5s ease .35s;
  pointer-events: none;
}

#roleta-result.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------- Ajustes para totem vertical (portrait) ---------- */
@media (orientation: portrait) {

  /* foto da pergunta ancorada no topo direito, acima do enunciado */
  #quiz-cut {
    left: auto !important;
    right: -40px !important;
    bottom: auto !important;
    top: 160px !important;
    height: 850px !important;
    width: auto !important;
    -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 99%);
    mask-image: linear-gradient(180deg, #000 76%, transparent 99%);
  }

  /* no vertical as respostas não precisam subir para dar lugar ao banner */
  #quiz-answers.feedback-pos {
    transform: none;
  }

  #roleta-content.result-pos {
    transform: translateY(-110px);
  }
}

/* ---------- Hovers genéricos ---------- */
.cta-hover {
  transition: filter .2s ease, transform .2s ease;
}

.cta-hover:hover {
  filter: brightness(1.12);
}

.cta-hover:active {
  transform: scale(.97);
}