/* ============================================================
   Consulta com a Sensitiva — tema místico
   Base: roxo #3d0099 · magenta #c800e6 · dourado da logo
   ============================================================ */
:root {
  --bg-deep:  #12002e;
  --bg:       #3d0099;
  --bg-2:     #24005c;
  --accent:   #c800e6;
  --accent-2: #e05cff;
  --accent-glow: rgba(200, 0, 230, 0.55);
  --gold:     #e9c877;
  --gold-2:   #f9e7ad;
  --gold-deep:#b48a2f;
  --gold-glow: rgba(233, 200, 119, 0.55);
  --text:     #f4eefc;
  --muted:    rgba(233, 224, 255, 0.72);
  --glass:    rgba(255, 255, 255, 0.045);
  --glass-brd:rgba(233, 200, 119, 0.22);
  --radius:   16px;
  --maxw:     468px;
  --serif:    'Cormorant Garamond', Georgia, serif;
  --display:  'Cinzel', 'Cormorant Garamond', serif;
  --sans:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============================================================
   FUNDO CÓSMICO
   ============================================================ */
#bg-cosmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #4a0bb0 0%, #2a006b 42%, #12002e 100%);
}
#starfield { position: absolute; inset: 0; width: 100%; height: 100%; }

.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
.neb-1 {
  width: 60vmax; height: 60vmax;
  top: -20vmax; left: -18vmax;
  background: radial-gradient(circle, rgba(200,0,230,0.55), transparent 62%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.neb-2 {
  width: 52vmax; height: 52vmax;
  bottom: -22vmax; right: -16vmax;
  background: radial-gradient(circle, rgba(120,40,255,0.5), transparent 62%);
  animation: drift2 32s ease-in-out infinite alternate;
}
.neb-3 {
  width: 40vmax; height: 40vmax;
  top: 32%; right: -10vmax;
  background: radial-gradient(circle, rgba(233,200,119,0.28), transparent 60%);
  animation: drift3 38s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(10vmax, 8vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-8vmax, -6vmax) scale(1.1); } }
@keyframes drift3 { to { transform: translate(-6vmax, 6vmax) scale(1.2); } }

/* aura giratória sutil atrás do conteúdo */
.aura {
  position: absolute;
  top: -12%; left: 50%;
  width: 130vmax; height: 130vmax;
  transform: translateX(-50%);
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(233,200,119,0.06) 60deg,
    transparent 120deg, rgba(200,0,230,0.07) 200deg,
    transparent 300deg);
  animation: spin 60s linear infinite;
  opacity: 0.8;
}
.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(10,0,26,0.7) 100%);
  pointer-events: none;
}
@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }

/* ============================================================
   LAYOUT
   ============================================================ */
#app {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 20px 150px;
  min-height: 100vh;
}

/* ---------- Header ---------- */
.q-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 0 22px;
}
.q-header::before {
  content: '';
  position: absolute;
  width: 240px; height: 240px;
  background: radial-gradient(circle, var(--gold-glow), transparent 65%);
  filter: blur(6px);
  opacity: 0.6;
  animation: breathe 5s ease-in-out infinite;
  pointer-events: none;
}
.q-header img {
  position: relative;
  height: 104px;
  width: auto;
  max-width: 82%;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(233,200,119,0.45));
  animation: floaty 6s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { transform: scale(0.92); opacity: 0.4; } 50% { transform: scale(1.08); opacity: 0.7; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- Progress ---------- */
.q-progress {
  position: relative;
  width: 100%;
  height: 7px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(233,200,119,0.18);
  border-radius: 999px;
  overflow: hidden;
  margin: 2px 0 26px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
.q-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  border-radius: 999px;
  box-shadow: 0 0 12px var(--accent-glow), 0 0 18px var(--gold-glow);
  transition: width 0.7s cubic-bezier(.22,.61,.36,1);
  position: relative;
}

/* ---------- Título / Texto ---------- */
.q-title {
  text-align: center;
  margin: 8px 0 20px;
  line-height: 1.32;
  font-family: var(--display);
  letter-spacing: 0.3px;
}
.q-title p { margin: 0; }
.q-title strong { font-weight: 700; }
.q-title, .q-title span {
  background: linear-gradient(180deg, #ffffff 0%, var(--gold-2) 55%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 26px rgba(233,200,119,0.18);
}
.q-title .q-text, .q-title .q-text * {
  -webkit-text-fill-color: initial;
  color: var(--muted);
  background: none;
}

.q-text {
  text-align: center;
  color: var(--muted);
  font-family: var(--serif);
  line-height: 1.5;
  font-size: 23px;
  margin: 12px 0;
  font-weight: 500;
}
.q-text p { margin: 0 0 8px; }
.q-text em, .q-text i { color: var(--gold-2); }

/* ---------- Imagem ---------- */
.q-image { text-align: center; margin: 12px 0 6px; }
.q-image img {
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 30px rgba(200,0,230,0.15);
  animation: fadeUp 0.7s ease both;
}

/* ---------- Quiz options ---------- */
.q-options { display: grid; grid-template-columns: 1fr; gap: 13px; margin: 10px 0 22px; }
.q-option {
  --i: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: left;
  width: 100%;
  padding: 15px 17px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.38;
  cursor: pointer;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.28);
  transition: transform .22s ease, border-color .28s ease, box-shadow .3s ease, background .28s ease;
  animation: fadeUp .5s ease both;
  animation-delay: calc(var(--i) * 90ms);
}
/* varredura de brilho no hover */
.q-option::before {
  content: '';
  position: absolute; top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(233,200,119,0.18), transparent);
  transition: left .6s ease;
}
.q-option:hover {
  border-color: rgba(233,200,119,0.7);
  background: rgba(200,0,230,0.10);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 22px rgba(233,200,119,0.25);
}
.q-option:hover::before { left: 130%; }
.q-option:active { transform: scale(0.985); }
.q-option.selected {
  border-color: var(--gold);
  background: rgba(200,0,230,0.18);
  box-shadow: 0 0 0 1px var(--gold), 0 0 28px var(--accent-glow), 0 0 22px var(--gold-glow);
}
.q-option .emoji {
  font-size: 24px;
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(233,200,119,0.22), rgba(255,255,255,0.04));
  border: 1px solid rgba(233,200,119,0.35);
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(233,200,119,0.2);
}
.q-option .label { flex: 1; font-weight: 500; }
.q-option .label p { margin: 0; }

