/* ==========================================================================
   fieldbox desenhada em código (hero do site)
   1) montagem: lados, frente, topo, arestas de alumínio, cantos, rodas, logótipos
   2) depois "a andar": rodas a girar, caixa a balançar, linhas de velocidade
   ========================================================================== */
.fx-wrap {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

/* No modo claro do site, o chão fica mais suave */
html:not(.dark) .fx-box .fx-shadow { opacity: 0.6; }

.fx-box {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Todas as peças começam escondidas e entram em sequência */
.fx-box .fx-shadow,
.fx-box .fx-left,
.fx-box .fx-front,
.fx-box .fx-top,
.fx-box .fx-corners circle,
.fx-box .fx-wheel,
.fx-box .fx-logos {
	opacity: 0;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fx-box .fx-shadow { animation: fx-fade 0.6s 0.1s forwards; }
.fx-box .fx-left { animation: fx-from-left 0.7s 0.2s forwards cubic-bezier(0.2, 0.8, 0.2, 1); }
.fx-box .fx-front { animation: fx-from-right 0.7s 0.45s forwards cubic-bezier(0.2, 0.8, 0.2, 1); }
.fx-box .fx-top { animation: fx-from-top 0.7s 0.7s forwards cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Arestas de alumínio desenham-se */
.fx-box .fx-edges line {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: fx-draw 0.45s forwards ease-out;
	animation-delay: calc(1s + var(--i) * 0.06s);
}

/* Cantos aparecem com um pequeno salto */
.fx-box .fx-corners circle {
	transform-box: fill-box;
	transform-origin: center;
	animation: fx-pop 0.4s forwards cubic-bezier(0.3, 1.6, 0.5, 1);
	animation-delay: calc(1.45s + var(--i) * 0.05s);
}

/* Rodas caem para o lugar */
.fx-box .fx-wheel { animation: fx-drop 0.5s forwards cubic-bezier(0.3, 1.4, 0.5, 1); animation-delay: calc(var(--d) + 0.55s); }

/* Logótipos acendem */
.fx-box .fx-logos { animation: fx-glow 0.8s 2.15s forwards ease-out; }

/* ---------- Depois de montada: a andar ---------- */
.fx-box .fx-drive { animation: fx-bob 0.42s 2.9s ease-in-out infinite; }

.fx-box .fx-spin {
	transform-box: fill-box;
	transform-origin: center;
	animation: fx-spin 0.45s 2.9s linear infinite;
}

.fx-box .fx-speed line {
	stroke: #87e64b;
	stroke-width: 3;
	opacity: 0;
	animation: fx-speed 0.9s linear infinite;
	animation-delay: calc(2.9s + var(--s) * 0.22s);
}

.fx-box .fx-shadow { transform-box: fill-box; transform-origin: center; }
.fx-box.is-driving .fx-shadow { animation: fx-fade 0.6s 0.1s forwards, fx-shadow 0.42s 2.9s ease-in-out infinite; }

@keyframes fx-fade { to { opacity: 1; } }
@keyframes fx-from-left { from { opacity: 0; transform: translate(-70px, 30px); } to { opacity: 1; transform: none; } }
@keyframes fx-from-right { from { opacity: 0; transform: translate(70px, 30px); } to { opacity: 1; transform: none; } }
@keyframes fx-from-top { from { opacity: 0; transform: translateY(-80px); } to { opacity: 1; transform: none; } }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes fx-drop { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
@keyframes fx-glow {
	0% { opacity: 0; filter: drop-shadow(0 0 0 rgba(135, 230, 75, 0)); }
	60% { opacity: 1; filter: drop-shadow(0 0 10px rgba(135, 230, 75, 0.9)); }
	100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(135, 230, 75, 0)); }
}
@keyframes fx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-speed {
	0% { opacity: 0; transform: translateX(60px); }
	30% { opacity: 0.9; }
	100% { opacity: 0; transform: translateX(-120px); }
}
@keyframes fx-shadow { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.96); } }

/* Quem prefere menos movimento: caixa já montada e parada */
@media (prefers-reduced-motion: reduce) {
	.fx-box *, .fx-box { animation: none !important; }
	.fx-box .fx-shadow, .fx-box .fx-left, .fx-box .fx-front, .fx-box .fx-top,
	.fx-box .fx-corners circle, .fx-box .fx-wheel, .fx-box .fx-logos { opacity: 1; }
	.fx-box .fx-edges line { stroke-dashoffset: 0; }
	.fx-box .fx-speed { display: none; }
}