/* Beluga: a abertura (uma beluga se banhando numa corrente de dados). A cena mora num aquário escuro nos DOIS temas (a baleia branca precisa do contraste);
   o texto em volta usa as cores do tema. Nos loops só se movem transform e opacity. As cores da cena ficam todas nas variáveis --sp-* (a paleta é a da splash
   do Beluga para Windows). A montagem está em public/js/beluga-splash.js; as peças da baleia, em views/partials/beluga-sprite-splash.eta.
   Tudo que depende do ciclo da baleia (5,2 s) usa o mesmo --sp-cycle e o mesmo --sp-off, para o jato e as gotas caírem na hora em que ela emerge e mergulha. */

.splash {
	--sp-air: #0a1411;
	--sp-shallow: #15664a;
	--sp-sea: #0b3326;
	--sp-deep: #060908;
	--sp-glow: #03f96e;
	--sp-ink: #e8f1ec;
	--sp-mask: #000;
	--sp-line: 30%; /* onde fica a superfície da água, de cima para baixo */
	--sp-cycle: 5.2s;
	--sp-off: -1.55s; /* adianta o ciclo: nos primeiros 2 s ela já emerge */
	--sp-p: 0;
	padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
	overflow: hidden;
	background: radial-gradient(70% 55% at 50% 34%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--bg);
	cursor: pointer;
	transition: opacity var(--sp-exit, 0.52s) ease;
}
.splash.is-leaving { opacity: 0; pointer-events: none; }

.sp { display: grid; justify-items: center; gap: 16px; width: 100%; max-width: 720px; text-align: center; animation: sp-in 0.6s ease-out both; }
@keyframes sp-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }

/* ───────── o aquário ───────── */
.sp-tank { position: relative; isolation: isolate; overflow: hidden; container-type: size; width: min(100%, 680px, calc((100dvh - 230px) * 1.6)); min-width: min(100%, 260px); aspect-ratio: 8 / 5; border-radius: 26px; background: var(--sp-air); border: 1px solid color-mix(in srgb, var(--sp-glow) 30%, transparent); box-shadow: var(--shadow), 0 0 60px -22px color-mix(in srgb, var(--sp-glow) 55%, transparent); }
.sp-layer, .sp-sky, .sp-dive { position: absolute; inset: 0; }
.sp-layer { pointer-events: none; }
.sp-sky { background: linear-gradient(180deg, var(--sp-air) 0%, color-mix(in srgb, var(--sp-shallow) 26%, var(--sp-air)) 100%); }
.sp-water { position: absolute; left: 0; right: 0; top: var(--sp-line); bottom: 0; background: linear-gradient(180deg, var(--sp-shallow) 0%, var(--sp-sea) 38%, var(--sp-deep) 100%); }
.sp-tint { position: absolute; left: 0; right: 0; top: var(--sp-line); bottom: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--sp-shallow) 10%, transparent), color-mix(in srgb, var(--sp-deep) 30%, transparent)); }
.sp-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 42%, transparent 55%, color-mix(in srgb, var(--sp-deep) 78%, transparent) 100%); }

/* a superfície: duas ondas que deslizam em sentidos contrários (cada svg tem o dobro da largura; metade dele é um número inteiro de ondas) */
.sp-wave { position: absolute; left: 0; width: 200%; height: 2.8cqw; top: calc(var(--sp-line) - 1.4cqw); animation: sp-wave 8s linear infinite; }
.sp-wave--back { opacity: 0.55; top: calc(var(--sp-line) - 1.9cqw); animation-duration: 13s; animation-direction: reverse; }
.sp-wave__fill { fill: var(--sp-shallow); }
.sp-wave__line { fill: none; stroke: color-mix(in srgb, var(--sp-glow) 60%, transparent); stroke-width: 1.3; }
@keyframes sp-wave { to { transform: translateX(-50%); } }

/* raios de luz que descem da superfície */
.sp-ray { position: absolute; top: var(--sp-line); left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); height: 64%; transform: skewX(-16deg); transform-origin: 50% 0; opacity: 0.4; background: linear-gradient(180deg, color-mix(in srgb, var(--sp-glow) 30%, transparent), transparent); animation: sp-ray 7s ease-in-out infinite alternate; animation-delay: calc(var(--d) * 1s); }
@keyframes sp-ray { from { opacity: 0.18; } to { opacity: 0.55; } }

/* ───────── os dados ───────── */
.sp-glyph { position: absolute; font: 700 max(9px, calc(var(--s, 2) * 1cqw)) / 1 var(--mono); white-space: nowrap; color: var(--sp-glow); opacity: var(--o, 0.8); text-shadow: 0 0 0.9cqw color-mix(in srgb, var(--sp-glow) 55%, transparent); }
.sp-glyph[data-tone='ink'] { color: var(--sp-ink); }

