/* ═══════════════════════════════════════════════════════════════════════
   Splash de carregamento do Piper (public/js/piper-splash.js). Reutilizável: o app Piper TTS (cena "piper") e a Rádio No Ar (cena "radio").
   Tela cheia, só CSS e SVG (nenhuma imagem, nenhuma biblioteca). Os loops usam só transform e opacity.
   Tema: segue a página (claro por padrão; escuro quando o sistema pede ou html[data-theme="dark"]) e pode ser forçado com
   data-splash-theme="light|dark" no próprio elemento. Os tokens de cada tema ficam nos três blocos `@theme`: test/piper-page.test.js
   confere o contraste dos pares principais. As cores de destaque vêm de --accent / --accent-2 do projeto quando existirem.
   Movimento: com "Animações" desligadas (html[data-motion="reduced"], do juice.js) ou prefers-reduced-motion, a cena some e ficam só
   a barra e o texto.
   ═══════════════════════════════════════════════════════════════════════ */

/* @theme light */
.splash {
	--sp-bg: #f7f4ff;
	--sp-glow: #e9e0ff;
	--sp-glow-2: #d9f5f1;
	--sp-ink: #1c1436;
	--sp-ink-2: #4a4170;
	--sp-ink-3: #5d5480;
	--sp-panel: #fbf9ff;
	--sp-line: #cfc4ee;
	--sp-track: #e0d7f7;
	--sp-a: #7a4ddb;
	--sp-b: #0f8f84;
	--sp-accent-text: #5b2fc0;
	--sp-btn: #6a3fd0;
	--sp-btn-ink: #ffffff;
	--sp-danger: #b3261e;
	--sp-bubble: #ffffff;
	--sp-bubble-ink: #1c1436;
	--sp-case: #ece6fb;
	--sp-glass: #ffffff;
	--sp-tick: #5d5480;
	--sp-needle: #d6284a;
	--sp-lamp-off: #b9aedb;
	--sp-lamp-on: #c81e45;
	--sp-lamp-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
	/* @theme dark */
	:root:where(:not([data-theme="light"])) .splash:not([data-splash-theme="light"]) {
		--sp-bg: #0a0715;
		--sp-glow: #2a1a55;
		--sp-glow-2: #0e3a3a;
		--sp-ink: #f2edff;
		--sp-ink-2: #cbc1f2;
		--sp-ink-3: #a99fd2;
		--sp-panel: #16102b;
		--sp-line: #3a2f63;
		--sp-track: #2a2147;
		--sp-a: #b388ff;
		--sp-b: #5eead4;
		--sp-accent-text: #c3a3ff;
		--sp-btn: #b388ff;
		--sp-btn-ink: #160b30;
		--sp-danger: #ff8f8f;
		--sp-bubble: #241a45;
		--sp-bubble-ink: #f2edff;
		--sp-case: #1b1432;
		--sp-glass: #0e0a1c;
		--sp-tick: #a99fd2;
		--sp-needle: #ff6b81;
		--sp-lamp-off: #4a3a63;
		--sp-lamp-on: #c81e45;
		--sp-lamp-ink: #ffffff;
	}
}
/* @theme dark */
:root[data-theme="dark"] .splash:not([data-splash-theme="light"]), .splash[data-splash-theme="dark"] {
	--sp-bg: #0a0715;
	--sp-glow: #2a1a55;
	--sp-glow-2: #0e3a3a;
	--sp-ink: #f2edff;
	--sp-ink-2: #cbc1f2;
	--sp-ink-3: #a99fd2;
	--sp-panel: #16102b;
	--sp-line: #3a2f63;
	--sp-track: #2a2147;
	--sp-a: #b388ff;
	--sp-b: #5eead4;
	--sp-accent-text: #c3a3ff;
	--sp-btn: #b388ff;
	--sp-btn-ink: #160b30;
	--sp-danger: #ff8f8f;
	--sp-bubble: #241a45;
	--sp-bubble-ink: #f2edff;
	--sp-case: #1b1432;
	--sp-glass: #0e0a1c;
	--sp-tick: #a99fd2;
	--sp-needle: #ff6b81;
	--sp-lamp-off: #4a3a63;
	--sp-lamp-on: #c81e45;
	--sp-lamp-ink: #ffffff;
}

