<!doctype html>
<html lang="pt">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="robots" content="noindex, nofollow">
	<meta name="theme-color" content="#f6f7f9">

	<title>Estamos chegando</title>

	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap" rel="stylesheet">

	<style>
	:root {
		--bg: #f6f7f9;
		--fg: #16181f;
		--muted: #6b7280;
		--line: rgba(22, 24, 31, 0.12);
		--glow: rgba(99, 132, 255, 0.14);
	}

	* { box-sizing: border-box; margin: 0; padding: 0; }

	body {
		min-height: 100dvh;
		display: flex;
		flex-direction: column;
		padding: 0 24px 24px;
		font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		color: var(--fg);
		background: var(--bg);
		-webkit-font-smoothing: antialiased;
		overflow: hidden;
	}

	/* One radial gradient drifting behind the content: transform and opacity
	   only, nothing that forces a repaint on every frame */
	.glow {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 760px;
		height: 760px;
		margin: -380px 0 0 -380px;
		background: radial-gradient(circle, var(--glow), transparent 62%);
		pointer-events: none;
		animation: drift 14s ease-in-out infinite;
	}

	@keyframes drift {
		0%, 100% { transform: translate3d(-6%, -4%, 0) scale(1); opacity: 0.75; }
		50%      { transform: translate3d(6%, 4%, 0) scale(1.12); opacity: 1; }
	}

	h1 {
		font-size: 21px;
		font-weight: 700;
		line-height: 1.35;
		letter-spacing: -0.02em;
		text-wrap: balance;
	}

	p {
		margin-top: 12px;
		font-size: 15px;
		line-height: 1.6;
		color: var(--muted);
		text-wrap: balance;
	}

	/* Card layout */
	/* The message floats in whatever room the player leaves */
	main { margin: auto; }

	.card {
		position: relative;
		width: 100%;
		max-width: 560px;
		padding: 46px 38px 40px;
		text-align: center;
		background: #ffffff;
		border: 1px solid var(--line);
		border-radius: 18px;
	}

	.mark {
		position: relative;
		display: grid;
		place-items: center;
		width: 78px;
		height: 78px;
		margin: 0 auto 26px;
		color: var(--fg);
		background: rgba(22, 24, 31, 0.04);
		border: 1px solid var(--line);
		border-radius: 50%;
	}

	.mark svg { width: 32px; height: 32px; }

	/* Two rings leaving the icon, staggered so the pulse never stops */
	.mark::before,
	.mark::after {
		content: "";
		position: absolute;
		inset: -1px;
		border: 1px solid var(--line);
		border-radius: 50%;
		animation: pulse 3.4s ease-out infinite;
	}

	.mark::after { animation-delay: 1.7s; }

	@keyframes pulse {
		0%   { transform: scale(1); opacity: 0.9; }
		100% { transform: scale(1.9); opacity: 0; }
	}

	/* Bare layout: no box, the page itself holds the message */
	.bare {
		position: relative;
		width: 100%;
		max-width: 620px;
		text-align: center;
	}

	.bare svg {
		width: 118px;
		height: 118px;
		margin: 0 auto;
		color: var(--fg);
		stroke-width: 1.1;
	}

	.bare h1 { margin-top: 26px; font-size: 34px; letter-spacing: -0.035em; }
	.bare p { margin-top: 14px; font-size: 16px; }

	/* Five bars keeping time under the radio: scaleY only, no layout work */
	.eq {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		gap: 5px;
		height: 20px;
		margin-top: 16px;
	}

	.eq i {
		width: 4px;
		height: 100%;
		background: var(--muted);
		border-radius: 2px;
		opacity: 0.55;
		transform-origin: bottom;
		animation: eq 1.1s ease-in-out infinite;
	}

	.eq i:nth-child(2) { animation-delay: 0.15s; }
	.eq i:nth-child(3) { animation-delay: 0.3s; }
	.eq i:nth-child(4) { animation-delay: 0.45s; }
	.eq i:nth-child(5) { animation-delay: 0.6s; }

	@keyframes eq {
		0%, 100% { transform: scaleY(0.3); }
		50%      { transform: scaleY(1); }
	}

	/* Coming soon layout: dotted grid panning behind a broadcast tower, so it
	   reads nothing like the suspended or maintenance screens */
	.soon {
		position: relative;
		width: 100%;
		max-width: 620px;
		text-align: center;
	}

	.grid {
		position: fixed;
		top: -25%;
		left: -25%;
		width: 150%;
		height: 150%;
		background-image: radial-gradient(rgba(22, 24, 31, 0.16) 1.2px, transparent 1.2px);
		background-size: 26px 26px;
		-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 5%, transparent 62%);
		mask-image: radial-gradient(circle at 50% 50%, #000 5%, transparent 62%);
		pointer-events: none;
		animation: pan 26s linear infinite;
	}

	@keyframes pan {
		0%   { transform: translate3d(0, 0, 0); }
		100% { transform: translate3d(26px, 26px, 0); }
	}

	.soon svg {
		width: 128px;
		height: 128px;
		margin: 0 auto;
		color: var(--fg);
		stroke-width: 1.1;
	}

	/* Signal leaving the antenna, and the dial breathing along with it */
	.soon .wave-1 { animation: wave 2.4s ease-in-out infinite; }
	.soon .wave-2 { animation: wave 2.4s ease-in-out infinite 0.4s; }

	@keyframes wave {
		0%, 100% { opacity: 0.12; }
		50%      { opacity: 1; }
	}

	.soon .dial {
		transform-box: fill-box;
		transform-origin: center;
		animation: dial 2.4s ease-in-out infinite;
	}

	@keyframes dial {
		0%, 100% { transform: scale(1); }
		50%      { transform: scale(1.09); }
	}

	.soon h1 { margin-top: 22px; font-size: 30px; letter-spacing: -0.03em; }

	@media (max-width: 520px) {
		.card { padding: 38px 24px 32px; }
		.card h1 { font-size: 19px; }
		.card p { font-size: 14.5px; }
		.bare svg { width: 92px; height: 92px; }
		.soon svg { width: 104px; height: 104px; }
		.soon h1 { font-size: 24px; }
		.bare h1 { font-size: 26px; }
		.bare p { font-size: 15px; }
	}

	@media (prefers-reduced-motion: reduce) {
		.glow, .mark::before, .mark::after, .eq i, .grid, .soon .wave-1, .soon .wave-2, .soon .dial { animation: none; }
	}
	</style>
</head>
<body>


<span class="grid" aria-hidden="true"></span>

<main class="soon">
	<svg viewBox="0 0 26 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
		<path d="M6.6 9.4 14.6 5.9"/>
		<rect x="2" y="9.4" width="17" height="11.4" rx="2.4"/>
		<circle class="dial" cx="7.5" cy="15.1" r="2.9"/>
		<path d="M13.4 12.8h3.4M13.4 15.1h3.4M13.4 17.4h3.4"/>
		<path class="wave-1" d="M16.6 4.6a3.4 3.4 0 0 1 2.4 2.4"/>
		<path class="wave-2" d="M17.6 2.1a6.2 6.2 0 0 1 4.4 4.4"/>
	</svg>
	<h1>Estamos chegando...</h1>
	<p>O site será publicado em breve.</p></main>

</body>
</html>
