/* estilo da cápsula — parte do "motor" do site, não precisa mexer aqui nunca */
:root{
  color-scheme: dark;
  --ink: #16121f;
  --ink-2: #221b33;
  --ink-3: #2d2545;
  --ember: #e8a24c;
  --ember-soft: #f2c98a;
  --rose: #d98a83;
  --paper: #f3ecdf;
  --paper-dim: #b6acc8;
  --paper-dimmer: #8c8298;
  --shadow: rgba(8, 6, 16, 0.55);
  --radius-card: 38px;
  --radius-ctrl: 999px;
}
*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  min-height:100vh;
  background: var(--ink);
  color: var(--paper);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,.serif{
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-weight: 500;
  text-wrap: balance;
  margin: 0;
}
button{ font-family: inherit; }
#fx{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 8%, rgba(232,162,76,0.10), transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(45,37,69,0.9), transparent 70%),
    var(--ink);
}
.stage{
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  padding-block: 48px;
}
.capsule{
  width: 100%;
  max-width: 440px;
  background: linear-gradient(175deg, var(--ink-3), var(--ink-2));
  border: 1px solid rgba(243,236,223,0.08);
  border-radius: var(--radius-card);
  box-shadow: 0 30px 70px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: capIn .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes capIn{
  from{ opacity: 0; transform: translateY(10px) scale(.98); }
  to{ opacity: 1; transform: none; }
}
.eyebrow{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ember-soft);
  font-weight: 700;
  display:flex;
  align-items:center;
  gap:8px;
}
.eyebrow .dot{ width:5px; height:5px; border-radius:50%; background: var(--ember); box-shadow: 0 0 8px var(--ember); }

/* ---------- cover ---------- */
.cover-wrap{ align-items: center; text-align: center; }
.seal-btn{
  align-self: center;
  width: 132px; height: 132px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  position: relative;
  background: radial-gradient(circle at 32% 28%, var(--ember-soft), var(--ember) 55%, #b9752b 100%);
  box-shadow: 0 0 0 1px rgba(243,236,223,0.12), 0 10px 40px rgba(232,162,76,0.35), 0 0 60px rgba(232,162,76,0.18);
  animation: sealPulse 3.4s ease-in-out infinite;
}
.seal-btn:active{ transform: scale(.96); }
.seal-btn svg{ width: 42px; height: 42px; position:absolute; inset:0; margin:auto; }
@keyframes sealPulse{
  0%,100%{ box-shadow: 0 0 0 1px rgba(243,236,223,0.12), 0 10px 40px rgba(232,162,76,0.32), 0 0 46px rgba(232,162,76,0.16); }
  50%{ box-shadow: 0 0 0 1px rgba(243,236,223,0.16), 0 10px 46px rgba(232,162,76,0.46), 0 0 78px rgba(232,162,76,0.30); }
}
.cover-hint{
  color: var(--paper-dim);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}
.cover-title{ font-size: 22px; color: var(--paper); }
.sealing{ animation: sealBloom .5s ease forwards; }
@keyframes sealBloom{
  to{ opacity: 0; transform: scale(1.4); filter: blur(6px); }
}

/* ---------- message ---------- */
.msg-text{
  font-size: clamp(20px, 5.4vw, 25px);
  line-height: 1.55;
  color: var(--paper);
}
.msg-text .w{ display:inline-block; opacity:0; animation: wIn .5s ease forwards; }
@keyframes wIn{ from{ opacity:0; transform: translateY(5px);} to{ opacity:1; transform:none; } }
.audio-card{
  display:flex; align-items:center; gap:14px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(243,236,223,0.08);
  border-radius: var(--radius-ctrl);
  padding: 10px 16px 10px 10px;
}
.play-btn{
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer; flex:none;
  background: var(--ember); color: var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.play-btn svg{ width:18px; height:18px; }
.track{ flex:1; min-width:0; }
.bar{ height:5px; border-radius:3px; background: rgba(243,236,223,0.14); overflow:hidden; cursor:pointer; }
.bar-fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--ember-soft), var(--ember)); }
.time-row{ display:flex; justify-content:space-between; font-size:11px; color: var(--paper-dimmer); margin-top:6px; font-variant-numeric: tabular-nums; }

.ask-prompt{
  margin-top: 6px;
  padding-top: 22px;
  border-top: 1px solid rgba(243,236,223,0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}
.ask-text{
  font-size: 14px;
  color: var(--paper-dim);
}

.q-text{ margin-bottom: 2px; }

.q-options{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.opt-btn{
  border: 1px solid rgba(243,236,223,0.16);
  background: rgba(243,236,223,0.05);
  color: var(--paper);
  border-radius: var(--radius-ctrl);
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}
.opt-btn:hover{ background: rgba(243,236,223,0.1); }
.opt-btn.selected{
  background: var(--ember);
  border-color: var(--ember);
  color: var(--ink);
  transform: scale(1.02);
}
.q-options.answered .opt-btn:not(.selected){ opacity: .35; }

.q-textarea{
  width: 100%;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(243,236,223,0.14);
  border-radius: 20px;
  padding: 14px 16px;
  color: var(--paper);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  min-height: 90px;
}
.q-textarea::placeholder{ color: var(--paper-dimmer); }
.q-textarea:focus{ outline: 2px solid var(--ember-soft); outline-offset: 1px; }
.q-textarea:focus-visible{ outline: 2px solid var(--ember-soft); outline-offset: 1px; }

.q-progress{
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 6px;
}
.q-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(243,236,223,0.18);
}
.q-dot.active{ background: var(--ember); box-shadow: 0 0 8px rgba(232,162,76,0.5); }

.btn{
  border: none; cursor: pointer; border-radius: var(--radius-ctrl);
  padding: 14px 22px; font-weight: 700; font-size: 15px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary{ background: var(--ember); color: var(--ink); }
.btn-primary:hover{ background: var(--ember-soft); }
.btn:focus-visible{ outline: 2px solid var(--ember-soft); outline-offset: 2px; }
.btn-block{ width:100%; }

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