/* longe: devagar para a esquerda (o movimento mais lento). O estado parado é a posição --x; com movimento, o ciclo começa fora, à direita. */
.sp-far { left: 102cqw; top: calc(var(--y) * 1%); opacity: var(--o); transform: translateX(calc((var(--x) - 102) * 1cqw)); animation: sp-drift calc(var(--t) * 1s) linear infinite; animation-delay: calc(var(--d) * 1s); }
.sp-chip { position: absolute; width: calc(var(--w) * 1cqw); height: 1cqw; border-radius: 0.4cqw; background: var(--sp-glow); }
@keyframes sp-drift { from { transform: translateX(0); } to { transform: translateX(-112cqw); } }

/* a corrente: cada ficha desliza para a esquerda (o de fora) e ondula para cima e para baixo (o de dentro) */
.sp-flow { position: absolute; left: 102cqw; top: calc(var(--y) * 1%); transform: translateX(calc((var(--x) - 102) * 1cqw)); animation: sp-drift-flow calc(var(--t) * 1s) linear infinite; animation-delay: calc(var(--d) * 1s); }
.sp-flow__item { animation: sp-wobble calc(var(--wt) * 1s) ease-in-out infinite alternate; animation-delay: calc(var(--wd) * 1s); }
@keyframes sp-drift-flow { from { transform: translateX(0); } to { transform: translateX(-116cqw); } }
@keyframes sp-wobble { from { transform: translateY(calc(var(--wob) * -1cqw)); } to { transform: translateY(calc(var(--wob) * 1cqw)); } }

/* a tabela do fundo: uma linha a mais a cada quarto do carregamento */
.sp-rowbox { position: absolute; left: 0; right: 0; bottom: calc(var(--b) * 1%); height: 2.2cqw; opacity: 0; transform: translateY(1.4cqw); transition: opacity 0.6s ease, transform 0.6s ease; }
.sp-rowbox[data-on='true'] { opacity: calc(0.82 - var(--i) * 0.17); transform: none; }
.sp-row { display: flex; gap: 1.4cqw; width: max-content; animation: sp-slide calc(var(--t) * 1s) linear infinite; }
@keyframes sp-slide { to { transform: translateX(calc(var(--period) * -1cqw)); } }
.sp-cell { flex: none; width: calc(var(--w) * 1cqw); height: 2.2cqw; border-radius: 0.6cqw; background: color-mix(in srgb, var(--sp-glow) calc(var(--a) * 100%), transparent); }
.sp-cell--hollow { background: none; box-shadow: inset 0 0 0 0.2cqw color-mix(in srgb, var(--sp-glow) 55%, transparent); }

/* plâncton de dados: sobe balançando e some perto da superfície. Parado, fica no meio da subida. */
.sp-mid { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translateY(-30cqh); animation: sp-rise calc(var(--t) * 1s) linear infinite; animation-delay: calc(var(--d) * 1s); }
@keyframes sp-rise {
	0% { transform: translate(0, 0); opacity: 0; }
	14% { opacity: var(--o); }
	50% { transform: translate(calc(var(--sway) * -0.6cqw), -31cqh); }
	84% { opacity: var(--o); }
	100% { transform: translate(calc(var(--sway) * 1cqw), -62cqh); opacity: 0; }
}
.sp-bubble { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1cqw); aspect-ratio: 1; border-radius: 50%; opacity: 0.6; border: 1px solid color-mix(in srgb, var(--sp-ink) 60%, transparent); background: color-mix(in srgb, var(--sp-ink) 12%, transparent); transform: translate(0.7cqw, -12cqh); animation: sp-bubble calc(var(--t) * 1s) ease-in infinite; animation-delay: calc(var(--d) * 1s); }
@keyframes sp-bubble { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 0.85; } 80% { opacity: 0.7; } 100% { transform: translate(1.4cqw, -34cqh); opacity: 0; } }

/* primeiro plano: manchas de luz passando rápido (o movimento mais veloz) */
.sp-blob { position: absolute; left: 102cqw; top: calc(var(--y) * 1%); width: calc(var(--w) * 1cqw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sp-glow) 22%, transparent), transparent); transform: translateX(-40cqw); animation: sp-drift-fast calc(var(--t) * 1s) linear infinite; animation-delay: calc(var(--d) * 1s); }
@keyframes sp-drift-fast { from { transform: translateX(0); } to { transform: translateX(-128cqw); } }

