/* theVacilos — tela de abertura do app instalado (splash)                    [2026-10-13 app]
 * Markup: pags/add-ons/app-splash.php · lógica: lib/config/js/tv/tv-splash.js · imagens: lib/config/img/splash/
 * Novo visual (arquivos/novo-visual/style-guide.md): Alien BRANCO sozinho no preto, olhos vazados,
 * sem anel/aura/sombra colorida; efeito "glitch ajustado" — fatias do próprio Alien deslocadas para o lado,
 * bordas verde/roxo só no instante da rajada, linhas de TV e riscos horizontais no fundo.
 * • Só aparece com <html data-tv-splash="1"> (app instalado, 1ª página da abertura, ou #tv-splash para testar).
 * • Fundo #121217 = background_color do manifest.json e cor da borda do ícone glitch: o splash nativo do Android
 *   (ícone no fundo) passa para este sem "piscar". Em repouso o Alien fica igual ao ícone (bordas verde/roxo).
 * • Só anima transform/opacity/clip-path; "reduzir movimento" desliga os laços e o glitch.
 * • Trava de segurança: se o JS falhar, o próprio CSS some com a tela depois de 9 s.
 */
html[data-tv-splash="1"] #tv-splash[hidden] { display: flex !important; }   /* vence o [hidden]{display:none!important} do Bootstrap */
.tv-splash {
	--tvsp-branco: #f2f2f6; --tvsp-verde: #3ddc84; --tvsp-roxo: #8b6cf0;
	position: fixed; inset: 0; z-index: 2147483000;
	display: flex; align-items: center; justify-content: center;
	background: #121217; color: var(--tvsp-branco); color-scheme: dark;
	touch-action: none; -webkit-user-select: none; user-select: none; overflow: hidden;
	transition: opacity .42s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .45s;
	animation: tvsp-trava .4s ease 9s forwards;
}

/* fundo: linhas de TV, riscos do glitch e vinheta escura */
.tv-splash-tv {
	position: absolute; inset: -6px 0 0; z-index: 0; pointer-events: none;
	background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .028) 0 1px, transparent 1px 3px);
	animation: tvsp-tv 6s linear infinite;
}
.tv-splash-vinheta {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: radial-gradient(ellipse 75% 60% at 50% 46%, transparent 45%, rgba(0, 0, 0, .3) 100%);
}
.tv-splash-risco {
	position: absolute; left: 0; z-index: 0; height: 1px; border-radius: 1px; pointer-events: none;
	opacity: 0; animation: tvsp-risco 4.8s ease-in-out infinite;
}
.tvsp-r1 { top: 12%; left: 8%;  width: 64px; background: rgba(139, 108, 240, .55); animation-delay: -.4s; }
.tvsp-r2 { top: 21%; left: 70%; width: 88px; background: rgba(255, 255, 255, .22); animation-delay: -2.1s; animation-duration: 5.6s; }
.tvsp-r3 { top: 33%; left: 14%; width: 46px; background: rgba(61, 220, 132, .45); animation-delay: -3.3s; }
.tvsp-r4 { top: 61%; left: 62%; width: 72px; background: rgba(61, 220, 132, .4);  animation-delay: -1.2s; animation-duration: 5.2s; }
.tvsp-r5 { top: 72%; left: 10%; width: 96px; background: rgba(255, 255, 255, .18); animation-delay: -2.8s; }
.tvsp-r6 { top: 86%; left: 44%; width: 40px; background: rgba(139, 108, 240, .5);  animation-delay: -4.1s; animation-duration: 6s; }