/* ---------- Botão ---------- */
.q-button-wrap { text-align: center; margin: 24px 0 6px; }
.block-button, .q-button {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: var(--maxw);
  padding: 18px 24px;
  border: 1px solid rgba(249,231,173,0.6);
  border-radius: 999px;
  background: linear-gradient(100deg, var(--accent) 0%, #9010c8 55%, var(--accent) 100%);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 34px var(--accent-glow), 0 0 0 1px rgba(233,200,119,0.15), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .15s ease, filter .2s ease, box-shadow .3s ease;
  animation: glowPulse 2.6s ease-in-out infinite;
}
.q-button p { margin: 0; }
.q-button::after {
  content: '';
  position: absolute; top: 0; left: -130%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: sweep 3.2s ease-in-out infinite;
}
.q-button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.q-button:active { transform: scale(0.98); }
@keyframes glowPulse {
  0%,100% { box-shadow: 0 10px 34px var(--accent-glow), 0 0 0 1px rgba(233,200,119,0.15), inset 0 1px 0 rgba(255,255,255,0.25); }
  50%     { box-shadow: 0 12px 46px var(--accent-glow), 0 0 26px var(--gold-glow), 0 0 0 1px rgba(233,200,119,0.5), inset 0 1px 0 rgba(255,255,255,0.3); }
}
@keyframes sweep { 0% { left: -130%; } 55%,100% { left: 130%; } }

/* botão fixo no rodapé */
#fixed-slot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  padding: 16px 20px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(18,0,46,0.85) 55%);
  z-index: 50;
  pointer-events: none;
}
#fixed-slot:empty { display: none; }
#fixed-slot .q-button { pointer-events: auto; }

/* ---------- Loading místico ---------- */
.q-loading { text-align: center; padding: 46px 0; }
.q-orbit {
  position: relative;
  width: 120px; height: 120px;
  margin: 0 auto 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.q-orbit .sp-svg {
  width: 100%; height: 100%;
  overflow: visible;
}
/* anéis animados — rotação pura em torno do centro exato do SVG */
.q-orbit .sp-ring {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.q-orbit .sp-r1 { animation: sp-rotate 3s linear infinite; }      /* externo, lento */
.q-orbit .sp-r2 { animation: sp-rotate-rev 2s linear infinite; }  /* médio, sentido inverso */
.q-orbit .sp-r3 { animation: sp-rotate 1.5s linear infinite; }    /* interno, rápido */
/* ponto central — estático, apenas suavizado */
.q-orbit .sp-core { filter: blur(0.5px); }
@keyframes sp-rotate     { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sp-rotate-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.q-loading .q-title { animation: fadeUp .6s ease both; }
.q-loading .bar {
  width: 74%; max-width: 300px; height: 6px; margin: 20px auto 0;
  background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden;
  border: 1px solid rgba(233,200,119,0.2);
}
.q-loading .bar > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  box-shadow: 0 0 12px var(--gold-glow);
}

/* ---------- Análise (contador + textos progressivos) ---------- */
.q-analyze { text-align: center; padding: 4px 0 20px; }
.an-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 6px 0 28px;
}
.an-orbit { margin: 0 auto 10px; }
.an-pct {
  font-family: var(--display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #ffffff 0%, var(--gold-2) 55%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 26px rgba(233,200,119,0.18);
}
.an-title {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-top: 8px;
}
.an-bar {
  width: 80%;
  max-width: 320px;
  height: 8px;
  margin-top: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(233,200,119,0.18);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
.an-bar > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  border-radius: 999px;
  box-shadow: 0 0 12px var(--accent-glow), 0 0 18px var(--gold-glow);
}
.an-lines { display: flex; flex-direction: column; gap: 16px; }
.an-line {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
  color: var(--muted);
  font-family: var(--serif);
  line-height: 1.4;
}
.an-line.show { opacity: 1; transform: none; }
.an-line p { margin: 0; }
.an-line em, .an-line i { color: var(--gold-2); }

/* ---------- Vídeo ---------- */
.q-video { margin: 14px 0; display: flex; justify-content: center; }
.q-vsl {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 3 / 4;
  background: #000;
  border-radius: var(--radius);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 14px 44px rgba(0,0,0,0.55), 0 0 30px rgba(200,0,230,0.18);
  object-fit: cover;
}

/* ---------- Cartas (widget) ---------- */
.q-cards {
  position: relative;
  margin-top: 6px;
  padding: 10px;
  border-radius: var(--radius);
}

/* ---------- Transições de etapa ---------- */
.step-enter { animation: stepIn .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

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