/* ───────── Tela cheia ───────── */
.splash {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	overflow-y: auto;
	padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem max(1.25rem, env(safe-area-inset-bottom));
	background:
		radial-gradient(60% 52% at 50% 36%, var(--sp-glow) 0%, transparent 72%),
		radial-gradient(42% 36% at 88% 92%, var(--sp-glow-2) 0%, transparent 72%),
		var(--sp-bg);
	color: var(--sp-ink);
	font: 400 1rem/1.5 var(--font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
	-webkit-text-size-adjust: 100%;
	transition: opacity .38s ease, transform .38s cubic-bezier(.2, .8, .2, 1);
}
.splash[hidden] { display: none !important; }
.splash.is-leaving { opacity: 0; transform: scale(1.025); pointer-events: none; }
.splash:focus { outline: none; }
.splash *, .splash *::before, .splash *::after { box-sizing: border-box; }
.splash p { margin: 0; }
/* Sem JavaScript a splash nunca fica na frente da página */
@media (scripting: none) { .splash { display: none !important; } }

.splash__glow {
	position: absolute;
	left: 50%;
	top: 34%;
	width: min(120vw, 820px);
	aspect-ratio: 1;
	margin: calc(min(120vw, 820px) / -2) 0 0 calc(min(120vw, 820px) / -2);
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--sp-a) 26%, transparent), transparent);
	pointer-events: none;
	animation: sp-breathe 6s ease-in-out infinite;
}
@keyframes sp-breathe { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }

.splash__stage { position: relative; width: min(100%, 520px); display: grid; gap: 1.5rem; justify-items: center; text-align: center; }

/* ───────── Marca ───────── */
.splash__brand { display: grid; justify-items: center; gap: .55rem; }
.splash__logo { width: 64px; height: 64px; filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--sp-a) 45%, transparent)); }
.splash__title { font-weight: 800; font-size: 2rem; line-height: 1.1; letter-spacing: -.03em; }
.splash__tagline { max-width: 34ch; color: var(--sp-ink-2); font-size: 1rem; }

