/* Hunger Italia · stile "Rosso sangue"
 *
 * 1. Font
 * 2. Colori e base
 * 3. Eroe (logo + Discord)
 * 4. Cos'è HUNGER
 * 5. Piede e pagine di testo
 * 6. Movimento
 */

/* 1. Font ------------------------------------------------------------------
 * Oswald dal nostro server (vedi assets/fonts/LEGGIMI.md). Le regole @font-face le
 * scrive functions.php solo se i file ci sono; altrimenti si usano caratteri stretti
 * già presenti su Windows, Android e iPhone. */

/* 2. Colori e base --------------------------------------------------------- */

:root {
	--hi-rosso: #b00000;
	--hi-rosso-scuro: #2a0000;
	--hi-nero: #0c0505;
	--hi-bianco: #f4eeee;
	--hi-grigio: #c9b9b9;
	--hi-verde: #3ba55d;
	--hi-blu: #5865f2;
	--hi-blu-scuro: #4752c4;
	--hi-titoli: "Oswald", "Bahnschrift Condensed", "Arial Narrow", "Roboto Condensed", "Avenir Next Condensed", sans-serif-condensed, sans-serif;
	--hi-testo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--hi-sfondo-img: none;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--hi-nero);
	color: var(--hi-bianco);
	font: 400 1.0625rem/1.65 var(--hi-testo);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--hi-bianco); outline-offset: 4px; }

/* 3. Eroe ------------------------------------------------------------------ */

.hi-eroe {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: 48px 16px 88px;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

/* Strato 1: immagine del gioco (se scelta), altrimenti rosso pieno. */
.hi-eroe__sfondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		var(--hi-sfondo-img) center 30% / cover no-repeat,
		radial-gradient(ellipse 80% 70% at 50% 35%, #c20000, #6a0000 60%, var(--hi-rosso-scuro));
}

/* Strato 2: tinta rossa che scurisce verso il basso. */
.hi-eroe__sfondo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(170, 0, 0, .5) 0%, rgba(90, 0, 0, .6) 45%, var(--hi-nero) 100%);
	mix-blend-mode: multiply;
}

/* Strato 3: grana sporca e vignettatura ai bordi. */
.hi-eroe__sfondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(0, 0, 0, .7) 100%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	opacity: .9;
}

.hi-eroe__corpo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	width: 100%;
	max-width: 560px;
}

.hi-logo { margin: 0; line-height: 0; }

.hi-logo img {
	width: min(340px, 70vw);
	filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .75));
}

.hi-motto {
	margin: 0;
	padding-left: .55em; /* compensa la spaziatura dell'ultima lettera */
	font: 500 clamp(.95rem, 2.6vw, 1.35rem)/1.2 var(--hi-titoli);
	font-stretch: condensed;
	letter-spacing: .55em;
	text-transform: uppercase;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}

.hi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .7em;
	min-width: min(320px, 100%);
	padding: 1.05em 2.2em;
	background: var(--hi-blu);
	color: #fff;
	border: 2px solid var(--hi-blu);
	font: 700 1.05rem/1 var(--hi-titoli);
	font-stretch: condensed;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
	transition: background-color .2s, color .2s, transform .2s, box-shadow .2s;
}

.hi-btn:hover {
	background: var(--hi-blu-scuro);
	border-color: var(--hi-blu-scuro);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 14px 36px rgba(88, 101, 242, .5);
}

.hi-icona { flex: none; }

.hi-numeri {
	margin: -6px 0 0;
	font: 500 .9rem/1.2 var(--hi-titoli);
	font-stretch: condensed;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hi-grigio);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}

.hi-numeri strong { color: var(--hi-bianco); font-weight: 700; }

.hi-pallino {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 .5em .12em 0;
	border-radius: 50%;
	background: var(--hi-verde);
	box-shadow: 0 0 8px var(--hi-verde);
	vertical-align: middle;
}

.hi-pallino--rosso { background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; }

.hi-giu {
	position: absolute;
	left: 50%;
	bottom: 20px;
	translate: -50% 0;
	padding: 8px;
	color: var(--hi-grigio);
	opacity: .8;
}

.hi-giu:hover { opacity: 1; color: var(--hi-bianco); }

/* 4. Cos'è HUNGER ---------------------------------------------------------- */

.hi-info {
	max-width: 640px;
	margin: 0 auto;
	padding: 72px 16px 56px;
	text-align: center;
}

.hi-info h2 {
	margin: 0 0 20px;
	padding-left: .45em;
	font: 700 clamp(1.4rem, 4vw, 1.9rem)/1.1 var(--hi-titoli);
	font-stretch: condensed;
	letter-spacing: .45em;
	text-transform: uppercase;
}

/* Riga rossa sotto il titolo. */
.hi-info h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 18px auto 0;
	background: var(--hi-rosso);
}

.hi-info p { margin: 0 0 18px; color: var(--hi-grigio); }

.hi-stato {
	display: inline-block;
	padding: .55em 1.1em;
	border: 1px solid rgba(255, 255, 255, .14);
	font: 500 .85rem/1.3 var(--hi-titoli);
	font-stretch: condensed;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hi-bianco) !important;
}

.hi-link {
	color: var(--hi-bianco);
	text-decoration-color: var(--hi-rosso);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.hi-link:hover { text-decoration-color: currentColor; }

/* 5. Piede e pagine di testo ----------------------------------------------- */

.hi-piede {
	padding: 28px 16px 36px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	text-align: center;
	font-size: .8rem;
	color: #a08f8f;
}

.hi-piede p { margin: 0 0 6px; }

.hi-pagina {
	max-width: 720px;
	margin: 0 auto;
	padding: 40px 16px 64px;
}

.hi-pagina__logo { display: inline-block; margin-bottom: 24px; }

.hi-pagina__logo img { width: 72px; }

.hi-pagina h1 {
	font: 700 clamp(1.6rem, 5vw, 2.2rem)/1.15 var(--hi-titoli);
	font-stretch: condensed;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hi-pagina a { color: var(--hi-bianco); text-decoration-color: var(--hi-rosso); }

/* Le tabelle scorrono dentro il loro riquadro: sul telefono non allargano la pagina. */
.hi-pagina figure { margin: 1.25em 0; overflow-x: auto; }

.hi-pagina table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .95rem; line-height: 1.45; }

.hi-pagina th, .hi-pagina td { padding: .6em .75em; border: 1px solid rgba(244, 238, 238, .2); text-align: left; vertical-align: top; }

/* 6. Movimento ------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.hi-eroe__corpo > * { animation: hi-emerge .9s cubic-bezier(.2, .7, .2, 1) both; }
	.hi-eroe__corpo > :nth-child(2) { animation-delay: .15s; }
	.hi-eroe__corpo > :nth-child(3) { animation-delay: .3s; }
	.hi-eroe__corpo > :nth-child(4) { animation-delay: .4s; }
	.hi-eroe__sfondo { animation: hi-sangue 1.6s ease-out both; }
	.hi-giu { animation: hi-respira 2.4s ease-in-out 1.2s infinite; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

@keyframes hi-emerge {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

@keyframes hi-sangue {
	from { opacity: 0; filter: brightness(.3); }
	to   { opacity: 1; filter: none; }
}

@keyframes hi-respira {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}