.logo { --marca-tinta: 0.9292; --marca-topo: 0.0146; --marca-lado: 0.051; }
:root {
	--traco-cheio: rgba(15, 23, 42, 0.11);
	--traco-forte: rgba(15, 23, 42, 0.22);
	--traco-fraco: rgba(15, 23, 42, 0.14);
	--peca:        rgba(15, 23, 42, 0.18);
	--janela:      rgba(255, 255, 255, 0.62);
	--estrela:     rgba(241, 245, 249, 0);
	--serie:       rgba(37, 99, 235, 0.34);
	--serie-ponto: rgba(37, 99, 235, 0.38);
}
[data-periodo="noite"] {
	--traco-cheio: rgba(226, 232, 240, 0.08);
	--traco-forte: rgba(226, 232, 240, 0.22);
	--traco-fraco: rgba(226, 232, 240, 0.13);
	--peca:        rgba(226, 232, 240, 0.18);
	--janela:      rgba(253, 224, 71, 0.55);
	--estrela:     rgba(241, 245, 249, 0.85);
	--serie:       rgba(191, 219, 254, 0.42);
	--serie-ponto: var(--estrela);
}
.cena g, .cena polyline, .cena path, .cena rect, .cena circle { vector-effect: non-scaling-stroke; }
.cena rect, .cena circle { fill: var(--traco-cheio); }

.cena .astro-sol { fill: url(#g-sol); }
.cena .astro-lua { fill: url(#g-lua); }
.cena .astro-brilho.astro-dia   { fill: url(#g-sol-brilho); }
.cena .astro-brilho.astro-noite { fill: url(#g-lua-brilho); }
.cena .astro-noite { display: none; }
[data-periodo="noite"] .cena .astro-dia   { display: none; }
[data-periodo="noite"] .cena .astro-noite { display: block; }
.cena .cena-estrelas circle { fill: var(--estrela); opacity: 0; }
[data-periodo="noite"] .cena .cena-estrelas circle { opacity: 1; }

[data-periodo="noite"] .cena .cena-astral circle {
	animation: pisca 5s ease-in-out infinite alternate;
}
[data-periodo="noite"] .cena .cena-astral circle:nth-child(7n+1) { animation-delay: 0s; }
[data-periodo="noite"] .cena .cena-astral circle:nth-child(7n+2) { animation-delay: 0.6s; }
[data-periodo="noite"] .cena .cena-astral circle:nth-child(7n+3) { animation-delay: 1.3s; }
[data-periodo="noite"] .cena .cena-astral circle:nth-child(7n+4) { animation-delay: 2.1s; }
[data-periodo="noite"] .cena .cena-astral circle:nth-child(7n+5) { animation-delay: 2.9s; }
[data-periodo="noite"] .cena .cena-astral circle:nth-child(7n+6) { animation-delay: 3.6s; }
[data-periodo="noite"] .cena .cena-astral circle:nth-child(7n) { animation-delay: 4.4s; }
[data-periodo="noite"] .cena .cena-astral circle:nth-child(5n+1) { animation-duration: 3.6s; }
[data-periodo="noite"] .cena .cena-astral circle:nth-child(5n+2) { animation-duration: 4.4s; }
[data-periodo="noite"] .cena .cena-astral circle:nth-child(5n+3) { animation-duration: 5.2s; }
[data-periodo="noite"] .cena .cena-astral circle:nth-child(5n+4) { animation-duration: 6.1s; }
[data-periodo="noite"] .cena .cena-astral circle:nth-child(5n) { animation-duration: 7s; }
@keyframes pisca { from { opacity: 0.3; } to { opacity: 1; } }
.cena polyline, .cena path { fill: none; stroke: rgba(15, 23, 42, 0.10); stroke-width: 2; }
.cena-janelas rect { fill: var(--janela); }
.cena-serie polyline {
	stroke: var(--serie); stroke-width: 3;
	stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 1450; stroke-dashoffset: 1450;
	animation: traca 9s ease-in-out 0.4s infinite;
}

.cena .cena-pontos circle { fill: var(--serie-ponto); }

.cena-fundo  { animation: anda-devagar 48s ease-in-out infinite alternate; }
.cena-frente { animation: anda-mais   34s ease-in-out infinite alternate; }

.cena .cena-bruma { fill: url(#g-bruma); }
.cena .cena-nuvens ellipse { fill: rgba(255, 255, 255, 0.60); }
.cena-nuvem-a { animation: vaga 96s ease-in-out infinite alternate; }
.cena-nuvem-b { animation: vaga 132s ease-in-out infinite alternate reverse; }
.cena-nuvem-c { animation: vaga 76s ease-in-out infinite alternate; }
@keyframes vaga { from { transform: translateX(-38px); } to { transform: translateX(46px); } }
[data-periodo="noite"] .cena .cena-bruma,
[data-periodo="noite"] .cena .cena-nuvens { display: none; }
.cena .grua-t { stroke: var(--traco-forte); stroke-width: 2.5; stroke-linecap: round; }
.cena .grua-l { stroke: var(--traco-fraco); stroke-width: 1.4; }
.cena .grua-p { fill: var(--peca); stroke: none; }

.cena-trole    { animation: corre 19s ease-in-out infinite alternate; }

.cena-cabo   { transform-box: fill-box; transform-origin: center top;
               animation: estica 7s ease-in-out infinite alternate; }
.cena-moitao { animation: desce 7s ease-in-out infinite alternate; }

.cena-elevador { animation: sobe 29s ease-in-out infinite alternate; }
@keyframes traca {
	0%   { stroke-dashoffset: 1450; }
	55%  { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; opacity: 0.25; }
}
@keyframes anda-devagar { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
@keyframes anda-mais    { from { transform: translateX(16px); }  to { transform: translateX(-16px); } }
@keyframes corre { from { transform: translate(1120px, 439px); } to { transform: translate(1330px, 439px); } }
@keyframes estica { from { transform: scaleY(1); } to { transform: scaleY(3.35); } }
@keyframes desce  { from { transform: translateY(0); } to { transform: translateY(226px); } }
@keyframes sobe  { from { transform: translateY(0); } to { transform: translateY(-306px); } }
@media (prefers-reduced-motion: reduce) {
	.cena-fundo, .cena-frente, .cena-trole, .cena-cabo, .cena-moitao, .cena-elevador { animation: none; }
	.cena-astral circle, .cena-nuvens g { animation: none; }
	.cena-trole { transform: translate(1230px, 439px); }
	.cena-serie polyline { animation: none; stroke-dashoffset: 0; }
}