/* ───────── Painel: barra, etapas, estado ───────── */
.splash__scene { width: 100%; min-height: 180px; display: grid; place-items: center; }
.splash__panel {
	width: 100%;
	display: grid;
	gap: .95rem;
	padding: 1.1rem 1.15rem 1.2rem;
	border: 1px solid var(--sp-line);
	border-radius: 20px;
	background: color-mix(in srgb, var(--sp-panel) 78%, transparent);
	box-shadow: 0 18px 50px -24px rgb(0 0 0 / .45);
	text-align: left;
}
.splash__bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem; }
.splash__meter { position: relative; height: 10px; border-radius: 99px; background: var(--sp-track); overflow: hidden; }
.splash__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sp-a), var(--sp-b)); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform .25s ease-out; overflow: hidden; }
.splash__fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%); transform: translateX(-100%); animation: sp-shine 1.6s linear infinite; }
@keyframes sp-shine { to { transform: translateX(100%); } }
.splash__pct { min-width: 3.2ch; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
/* Esqueleto da primeira pintura: a barra cheia e apagada, só com o brilho passando */
.splash[data-state="boot"] .splash__fill { --p: 1; opacity: .35; }
.splash[data-state="boot"] .splash__pct { visibility: hidden; }

.splash__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.splash__step { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: .65rem; font-size: .95rem; color: var(--sp-ink-3); }
.splash__step[data-step-state="active"] { color: var(--sp-ink); font-weight: 600; }
.splash__step[data-step-state="done"] { color: var(--sp-ink-2); }
.splash__info { font-size: .86rem; font-variant-numeric: tabular-nums; text-align: right; }
.splash__dot { position: relative; width: 18px; height: 18px; border: 2px solid var(--sp-line); border-radius: 50%; justify-self: center; }
.splash__step[data-step-state="active"] .splash__dot { border-color: var(--sp-a); animation: sp-dot 1.2s ease-in-out infinite; }
.splash__step[data-step-state="done"] .splash__dot { border-color: transparent; background: linear-gradient(135deg, var(--sp-a), var(--sp-b)); }
.splash__step[data-step-state="done"] .splash__dot::after { content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid var(--sp-bg); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@keyframes sp-dot { 0%, 100% { transform: scale(.82); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }

.splash__status { font-weight: 600; min-height: 1.5em; }
.splash__tip { max-width: 40ch; min-height: 3em; color: var(--sp-ink-3); font-size: .9rem; transition: opacity .25s ease; }
.splash__tip.is-swap { opacity: 0; }

/* ───────── Botões ───────── */
.splash__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .5rem 1.3rem; border: 1px solid transparent; border-radius: 13px; background: var(--sp-btn); color: var(--sp-btn-ink); font: inherit; font-weight: 700; cursor: pointer; transition: transform .15s ease, background .2s ease; }
.splash__btn:hover { background: color-mix(in srgb, var(--sp-btn) 88%, var(--sp-ink)); }
.splash__btn:active { transform: translateY(1px); }
.splash__btn--ghost { border-color: var(--sp-line); background: transparent; color: var(--sp-ink); }
.splash__btn--ghost:hover { background: color-mix(in srgb, var(--sp-track) 60%, transparent); }
.splash__btn:focus-visible { outline: 3px solid var(--sp-a); outline-offset: 3px; }
.splash__skip { justify-self: center; opacity: 0; transform: translateY(6px); animation: sp-in .4s ease forwards; }
@keyframes sp-in { to { opacity: 1; transform: none; } }
.splash__skip[hidden] { display: none; }
/* Com "Entrar enquanto baixa" previsto, o espaço do botão já está reservado: ele aparece sem empurrar o resto da tela */
.splash--skippable .splash__skip[hidden] { display: inline-flex; visibility: hidden; animation: none; }

/* ───────── Estados: confirmar, erro, pronto ───────── */
.splash__ask, .splash__error { display: none; gap: .85rem; }
.splash__ask p, .splash__error p { font-size: 1rem; }
.splash__ask strong { font-weight: 800; }
.splash__ask-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.splash__error-title { font-weight: 800; font-size: 1.1rem; color: var(--sp-ink); }
.splash__error details { color: var(--sp-ink-2); font-size: .86rem; }
.splash__error summary { cursor: pointer; width: fit-content; }
.splash__error code { display: block; margin-top: .4rem; padding: .5rem .65rem; border-radius: 10px; background: var(--sp-track); color: var(--sp-ink); font-size: .82rem; white-space: pre-wrap; word-break: break-word; }
.splash[data-state="confirm"] .splash__ask, .splash[data-state="error"] .splash__error { display: grid; }
.splash[data-state="confirm"] .splash__bar, .splash[data-state="confirm"] .splash__steps, .splash[data-state="confirm"] .splash__status,
.splash[data-state="error"] .splash__bar, .splash[data-state="error"] .splash__steps, .splash[data-state="error"] .splash__status { display: none; }
.splash[data-state="error"] .splash__glow, .splash[data-state="error"] .splash__scene { opacity: .35; }
.splash[data-state="error"] .splash__scene * { animation-play-state: paused !important; }
.splash__fail-mark { color: var(--sp-danger); }

/* ═══════════ Cena "piper": a onda de voz que acende com o download ═══════════ */
.sp-voice { width: min(100%, 440px); display: grid; justify-items: center; gap: 1.2rem; }
.sp-bubble { position: relative; display: inline-flex; align-items: center; min-height: 2.9rem; max-width: 100%; padding: .65rem 1.15rem; border: 1px solid var(--sp-line); border-radius: 18px; background: var(--sp-bubble); color: var(--sp-bubble-ink); font-weight: 700; font-size: 1.08rem; box-shadow: 0 12px 30px -18px rgb(0 0 0 / .5); }
.sp-bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; border: solid var(--sp-line); border-width: 0 1px 1px 0; border-radius: 0 0 4px 0; background: var(--sp-bubble); transform: translateX(-50%) rotate(45deg); }
.sp-bubble__text { min-width: 1ch; }
.sp-bubble__text::after { content: ''; display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -.18em; background: var(--sp-a); animation: sp-caret 1s steps(1) infinite; }
@keyframes sp-caret { 50% { opacity: 0; } }
.sp-wave { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100px; }
.sp-wave i { flex: 1 1 0; max-width: 9px; height: calc(var(--h) * 100%); border-radius: 99px; background: linear-gradient(180deg, var(--sp-a), var(--sp-b)); opacity: .17; transition: opacity .4s ease; }
.sp-wave i.on { opacity: 1; animation: sp-bar 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -73ms); }
.sp-wave i.edge { box-shadow: 0 0 14px 2px color-mix(in srgb, var(--sp-b) 70%, transparent); }
@keyframes sp-bar { from { transform: scaleY(.5); } to { transform: scaleY(1); } }
.splash[data-state="done"] .sp-wave i { opacity: 1; animation: sp-ripple .7s ease-out both; animation-delay: calc(var(--i) * 20ms); }
@keyframes sp-ripple { 0% { transform: scaleY(.6); } 45% { transform: scaleY(1.18); } 100% { transform: scaleY(1); } }

