/* hianlucas.com.br — vermelho e preto. Um encontro selvagem, só que sem nada para ver. */

@font-face {
	font-family: 'Fraunces';
	src: url('fontes/fraunces.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: 'Figtree';
	src: url('fontes/figtree.woff2') format('woff2-variations');
	font-weight: 300 900;
	font-display: swap;
}

:root {
	--preto: #0a0505;
	--preto-2: #170a0a;
	--vermelho: #e0262b;
	--vermelho-vivo: #ff3b3f;
	--vermelho-fundo: #7d0d12;
	--branco: #f6f1ee;
	--fonte-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
	--fonte: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fonte-caixa: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, 'Courier New', monospace;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	background: var(--preto);
	color: var(--branco);
	font-family: var(--fonte);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* ——— Fundo ——— */

.fundo {
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(110% 80% at 50% 108%, var(--vermelho-fundo) 0%, rgb(125 13 18 / 0) 64%),
		repeating-linear-gradient(135deg, rgb(224 38 43 / 0.07) 0 2px, transparent 2px 22px),
		var(--preto);
}

.flash {
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: var(--vermelho);
	opacity: 0;
	z-index: 5;
}

.flash.ligado {
	animation: piscar 0.9s ease-out;
}

@keyframes piscar {
	0% {
		opacity: 0.95;
	}
	100% {
		opacity: 0;
	}
}

/* ——— Palco ——— */

.palco {
	position: relative;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
	text-align: center;
}

.etiqueta {
	margin: 0;
	max-width: 32ch;
	padding: 8px 14px;
	background: var(--vermelho);
	color: var(--preto);
	font-weight: 800;
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.35;
	clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
	rotate: -2deg;
}

/* ——— A bola ——— */

.bola {
	position: relative;
	width: min(66vw, 290px);
	aspect-ratio: 1;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	animation: balancar 5s ease-in-out infinite;
}

.bola:focus-visible {
	outline: 3px solid var(--vermelho-vivo);
	outline-offset: 10px;
	border-radius: 50%;
}

/* A casca: metade vermelha, faixa preta, metade branca. */
.bola-aro {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 7px solid var(--preto);
	background: linear-gradient(180deg, var(--vermelho) 0 44%, var(--preto) 44% 56%, var(--branco) 56% 100%);
	box-shadow:
		0 0 0 3px var(--vermelho),
		0 18px 50px -12px rgb(224 38 43 / 0.55);
	display: grid;
	place-items: center;
}

/* O botão da bola é o rosto. */
.bola-miolo {
	width: 62%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--vermelho);
	border: 8px solid var(--preto);
	box-shadow: 0 0 0 5px var(--branco);
	display: grid;
	place-items: center;
}

.bola-miolo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 18%;
	display: block;
}

.bola-vazio {
	display: none;
	font-family: var(--fonte-titulo);
	font-weight: 900;
	font-size: clamp(44px, 14vw, 78px);
	color: var(--preto);
	letter-spacing: -0.03em;
}

.sem-foto img {
	display: none;
}

.sem-foto .bola-vazio {
	display: block;
}

.bola-faisca {
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 3px solid var(--vermelho-vivo);
	opacity: 0;
	scale: 0.9;
}

.bola.jogada {
	animation: sacudir 0.9s cubic-bezier(0.3, 0.7, 0.4, 1);
}

.bola.jogada .bola-faisca {
	animation: faisca 0.9s ease-out;
}

@keyframes balancar {
	0%,
	78%,
	100% {
		rotate: 0deg;
	}
	82% {
		rotate: -9deg;
	}
	86% {
		rotate: 8deg;
	}
	90% {
		rotate: -5deg;
	}
	94% {
		rotate: 3deg;
	}
}

@keyframes sacudir {
	15% {
		rotate: -16deg;
		translate: -6px 0;
	}
	35% {
		rotate: 14deg;
		translate: 6px 0;
	}
	55% {
		rotate: -10deg;
	}
	75% {
		rotate: 6deg;
	}
}

@keyframes faisca {
	0% {
		opacity: 0.9;
		scale: 0.9;
	}
	100% {
		opacity: 0;
		scale: 1.35;
	}
}

/* ——— Título ——— */

.titulo {
	margin: 4px 0 0;
	font-family: var(--fonte-titulo);
	font-weight: 900;
	font-size: clamp(38px, 11vw, 78px);
	line-height: 0.98;
	letter-spacing: -0.012em;
	word-spacing: 0.1em;
	font-variation-settings: 'opsz' 96;
}

.t-linha {
	display: block;
}

.t-destaque {
	color: var(--vermelho-vivo);
	font-style: italic;
}

/* ——— Caixa de diálogo (estilo batalha) ——— */

.caixa {
	position: relative;
	width: min(100%, 430px);
	min-height: 104px;
	padding: 16px 18px 20px;
	background: var(--preto);
	border: 4px solid var(--branco);
	border-radius: 10px;
	box-shadow:
		0 0 0 4px var(--preto),
		0 0 0 7px var(--vermelho);
	text-align: left;
}

.caixa-texto {
	margin: 0;
	font-family: var(--fonte-caixa);
	font-weight: 700;
	font-size: clamp(14.5px, 3.9vw, 17px);
	line-height: 1.55;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--branco);
}

.caixa-seta {
	position: absolute;
	right: 14px;
	bottom: 9px;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 10px solid var(--vermelho-vivo);
	animation: piscaSeta 0.9s steps(2, jump-none) infinite;
}

@keyframes piscaSeta {
	50% {
		opacity: 0;
	}
}

/* ——— Menu ——— */

.menu {
	width: min(100%, 430px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.menu button {
	position: relative;
	min-height: 52px;
	padding: 0 14px 0 34px;
	border: 3px solid var(--vermelho);
	border-radius: 10px;
	background: var(--preto-2);
	color: var(--branco);
	font-family: var(--fonte-caixa);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.1s, transform 0.08s;
}

.menu button::before {
	content: '';
	position: absolute;
	left: 13px;
	top: 50%;
	translate: 0 -50%;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 10px solid var(--vermelho);
	opacity: 0;
}

.menu button:hover,
.menu button:focus-visible {
	background: var(--vermelho);
	color: var(--preto);
	outline: none;
}

.menu button:hover::before,
.menu button:focus-visible::before {
	opacity: 1;
	border-left-color: var(--preto);
}

.menu button:active {
	transform: scale(0.97);
}

.rodape {
	margin: 6px 0 0;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--vermelho);
}

@media (min-width: 760px) {
	.palco {
		gap: 24px;
	}
	.bola {
		width: 300px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}