/*
  estilos/extras.css — peças visuais comuns aos estilos de biosite.
  Usa só as variáveis que todo estilo define (--botao, --botao-forte,
  --sobre-botao, --texto, --texto-fraco, --card, --bg, --tint, --linha,
  --f-titulo, --f-texto) e o tom escuro da paleta (--painel no estilo 2,
  --profundo no estilo 1). A lógica mora em nucleo.js (Biosite.extras).
*/

/* ---------------- CORTINA DE ABERTURA ----------------
   Ao abrir o site: o nome dela aparece, uma frase com a palavra final
   trocando, um fio enchendo embaixo, e a cortina sobe revelando a página.
   A saída é keyframe CSS (não depende do JS terminar): ninguém fica preso. */
.cortina {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: 0 28px; text-align: center; color: #fff;
  background:
    radial-gradient(80% 50% at 85% 10%, color-mix(in srgb, var(--botao) 55%, transparent), transparent 70%),
    radial-gradient(70% 45% at 10% 95%, color-mix(in srgb, var(--botao) 35%, transparent), transparent 70%),
    var(--painel, var(--profundo, #3a1520));
  animation: cortina-sobe .85s cubic-bezier(.76, 0, .24, 1) var(--cortina-tempo, 1.9s) forwards;
}
.cortina-marca {
  font: 600 clamp(44px, 14vw, 64px)/1 var(--f-titulo); letter-spacing: -.01em;
  opacity: 0; animation: cortina-entra .7s cubic-bezier(.16, 1, .3, 1) .08s forwards;
}
.cortina-sub {
  margin-top: 10px; font: 500 11px/1.2 var(--f-texto); letter-spacing: .34em; text-transform: uppercase;
  opacity: 0; animation: cortina-entra .6s cubic-bezier(.16, 1, .3, 1) .22s forwards;
}
.cortina-frase {
  margin-top: 26px; font: italic 500 clamp(20px, 6vw, 26px)/1.15 var(--f-titulo);
  opacity: 0; animation: cortina-entra .6s cubic-bezier(.16, 1, .3, 1) .38s forwards;
}
/* a palavra final troca subindo, uma por vez (largura travada na maior) */
.cortina-roda { display: inline-block; height: 1.15em; overflow: hidden; vertical-align: bottom; text-align: left; }
.cortina-roda > span { display: block; animation: cortina-palavras 1.25s cubic-bezier(.7, 0, .3, 1) .55s forwards; }
.cortina-roda b { display: block; height: 1.15em; font-weight: 500; color: color-mix(in srgb, var(--tint) 70%, #fff); }
.cortina-fio {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; transform-origin: left;
  background: color-mix(in srgb, var(--tint) 60%, #fff); transform: scaleX(0);
  animation: cortina-fio var(--cortina-tempo, 1.9s) cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes cortina-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cortina-palavras { 0%, 30% { transform: translateY(0); } 45%, 70% { transform: translateY(-1.15em); } 85%, 100% { transform: translateY(-2.3em); } }
@keyframes cortina-fio { to { transform: scaleX(1); } }
@keyframes cortina-sobe { to { transform: translateY(-100%); visibility: hidden; } }

/* ---------------- TOQUE: onda + brilho que passa ----------------
   Uma camada recortada no formato do botão (não depende do botão ter
   overflow: hidden), com a onda que sai do dedo e um brilho diagonal
   atravessando — o "sombreamento que vai passando". */
.toque-camada { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.toque-onda {
  position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .42);
  transform: scale(0); animation: toque-onda .6s cubic-bezier(.2, .8, .2, 1) forwards;
}
.toque-camada.escura .toque-onda { background: color-mix(in srgb, var(--botao) 22%, transparent); }
.toque-camada::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 70%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .5) 45%, rgba(255, 255, 255, .12) 60%, transparent 100%);
  transform: translateX(-120%) skewX(-12deg);
  animation: toque-brilho .6s cubic-bezier(.23, 1, .32, 1) forwards;
}
.toque-camada.escura::after { background: linear-gradient(105deg, transparent 0%, color-mix(in srgb, var(--botao) 22%, transparent) 50%, transparent 100%); }
@keyframes toque-onda { to { transform: scale(1); opacity: 0; } }
@keyframes toque-brilho { to { transform: translateX(260%) skewX(-12deg); } }

/* ---------------- CONFIRMAÇÃO DO AGENDAMENTO ---------------- */
.confirma {
  position: fixed; inset: 0; z-index: 260; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(24, 8, 14, .55); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s;
}
.confirma.aberta { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.confirma-caixa {
  position: relative; width: 100%; max-width: 480px; max-height: 94vh; overflow-y: auto;
  padding: 30px 22px calc(24px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0;
  background: var(--card); color: var(--texto); text-align: center;
  transform: translateY(100%); transition: transform .5s cubic-bezier(.32, .72, 0, 1);
}
.confirma.aberta .confirma-caixa { transform: none; }
@media (min-width: 600px) {
  .confirma { align-items: center; }
  .confirma-caixa { border-radius: 28px; }
}
.confirma-selo {
  width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
  color: var(--sobre-botao); background: linear-gradient(135deg, var(--botao), var(--botao-forte));
  box-shadow: 0 0 0 8px var(--tint), 0 18px 30px -16px var(--botao);
}
.confirma.aberta .confirma-selo { animation: confirma-estala .6s cubic-bezier(.23, 1, .32, 1) .1s backwards; }
.confirma-selo svg { width: 34px; height: 34px; }
.confirma.aberta .confirma-selo svg { stroke-dasharray: 30; stroke-dashoffset: 30; animation: confirma-risca .45s .35s cubic-bezier(.23, 1, .32, 1) forwards; }
@keyframes confirma-estala { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes confirma-risca { to { stroke-dashoffset: 0; } }
.confirma h3 { margin: 0; font: 600 28px/1.1 var(--f-titulo); }
.confirma-sub { margin: 6px auto 0; max-width: 32ch; font-size: 14.5px; color: var(--texto-fraco); }
.confirma-resumo { margin: 18px 0 0; padding: 4px 16px; border-radius: 18px; background: var(--bg); text-align: left; box-shadow: inset 0 0 0 1px var(--linha); }
.confirma-resumo div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--linha); font-size: 14px; }
.confirma-resumo div:first-child { border-top: 0; }
.confirma-resumo dt { color: var(--texto-fraco); }
.confirma-resumo dd { margin: 0; font-weight: 600; text-align: right; }
.confirma-passo {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 14px;
  background: var(--tint); text-align: left; font-size: 13.5px; line-height: 1.45; color: var(--texto);
}
.confirma-passo svg { flex: none; width: 20px; height: 20px; color: var(--botao); margin-top: 1px; }
.confirma-whats {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px;
  margin-top: 16px; border-radius: 999px; text-decoration: none; color: #fff; background: #128C4A;
  font: 700 16px var(--f-texto); box-shadow: 0 14px 26px -14px rgba(18, 140, 74, .9);
  transition: transform .16s cubic-bezier(.23, 1, .32, 1);
}
.confirma-whats:active { transform: scale(.97); }
.confirma-whats svg { width: 22px; height: 22px; }
.confirma-voltar { margin-top: 10px; border: 0; background: none; padding: 10px; font: 600 14px var(--f-texto); color: var(--texto-fraco); cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .cortina { display: none; }
  .toque-camada::after { display: none; }
  .confirma-caixa { transition: none; }
}

/* aviso nas folhas de Pix/Wi-Fi quando os dados são de exemplo (rascunho) */
.aviso-exemplo {
  margin: 38px 0 14px; padding: 10px 12px; border-radius: 12px; text-align: center; /* 38px: abaixo do X de fechar */
  font: 600 12.5px/1.4 var(--f-texto); color: var(--texto); background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--linha);
}