/* ───────── a baleia ───────── */
/* três movimentos em camadas: o surto para a frente (x), a subida e a descida (y) e a inclinação do corpo; cada um com a sua curva suave */
.sp-whale { position: absolute; isolation: isolate; left: 50%; top: 52%; width: 42cqw; height: 42cqw; margin: -19.7cqw 0 0 -20.6cqw; animation: sp-surge var(--sp-cycle) ease-in-out infinite; animation-delay: var(--sp-off); }
.sp-swim { width: 100%; height: 100%; transform: translateY(1.5cqw); animation: sp-bob var(--sp-cycle) ease-in-out infinite; animation-delay: var(--sp-off); }
.sp-pitch { width: 100%; height: 100%; transform: rotate(-4deg); animation: sp-pitch var(--sp-cycle) ease-in-out infinite; animation-delay: var(--sp-off); }
.sp-whale__art { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0.6cqw 1.4cqw color-mix(in srgb, var(--sp-deep) 60%, transparent)); }
@keyframes sp-surge { 0%, 100% { transform: translateX(-7cqw); } 55% { transform: translateX(6cqw); } }
@keyframes sp-bob { 0% { transform: translateY(5.5cqw); } 20% { transform: translateY(7cqw); } 60% { transform: translateY(-17.5cqw); } 100% { transform: translateY(5.5cqw); } }
@keyframes sp-pitch { 0% { transform: rotate(4deg); } 20% { transform: rotate(0deg); } 38% { transform: rotate(-17deg); } 56% { transform: rotate(-21deg); } 62% { transform: rotate(-5deg); } 70% { transform: rotate(14deg); } 82% { transform: rotate(22deg); } 100% { transform: rotate(4deg); } }
/* a luz verde em volta dela cresce com o andamento do carregamento */
.sp-whale::before { content: ''; position: absolute; z-index: -1; inset: -30% -22%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sp-glow) 46%, transparent), transparent); opacity: calc(0.35 + var(--sp-p) * 0.65); transition: opacity 0.4s ease; animation: sp-breathe 3.4s ease-in-out infinite alternate; }
@keyframes sp-breathe { from { transform: scale(0.94); } to { transform: scale(1.06); } }
.sp-tail { transform-origin: 15px 38px; transform: rotate(-3deg); animation: sp-tail 1.3s ease-in-out infinite; }
.sp-fin { transform-origin: 63px 60px; animation: sp-fin 1.6s ease-in-out infinite; }
.sp-eye { transform-origin: 86px 52px; animation: sp-blink 4.4s ease-in-out infinite; }
@keyframes sp-tail { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(10deg); } }
@keyframes sp-fin { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(-11deg); } }
@keyframes sp-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }

