/* Check-in de 1 minuto (v2): um momento de pausa. Fundo areia, painel escuro no centro, um anel que respira atrás da pergunta,
   a pergunta grande e três respostas com medidor (1, 2 ou 3 pontos). Resultado com um retrato em barras. Nada é salvo nem enviado. */
.checkin.ci2{--ci-ink:#1b1420;--ci-sand:#ebe1cf;--ci-amber:#f59e0b;background:var(--ci-sand);padding:clamp(90px,11vw,140px) 0 clamp(56px,7vw,80px)}
.ci2 .checkin-grid{grid-template-columns:1fr;justify-items:center;gap:clamp(28px,4vw,44px)}
.ci2 .checkin-intro{text-align:center;max-width:640px}
.ci2 .eyebrow{justify-content:center;color:var(--ci-ink);font:600 13px var(--font-body);letter-spacing:.04em;text-transform:none}
.ci2 .eyebrow::before{background:var(--ci-amber);opacity:1;width:28px;height:1.5px}
.checkin.ci2 h2{margin:0 auto;max-width:none;font-size:clamp(2.2rem,4.8vw,4rem);line-height:1.02;letter-spacing:-.035em;color:var(--ci-ink)}
.checkin.ci2 .lede{margin:16px auto 0;max-width:46ch;font-size:clamp(15.5px,1.2vw,17.5px);color:rgba(27,20,32,.72)}
.ci2 .checkin-note{display:block;margin-top:14px;font-size:13px;color:rgba(27,20,32,.7)}
.ci2 .checkin-note::before{content:'';display:inline-block;vertical-align:-2px;margin-right:8px;width:14px;height:14px;border-radius:4px;border:1.5px solid currentColor;
  background:linear-gradient(currentColor,currentColor) 50% 66%/6px 1.5px no-repeat}   /* cadeado discreto */

/* o painel */
.checkin.ci2 .checkin-card{position:relative;width:min(820px,100%);min-height:0;padding:clamp(26px,4vw,48px) clamp(20px,4vw,52px) clamp(24px,3.4vw,40px);
  border-radius:32px;background:var(--ci-ink);color:var(--cream);box-shadow:0 50px 100px -50px rgba(27,20,32,.7);overflow:hidden;isolation:isolate}
.ci2 .checkin-card::before{content:'';position:absolute;left:50%;top:44%;width:min(520px,90%);aspect-ratio:1;border-radius:50%;z-index:-1;
  transform:translate(-50%,-50%);border:1px solid rgba(245,158,11,.18);box-shadow:0 0 0 40px rgba(245,158,11,.025),0 0 0 90px rgba(245,158,11,.018);
  animation:ciBreath 9s ease-in-out infinite}
@keyframes ciBreath{0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.7}45%{transform:translate(-50%,-50%) scale(1.04);opacity:1}}

/* progresso em 5 segmentos + contagem */
.ci2 .ci-progress{display:none}
.ci-segs{display:flex;gap:6px;margin:0 auto 6px;max-width:260px}
.ci-segs i{flex:1;height:3px;border-radius:3px;background:rgba(250,243,224,.14);transition:background .5s ease}
.ci-segs i.done{background:var(--ci-amber)}
.ci-segs i.now{background:rgba(245,158,11,.5)}
.ci2 .ci-stage{text-align:center;min-height:clamp(300px,34vw,340px)}
.ci2 .ci-count{display:block;margin-bottom:18px;font:600 12px var(--font-body);letter-spacing:.12em;color:rgba(250,243,224,.5)}
.ci2 .ci-text{margin:0 auto 30px;max-width:22ch;font-family:var(--font-headline);font-weight:800;font-size:clamp(1.6rem,3.3vw,2.6rem);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}

/* respostas com medidor */
.ci2 .ci-opts{grid-template-columns:repeat(3,1fr);gap:12px;max-width:620px;margin:0 auto}
.ci2 .ci-opts button{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 12px 18px;border-radius:20px;border:1px solid rgba(250,243,224,.16);
  background:rgba(250,243,224,.035);color:var(--cream);font:600 15px var(--font-body);cursor:pointer;
  transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,color .3s}