/* logo em destaque */
.tv-splash-centro {
	position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	animation: tvsp-entra .7s cubic-bezier(.2, .7, .2, 1) both;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.tv-splash-logo { position: relative; width: 148px; height: 153px; animation: tvsp-respira 4s ease-in-out infinite; }
/* cada camada é o alien-branco.svg (lib/config/img/splash/) usado como máscara e pintado pela cor da camada */
.tvsp-camada {
	position: absolute; inset: 0; background: var(--tvsp-branco);
	-webkit-mask: url('../../img/splash/alien-branco.svg') center / 100% 100% no-repeat;
	        mask: url('../../img/splash/alien-branco.svg') center / 100% 100% no-repeat;
}
.tvsp-verde, .tvsp-roxo { opacity: 1; transform: translateX(var(--tvsp-dx)); animation: tvsp-rgb 3.6s linear 1s infinite; }
.tvsp-verde { background: var(--tvsp-verde); --tvsp-dx: -3px; }
.tvsp-roxo  { background: var(--tvsp-roxo);  --tvsp-dx: 3px; }
/* três fatias que juntas formam o Alien inteiro (com 0,5% de sobreposição para não aparecer emenda);
   na rajada a do meio corre para o lado e onde ela sai aparece o fundo — o "glitch ajustado" do novo visual */
.tvsp-fatia { animation: 3.6s linear 1s infinite; }
.tvsp-fa { clip-path: inset(0 0 59.5% 0);     animation-name: tvsp-fa; }
.tvsp-fb { clip-path: inset(40% 0 47% 0);     animation-name: tvsp-fb; }
.tvsp-fc { clip-path: inset(52.5% 0 0 0);     animation-name: tvsp-fc; }

/* carregamento */
.tv-splash-barra {
	position: relative; width: 120px; height: 2px; margin-top: 44px; border-radius: 99px; overflow: hidden;
	background: rgba(255, 255, 255, .09);
	transition: opacity .2s ease;
}
.tv-splash-barra-fill {
	position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%;
	background: var(--tvsp-branco);
	transform: scaleX(var(--tvsp-p, .05));
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.tv-splash-barra-fill::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent, rgba(9, 9, 12, .55), transparent);
	transform: translateX(-100%); animation: tvsp-reflexo 1.3s ease-in-out infinite;
}

/* saída: o Alien avança um pouco e a tela se dissolve no site já desenhado por baixo */
.tv-splash.tv-splash-saindo { opacity: 0; visibility: hidden; pointer-events: none; }
.tv-splash-saindo .tv-splash-centro { transform: scale(1.12); }
.tv-splash-saindo .tv-splash-barra { opacity: 0; }

@keyframes tvsp-entra   { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes tvsp-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes tvsp-tv      { to { transform: translateY(6px); } }
@keyframes tvsp-risco   { 0%, 100% { opacity: 0; transform: translateX(-14px); } 45%, 55% { opacity: 1; } 50% { transform: translateX(0); } 99% { transform: translateX(14px); } }
@keyframes tvsp-reflexo { to { transform: translateX(100%); } }

/* rajadas: ~30% (altura dos olhos) e ~72% (queixo) do ciclo de 3,6 s; fora delas o Alien fica inteiro e parado */
@keyframes tvsp-fa {
	0%, 29.9%  { clip-path: inset(0 0 59.5% 0); transform: none; }
	30%        { clip-path: inset(0 0 59.5% 0); transform: translateX(-2px); }
	31.6%      { clip-path: inset(0 0 59.5% 0); transform: translateX(1px); }
	33%, 33.1% { clip-path: inset(0 0 59.5% 0); transform: none; }
	33.2%, 71.9% { clip-path: inset(0 0 31.5% 0); transform: none; }
	72%        { clip-path: inset(0 0 31.5% 0); transform: translateX(2px); }
	74%, 100%  { clip-path: inset(0 0 31.5% 0); transform: none; }
}
@keyframes tvsp-fb {
	0%, 29.9%  { clip-path: inset(40% 0 47% 0); transform: none; }
	30%        { clip-path: inset(40% 0 47% 0); transform: translateX(9px); }
	31.6%      { clip-path: inset(40% 0 47% 0); transform: translateX(-6px); }
	33%, 33.1% { clip-path: inset(40% 0 47% 0); transform: none; }
	33.2%, 71.9% { clip-path: inset(68% 0 24% 0); transform: none; }
	72%        { clip-path: inset(68% 0 24% 0); transform: translateX(-8px); }
	73%        { clip-path: inset(68% 0 24% 0); transform: translateX(5px); }
	74%, 100%  { clip-path: inset(68% 0 24% 0); transform: none; }
}
@keyframes tvsp-fc {
	0%, 29.9%  { clip-path: inset(52.5% 0 0 0); transform: none; }
	30%        { clip-path: inset(52.5% 0 0 0); transform: translateX(3px); }
	31.6%      { clip-path: inset(52.5% 0 0 0); transform: none; }
	33%, 33.1% { clip-path: inset(52.5% 0 0 0); transform: none; }
	33.2%, 100% { clip-path: inset(75.5% 0 0 0); transform: none; }
}
@keyframes tvsp-rgb {
	0%, 29.9%, 33.2%, 71.9%, 74.2%, 100% { opacity: 1; transform: translateX(var(--tvsp-dx)); }
	30%, 33% { opacity: 1; transform: translateX(calc(var(--tvsp-dx) * 2.2)); }
	72%, 74% { opacity: 1; transform: translateX(calc(var(--tvsp-dx) * -1.4)); }
}
@keyframes tvsp-trava { to { opacity: 0; visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
	.tv-splash *, .tv-splash *::after { animation: none !important; }
	.tv-splash-risco { opacity: .6; }
	.tv-splash-saindo .tv-splash-centro { transform: none; }
}