/* ───────── o jato e as gotas (no ritmo do ciclo: emerge por volta dos 52% e mergulha por volta dos 68%) ───────── */
.sp-fx { position: absolute; opacity: 0; animation: var(--sp-cycle) ease-in infinite; animation-delay: calc(var(--sp-off) + var(--d, 0) * 1s); }
.sp-fx--spout { left: 67.5%; top: 22%; animation-name: sp-spout; }
.sp-fx--drop { left: calc(var(--x) * 1%); top: var(--sp-line); width: calc(var(--w) * 1cqw); aspect-ratio: 1; border-radius: 50%; background: var(--sp-ink); box-shadow: 0 0 0.8cqw color-mix(in srgb, var(--sp-glow) 70%, transparent); }
.sp-fx--up { animation-name: sp-drop-up; }
.sp-fx--down { animation-name: sp-drop-down; }
@keyframes sp-spout {
	0%, 54% { transform: translate(0, 0) scale(0.5); opacity: 0; animation-timing-function: ease-out; }
	55% { opacity: 1; animation-timing-function: ease-out; }
	60% { transform: translate(calc(var(--dx) * 0.6cqw), calc(var(--h) * -1cqw)) scale(1); opacity: 1; animation-timing-function: ease-in; }
	71% { transform: translate(calc(var(--dx) * 1cqw), calc(var(--fall) * 0.45cqw)) scale(0.8); opacity: 0; }
	100% { transform: translate(calc(var(--dx) * 1cqw), calc(var(--fall) * 0.45cqw)) scale(0.8); opacity: 0; }
}
@keyframes sp-drop-up {
	0%, 52% { transform: translate(0, 0) scale(0.4); opacity: 0; }
	53% { opacity: 1; animation-timing-function: ease-out; }
	57% { transform: translate(calc(var(--dx) * 0.6cqw), calc(var(--h) * -1cqw)) scale(1); opacity: 1; animation-timing-function: ease-in; }
	64% { transform: translate(calc(var(--dx) * 1cqw), calc(var(--fall) * 0.3cqw)) scale(0.7); opacity: 0; }
	100% { opacity: 0; }
}
@keyframes sp-drop-down {
	0%, 67% { transform: translate(0, 0) scale(0.4); opacity: 0; }
	68% { opacity: 1; animation-timing-function: ease-out; }
	72% { transform: translate(calc(var(--dx) * 0.6cqw), calc(var(--h) * -1cqw)) scale(1); opacity: 1; animation-timing-function: ease-in; }
	80% { transform: translate(calc(var(--dx) * 1cqw), calc(var(--fall) * 0.3cqw)) scale(0.7); opacity: 0; }
	100% { opacity: 0; }
}
.sp-jet { position: absolute; left: 67.5%; top: 22%; width: 0.9cqw; height: 9cqw; margin: -9cqw 0 0 -0.45cqw; border-radius: 1cqw; background: linear-gradient(0deg, var(--sp-ink), transparent); transform-origin: 50% 100%; transform: scaleY(0); opacity: 0; animation: sp-jet var(--sp-cycle) ease-out infinite; animation-delay: var(--sp-off); }
@keyframes sp-jet { 0%, 54% { transform: scaleY(0); opacity: 0; } 56% { opacity: 0.9; } 59% { transform: scaleY(1); opacity: 0.8; } 64%, 100% { transform: scaleY(0.6); opacity: 0; } }
.sp-ring { position: absolute; top: var(--sp-line); width: 14cqw; height: 3cqw; margin: -1.5cqw 0 0 -7cqw; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--sp-glow) 70%, transparent); opacity: 0; animation: var(--sp-cycle) ease-out infinite; animation-delay: var(--sp-off); }
.sp-ring--up { left: 62%; animation-name: sp-ring-up; }
.sp-ring--down { left: 71%; animation-name: sp-ring-down; }
@keyframes sp-ring-up { 0%, 51% { transform: scale(0.3); opacity: 0; } 53% { opacity: 0.8; } 66%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes sp-ring-down { 0%, 67% { transform: scale(0.3); opacity: 0; } 69% { opacity: 0.8; } 84%, 100% { transform: scale(1.5); opacity: 0; } }

/* a saída: ela mergulha e some, o aquário se desfaz e o fundo se dissolve */
.splash.is-leaving .sp-dive { animation: sp-exit var(--sp-exit, 0.52s) ease-in forwards; }
.splash.is-leaving .sp-tank { transform: scale(1.025); transition: transform var(--sp-exit, 0.52s) ease-in; }
@keyframes sp-exit { to { transform: translate(2cqw, 22cqw) rotate(14deg); opacity: 0; } }

/* ───────── o texto e o andamento ───────── */
.sp-text { display: grid; justify-items: center; gap: 6px; width: 100%; }
.sp-name { font: 800 34px/1.05 var(--sans); letter-spacing: -0.02em; color: var(--text); }
.sp-sub { font-size: 14px; color: var(--muted); }
/* a barra é uma fileira de células de tabela: a máscara recorta o preenchimento em quadradinhos */
.sp-bar { position: relative; width: min(100%, 300px); height: 8px; margin: 8px 0 2px; border-radius: 3px; overflow: hidden; background: var(--line-strong); -webkit-mask: repeating-linear-gradient(90deg, var(--sp-mask) 0 12px, transparent 12px 15px); mask: repeating-linear-gradient(90deg, var(--sp-mask) 0 12px, transparent 12px 15px); }
.sp-bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--sp-p)); background: linear-gradient(90deg, var(--accent-ink), var(--accent)); }
.sp-label { min-height: 1.5em; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sp-pct { margin-left: 4px; color: var(--accent-ink); }
.sp-credit { margin-top: 4px; font-size: 12px; color: var(--muted); }

@media (max-width: 480px) {
	.sp-name { font-size: 30px; }
}

/* ───────── movimento reduzido: a cena fica parada (a baleia no meio da água, as fichas espalhadas) e só a barra anda; a saída é um esmaecer de ~400 ms ───────── */
@media (prefers-reduced-motion: reduce) {
	.splash *, .splash *::before { animation: none !important; }
	.splash, .splash .sp-rowbox { transition-duration: 0.4s !important; }
	.splash.is-leaving .sp-tank { transform: none; transition: none !important; }
	.sp-flow { display: none; }
}
html[data-motion='reduced'] .splash *, html[data-motion='reduced'] .splash *::before { animation: none !important; }
html[data-motion='reduced'] .splash, html[data-motion='reduced'] .splash .sp-rowbox { transition-duration: 0.4s !important; }
html[data-motion='reduced'] .splash.is-leaving .sp-tank { transform: none; transition: none !important; }
html[data-motion='reduced'] .sp-flow { display: none; }