.ci2 .ci-opts button:hover{transform:translateY(-3px);border-color:rgba(245,158,11,.6);background:rgba(245,158,11,.08)}
.ci2 .ci-opts button:focus-visible{outline:2px solid var(--ci-amber);outline-offset:3px}
.ci2 .ci-opts button.picked{background:var(--ci-amber);border-color:var(--ci-amber);color:var(--ci-ink);transform:translateY(-3px) scale(1.02)}
.ci-meter{display:flex;gap:6px;align-items:flex-end;height:22px}
.ci-meter b{width:7px;border-radius:4px;background:rgba(250,243,224,.22);transition:background .3s}
.ci-meter b:nth-child(1){height:8px}.ci-meter b:nth-child(2){height:15px}.ci-meter b:nth-child(3){height:22px}
.ci2 .ci-opts button .ci-meter b.on{background:var(--ci-amber)}
.ci2 .ci-opts button.picked .ci-meter b{background:rgba(27,20,32,.25)}
.ci2 .ci-opts button.picked .ci-meter b.on{background:var(--ci-ink)}
.ci-key{font:600 10.5px var(--font-body);letter-spacing:.08em;color:rgba(250,243,224,.35)}
.ci2 .ci-opts button.picked .ci-key{color:rgba(27,20,32,.5)}
@media (hover:none){ .ci-key{display:none} }

.ci2 .ci-back{display:block;margin:18px auto 0;color:rgba(250,243,224,.55);text-decoration:underline;text-underline-offset:4px}

/* resultado: retrato em barras */
.ci-retrato{display:flex;justify-content:center;align-items:flex-end;gap:14px;height:86px;margin:0 auto 22px}
.ci-retrato span{display:flex;flex-direction:column;align-items:center;gap:8px;font:600 11px var(--font-body);color:rgba(250,243,224,.45)}
.ci-retrato i{display:block;width:26px;border-radius:7px 7px 3px 3px;background:var(--ci-amber);height:calc(10px + var(--v) * 26px);
  transform-origin:bottom;animation:ciBar .9s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * 90ms)}
.ci-retrato i[style*="--v:0"]{background:rgba(250,243,224,.2)}
@keyframes ciBar{from{transform:scaleY(0)}}
.ci2 .ci-body{margin:0 auto 26px;max-width:50ch;text-align:center}
.ci2 .ci-actions{justify-content:center}

.ci2 .checkin-safety{color:rgba(27,20,32,.62)}
@media (max-width:640px){
  .ci2 .ci-opts{grid-template-columns:1fr;gap:8px}
  .ci2 .ci-opts button{flex-direction:row;justify-content:space-between;padding:15px 18px;border-radius:16px}
  .ci2 .ci-stage{min-height:0}
  .checkin.ci2 .checkin-card{border-radius:24px}
}
@media (prefers-reduced-motion:reduce){ .ci2 .checkin-card::before,.ci-retrato i{animation:none} }

/* ---------- fundo do painel: aurora roxa viva (inspirada nas referências "Violet Radiance" e "Aurora" do 21st.dev, código próprio) ----------
   três luzes da marca derivando devagar, ficam mais intensas a cada resposta (--ci-p de 0 a 1) e uma onda nasce no toque */