/* ═══════════ Cena "radio": mostrador com agulha, antena e a lâmpada NO AR ═══════════ */
.sp-radio { position: relative; width: min(100%, 400px); padding-top: 46px; }
.sp-antenna { position: absolute; right: 12%; top: 0; width: 120px; height: 62px; overflow: visible; fill: none; stroke: var(--sp-ink-2); stroke-width: 3; stroke-linecap: round; }
.sp-antenna circle.sp-ball { fill: var(--sp-needle); stroke: none; }
.sp-antenna .sp-ping { stroke: var(--sp-a); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: sp-ping 2.4s ease-out infinite; animation-delay: calc(var(--k) * .8s); }
@keyframes sp-ping { 0% { opacity: .85; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.2); } }
.sp-case { position: relative; display: grid; gap: .8rem; padding: .95rem 1rem 1rem; border: 1px solid var(--sp-line); border-radius: 26px; background: var(--sp-case); box-shadow: 0 22px 46px -26px rgb(0 0 0 / .6); }
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.sp-lamp { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .65rem; border: 1px solid var(--sp-line); border-radius: 99px; background: var(--sp-glass); color: var(--sp-ink-3); font-weight: 800; font-size: .78rem; letter-spacing: .14em; }
.sp-lamp i { position: relative; width: 11px; height: 11px; border-radius: 50%; background: var(--sp-lamp-off); }
.sp-lamp i::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(closest-side, var(--sp-lamp-on), transparent); opacity: 0; }
.splash[data-state="done"] .sp-lamp { border-color: var(--sp-lamp-on); background: var(--sp-lamp-on); color: var(--sp-lamp-ink); }
.splash[data-state="done"] .sp-lamp i { background: var(--sp-lamp-ink); }
.splash[data-state="done"] .sp-lamp i::after { animation: sp-blink 1.5s ease-in-out infinite; }
@keyframes sp-blink { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }
.sp-band { color: var(--sp-ink-3); font-weight: 800; font-size: .78rem; letter-spacing: .14em; }
.sp-dial { position: relative; height: 82px; overflow: hidden; border: 1px solid var(--sp-line); border-radius: 14px; background: var(--sp-glass); container-type: inline-size; }
.sp-tick { position: absolute; bottom: 24px; left: calc(var(--x) * 1%); width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--sp-tick); opacity: .7; }
.sp-tick.major { height: 24px; opacity: 1; }
.sp-tick-label { position: absolute; bottom: 4px; left: calc(var(--x) * 1%); transform: translateX(-50%); color: var(--sp-ink-3); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-sweep { position: absolute; inset: 0; animation: sp-sweep 2.6s ease-in-out infinite; }
@keyframes sp-sweep { 0%, 100% { transform: translateX(calc(var(--amp, 0) * -1cqw)); } 50% { transform: translateX(calc(var(--amp, 0) * 1cqw)); } }
.sp-needle { position: absolute; top: 6px; bottom: 6px; left: calc(var(--station) * 1%); width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--sp-needle); box-shadow: 0 0 10px var(--sp-needle); }
.splash[data-state="done"] .sp-sweep { animation: sp-settle .75s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes sp-settle { from { transform: translateX(3cqw); } to { transform: none; } }
.sp-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sp-grille { flex: 1; height: 26px; border-radius: 8px; background: repeating-linear-gradient(90deg, var(--sp-line) 0 3px, transparent 3px 8px); opacity: .8; }
.sp-freq { color: var(--sp-ink-3); font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; transition: color .3s ease; }
.sp-freq small { font-size: .7rem; letter-spacing: .1em; }
.splash[data-state="done"] .sp-freq { color: var(--sp-ink); }

/* ───────── Menos movimento: só a barra e o texto ───────── */
html[data-motion="reduced"] .splash__scene, html[data-motion="reduced"] .splash__glow { display: none; }
html[data-motion="reduced"] .splash *, html[data-motion="reduced"] .splash *::before, html[data-motion="reduced"] .splash *::after { animation: none !important; }
html[data-motion="reduced"] .splash { transition: opacity .15s linear; transform: none; }
html[data-motion="reduced"] .splash__fill { transition: none; }
@media (prefers-reduced-motion: reduce) {
	.splash__scene, .splash__glow { display: none; }
	.splash *, .splash *::before, .splash *::after { animation: none !important; }
	.splash { transition: opacity .15s linear; transform: none; }
	.splash__fill { transition: none; }
}
@media (max-height: 600px) { .splash__scene { display: none; } .splash__stage { gap: 1rem; } }
@media (forced-colors: active) {
	.splash__fill, .splash__dot, .sp-wave i { forced-color-adjust: none; }
	.splash__btn { border-color: ButtonText; }
}