.checkin.ci2 .checkin-card{background:#160a22}
.ci-aurora{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;opacity:calc(.62 + var(--ci-p,0) * .38);transition:opacity 1.2s ease}
.ci-aurora span{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;will-change:transform;
  transform:translate3d(calc(var(--px,0) * var(--d,20px)), calc(var(--py,0) * var(--d,20px)), 0)}
.ci-aurora span::before{content:'';position:absolute;inset:0;border-radius:50%;animation:ciDrift var(--t,26s) ease-in-out infinite alternate}
.ci-aurora span:nth-child(1){left:-18%;top:-30%;--d:26px;--t:24s}
.ci-aurora span:nth-child(1)::before{background:radial-gradient(closest-side,rgba(124,58,237,.55),rgba(124,58,237,0))}
.ci-aurora span:nth-child(2){right:-22%;top:-12%;--d:-18px;--t:31s}
.ci-aurora span:nth-child(2)::before{background:radial-gradient(closest-side,rgba(168,62,140,.42),rgba(168,62,140,0));animation-delay:-9s}
.ci-aurora span:nth-child(3){left:12%;bottom:-48%;width:80%;--d:14px;--t:36s}
.ci-aurora span:nth-child(3)::before{background:radial-gradient(closest-side,rgba(82,17,128,.7),rgba(82,17,128,0));animation-delay:-17s}
@keyframes ciDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8%,6%) scale(1.12)}100%{transform:translate(-6%,10%) scale(.94)}}
.ci-aurora::after{content:'';position:absolute;inset:0;opacity:.08;mix-blend-mode:overlay;background-image:var(--grain-light);background-size:180px}   /* grão fino */
/* onda de luz no toque */
.ci-ripple{position:absolute;z-index:-1;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(233,213,255,.35),rgba(233,213,255,0));animation:ciRipple 1.6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes ciRipple{to{transform:scale(34);opacity:0}}
.ci2 .checkin-card::before{border-color:rgba(233,213,255,.16);box-shadow:0 0 0 40px rgba(233,213,255,.02),0 0 0 90px rgba(233,213,255,.015)}
@media (prefers-reduced-motion:reduce){ .ci-aurora span::before{animation:none} .ci-ripple{display:none} }

/* ---------- v3: fundo em shader + entrada da pergunta (checkin-fx.js) ---------- */
.ci-shader{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block;pointer-events:none}
.checkin-card.has-shader .ci-aurora,.checkin-card.has-shader .ci-ripple{display:none}
.checkin-card.has-shader{background:#110818}
/* a pergunta entra palavra por palavra, saindo do desfoque */
.ci-w{display:inline-block}
.ci-text.is-in .ci-w{animation:ciWord .75s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i) * 55ms)}
@keyframes ciWord{from{opacity:0;filter:blur(10px);transform:translateY(.35em)}}
/* as respostas sobem com leve mola, uma depois da outra (só na entrada: o hover continua livre) */
.ci-opts.is-in button{animation:ciSpring .7s cubic-bezier(.34,1.45,.64,1) backwards}
.ci-opts.is-in button:nth-child(1){animation-delay:.28s}
.ci-opts.is-in button:nth-child(2){animation-delay:.36s}
.ci-opts.is-in button:nth-child(3){animation-delay:.44s}
@keyframes ciSpring{from{opacity:0;transform:translateY(18px) scale(.94)}}
/* respostas em vidro sobre o degradê */
.ci2 .ci-opts button{background:rgba(255,255,255,.06);border-color:rgba(233,213,255,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ci2 .ci-opts button:hover{background:rgba(233,213,255,.12);border-color:rgba(233,213,255,.5)}
@media (max-width:860px), (pointer:coarse){ .ci2 .ci-opts button{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.08)} }
@media (prefers-reduced-motion:reduce){ .ci-text.is-in .ci-w,.ci-opts.is-in button{animation:none} }

/* cabeçalho do check-in: centralizado na página, rótulo maior */
.checkin.ci2 .checkin-topo{display:flex;justify-content:center}
.checkin.ci2 .checkin-intro{margin:0 auto;max-width:760px;text-align:center}
.checkin.ci2 .eyebrow{justify-content:center;gap:14px;margin:0 0 16px;padding:0;border:0;background:none;font:700 clamp(15px,1.3vw,18px) var(--font-body);letter-spacing:.02em;color:var(--ci-ink)}
.checkin.ci2 .eyebrow::before,.checkin.ci2 .eyebrow::after{content:'';width:40px;height:1.5px;background:var(--ci-amber);display:block;border:0;opacity:1}
.checkin.ci2 .eyebrow img,.checkin.ci2 .eyebrow svg{display:none}
.checkin.ci2 h2{font-size:clamp(2.4rem,5vw,4.3rem)}
.checkin.ci2 .eyebrow{width:fit-content;margin-left:auto !important;margin-right:auto !important}