/* Waste The Fallen Italia
 *
 * Nero, rosso sangue e bordi strappati, con la stessa atmosfera del sito ufficiale.
 * Il blu è riservato al pulsante del Discord: è l'azione principale della pagina.
 *
 * 1. Font
 * 2. Colori e base
 * 3. Pulsanti
 * 4. Eroe
 * 5. Il gioco
 * 6. Chiusura e piede
 * 7. Pagine di testo
 * 8. Movimento
 */

/* 1. Font: file sul nostro server, licenza SIL Open Font License ------------- */

@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bebas-neue-400.woff2") format("woff2"); }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/merriweather-400.woff2") format("woff2"); }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/merriweather-700.woff2") format("woff2"); }

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

:root {
	--wi-nero: #0d0d0d;
	--wi-rosso: #9a2020;
	--wi-rosso-vivo: #c02828;
	--wi-rosso-acceso: #dd252a;
	--wi-rosa: #fcbbbc;
	--wi-bianco: #f6eeee;
	--wi-grigio: #c9bcbc;
	--wi-verde: #3ba55d;
	--wi-blu: #5865f2;
	--wi-blu-chiaro: #6c78f7;
	--wi-titoli: "Bebas Neue", "Bahnschrift Condensed", "Arial Narrow", sans-serif;
	--wi-testo: "Merriweather", Georgia, "Times New Roman", serif;
	--wi-sfondo-img: url("../img/sfondo.webp");
	--wi-strappo-btn: polygon(0.0% 1.6%,4.5% 0.8%,9.1% 3.3%,13.6% 0.4%,18.2% 2.7%,22.7% 1.8%,27.3% 0.3%,31.8% 2.5%,36.4% 0.2%,40.9% 2.2%,45.5% 0.3%,50.0% 0.5%,54.5% 2.1%,59.1% 4.1%,63.6% 0.6%,68.2% 1.1%,72.7% 3.1%,77.3% 4.7%,81.8% 2.9%,86.4% 2.0%,90.9% 4.9%,95.5% 0.2%,98.6% 0.0%,99.5% 16.7%,99.8% 33.3%,99.8% 50.0%,99.5% 66.7%,98.7% 83.3%,100.0% 99.1%,95.5% 97.1%,90.9% 96.8%,86.4% 98.1%,81.8% 97.3%,77.3% 99.7%,72.7% 99.7%,68.2% 99.0%,63.6% 96.6%,59.1% 97.9%,54.5% 98.4%,50.0% 97.1%,45.5% 97.7%,40.9% 98.5%,36.4% 96.0%,31.8% 96.5%,27.3% 98.8%,22.7% 97.1%,18.2% 97.4%,13.6% 95.6%,9.1% 96.4%,4.5% 98.6%,1.6% 100.0%,0.2% 83.3%,0.7% 66.7%,1.2% 50.0%,0.2% 33.3%,0.8% 16.7%);
	--wi-strappo-pannello: polygon(0.0% 0.3%,2.9% 1.2%,5.9% 1.1%,8.8% 0.9%,11.8% 0.4%,14.7% 1.4%,17.6% 1.5%,20.6% 0.9%,23.5% 0.9%,26.5% 0.4%,29.4% 0.0%,32.4% 0.7%,35.3% 1.1%,38.2% 0.1%,41.2% 1.4%,44.1% 0.4%,47.1% 0.4%,50.0% 0.1%,52.9% 1.8%,55.9% 1.3%,58.8% 1.6%,61.8% 1.1%,64.7% 0.1%,67.6% 0.6%,70.6% 0.9%,73.5% 0.2%,76.5% 1.7%,79.4% 0.7%,82.4% 0.3%,85.3% 1.5%,88.2% 0.2%,91.2% 1.7%,94.1% 0.8%,97.1% 1.0%,99.6% 0.0%,99.5% 4.5%,99.8% 9.1%,100.0% 13.6%,99.0% 18.2%,99.7% 22.7%,99.1% 27.3%,99.8% 31.8%,98.9% 36.4%,99.0% 40.9%,99.2% 45.5%,99.2% 50.0%,99.4% 54.5%,99.2% 59.1%,99.9% 63.6%,99.5% 68.2%,99.1% 72.7%,99.8% 77.3%,99.0% 81.8%,99.0% 86.4%,99.5% 90.9%,99.6% 95.5%,100.0% 99.2%,97.1% 99.3%,94.1% 98.2%,91.2% 99.3%,88.2% 100.0%,85.3% 99.8%,82.4% 98.7%,79.4% 98.2%,76.5% 99.1%,73.5% 99.1%,70.6% 99.0%,67.6% 98.7%,64.7% 99.6%,61.8% 98.9%,58.8% 99.0%,55.9% 98.9%,52.9% 99.7%,50.0% 99.7%,47.1% 99.4%,44.1% 98.3%,41.2% 99.4%,38.2% 98.9%,35.3% 99.4%,32.4% 99.8%,29.4% 99.9%,26.5% 98.5%,23.5% 98.6%,20.6% 99.3%,17.6% 98.8%,14.7% 98.8%,11.8% 98.4%,8.8% 98.3%,5.9% 99.3%,2.9% 98.2%,1.1% 100.0%,0.6% 95.5%,1.0% 90.9%,0.5% 86.4%,0.4% 81.8%,0.3% 77.3%,1.0% 72.7%,0.2% 68.2%,0.1% 63.6%,0.9% 59.1%,0.9% 54.5%,0.5% 50.0%,0.9% 45.5%,0.1% 40.9%,0.3% 36.4%,0.3% 31.8%,0.5% 27.3%,0.2% 22.7%,0.1% 18.2%,0.4% 13.6%,1.0% 9.1%,1.1% 4.5%);
	--wi-grana: 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 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background:
		radial-gradient(ellipse 60% 900px at 92% 1500px, rgba(154, 32, 32, .13), transparent),
		radial-gradient(ellipse 55% 800px at 4% 1100px, rgba(154, 32, 32, .09), transparent),
		var(--wi-nero);
	color: var(--wi-bianco);
	font: 400 1rem/1.75 var(--wi-testo);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a { color: inherit; }

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

h1, h2 { font-family: var(--wi-titoli); font-weight: 400; }

/* 3. Pulsanti: il colore sta in uno strato strappato sotto al testo, così
 *    il contorno della tastiera e l'ombra restano interi. */

.wi-pulsanti {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
}

.wi-btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	color: #fff;
	font-family: var(--wi-titoli);
	line-height: 1;
	letter-spacing: .06em;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .2s, filter .2s;
}

.wi-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	clip-path: var(--wi-strappo-btn);
	transition: background-color .2s;
}

.wi-btn span { padding-top: .1em; }

.wi-btn:hover { transform: translateY(-2px); }

.wi-btn--discord {
	padding: .72em 1.5em;
	font-size: clamp(1.7rem, 3vw, 2.05rem);
	filter: drop-shadow(0 0 18px rgba(88, 101, 242, .55));
}

.wi-btn--discord::before { background: var(--wi-blu); }

.wi-btn--discord:hover { filter: drop-shadow(0 0 28px rgba(108, 120, 247, .85)); }

.wi-btn--discord:hover::before { background: var(--wi-blu-chiaro); }

.wi-btn--discord .wi-icona { width: 1.05em; height: 1.05em; }

.wi-btn--reddit {
	padding: .72em 1.3em;
	font-size: 1.4rem;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6));
}

.wi-btn--reddit::before { background: var(--wi-rosso-vivo); }

.wi-btn--reddit:hover::before { background: var(--wi-rosso-acceso); }

.wi-btn--reddit .wi-icona { width: .95em; height: .95em; }

.wi-icona { flex: none; }

/* 4. Eroe ------------------------------------------------------------------ */

.wi-eroe {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding: 40px clamp(16px, 7vw, 120px) 84px;
	overflow: hidden;
	isolation: isolate;
}

/* Strato 1: illustrazione del gioco. */
.wi-eroe__sfondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wi-sfondo-img) 62% 30% / cover no-repeat, #2a0808;
}

/* Strato 2: buio a sinistra per il testo e verso il basso per unirsi alla pagina. */
.wi-eroe__sfondo::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(13, 13, 13, .88) 0%, rgba(13, 13, 13, .62) 34%, rgba(13, 13, 13, 0) 62%),
		linear-gradient(180deg, rgba(13, 13, 13, 0) 62%, var(--wi-nero) 100%);
}

/* Strato 3: bagliore rosso dietro al varco. Si muove solo l'opacità, che costa poco. */
.wi-eroe__sfondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 42% 58% at 60% 30%, rgba(221, 37, 42, .34), transparent 72%);
	opacity: .5;
}

/* Strato 4: grana sporca. */
.wi-eroe::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wi-grana);
	opacity: .5;
	pointer-events: none;
}

.wi-eroe__corpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	max-width: 620px;
}

.wi-logo {
	width: min(300px, 36vh);
	filter: drop-shadow(0 0 34px rgba(46, 212, 200, .28)) drop-shadow(0 16px 30px rgba(0, 0, 0, .8));
}

.wi-titolo {
	margin: 0;
	color: var(--wi-rosso-acceso);
	font-size: clamp(2.9rem, 6vw, 4.6rem);
	line-height: .98;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-shadow: 0 2px 22px rgba(0, 0, 0, .85);
	text-wrap: balance;
}

.wi-motto {
	display: block;
	margin-bottom: .35em;
	color: var(--wi-bianco);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	letter-spacing: .32em;
}

.wi-invito {
	margin: 0 0 6px;
	max-width: 30em;
	font-size: 1.02rem;
	text-wrap: balance;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .95);
}

.wi-numeri {
	margin: 0;
	font: 400 1.15rem/1.2 var(--wi-titoli);
	letter-spacing: .1em;
	color: var(--wi-grigio);
	text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}

.wi-numeri strong { color: var(--wi-bianco); font-weight: 400; }

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

.wi-giu {
	position: absolute;
	left: 50%;
	bottom: 18px;
	translate: -50% 0;
	padding: 8px;
	color: var(--wi-rosa);
	opacity: .8;
}

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

/* 5. Il gioco -------------------------------------------------------------- */

.wi-gioco {
	max-width: 1080px;
	margin: 0 auto;
	padding: 72px 16px 40px;
}

.wi-foto {
	width: 100%;
	border: 1px solid var(--wi-rosso);
	box-shadow: 0 0 30px rgba(154, 32, 32, .28);
}

/* Foto e riquadro rosso strappato che le si sovrappone, come una pagina lacerata. */
.wi-coppia {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	align-items: center;
}

.wi-coppia .wi-foto {
	grid-column: 1 / 9;
	grid-row: 1;
}

.wi-pannello {
	position: relative;
	isolation: isolate;
	grid-column: 7 / 13;
	grid-row: 1;
	padding: 36px 34px 30px;
	margin-top: 120px;
	filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .7));
}

.wi-pannello::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wi-rosso);
	clip-path: var(--wi-strappo-pannello);
}

.wi-pannello h2 {
	margin: 0 0 12px;
	font-size: clamp(2rem, 4vw, 2.6rem);
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.wi-pannello p { margin: 0 0 14px; font-size: .95rem; line-height: 1.7; }

.wi-pannello p:last-child { margin-bottom: 0; }

.wi-schede {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin: 64px 0 0;
	background: rgba(154, 32, 32, .6);
	border: 1px solid rgba(154, 32, 32, .6);
}

.wi-schede div { padding: 18px 16px 14px; background: var(--wi-nero); }

.wi-schede dt {
	color: var(--wi-rosa);
	font-size: .78rem;
	letter-spacing: .06em;
}

.wi-schede dd {
	margin: 4px 0 0;
	font: 400 1.6rem/1.1 var(--wi-titoli);
	letter-spacing: .03em;
}

.wi-nota {
	max-width: 42em;
	margin: 26px auto 0;
	color: var(--wi-grigio);
	font-size: .92rem;
	text-align: center;
	text-wrap: balance;
}

.wi-galleria {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 48px;
}

.wi-steam { margin: 34px 0 0; text-align: center; }

.wi-steam a {
	color: var(--wi-bianco);
	font-size: .95rem;
	text-decoration-color: var(--wi-rosso-acceso);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.wi-steam a:hover { text-decoration-color: currentColor; }

/* 6. Chiusura e piede ------------------------------------------------------ */

.wi-chiusura {
	padding: 88px 16px 110px;
	text-align: center;
	background: radial-gradient(ellipse 60% 75% at 50% 100%, rgba(192, 40, 40, .38), transparent 72%);
}

.wi-chiusura h2 {
	margin: 0;
	color: var(--wi-rosso-acceso);
	font-size: clamp(3rem, 8vw, 5rem);
	line-height: 1;
	text-transform: uppercase;
}

.wi-chiusura p { margin: 10px auto 28px; max-width: 34em; color: var(--wi-grigio); text-wrap: balance; }

.wi-chiusura .wi-pulsanti { justify-content: center; }

.wi-piede {
	position: relative;
	padding: 26px 16px 30px;
	background: var(--wi-rosso);
	text-align: center;
	font-size: .8rem;
	line-height: 1.6;
}

.wi-piede::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% - 1px);
	height: 26px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 26' preserveAspectRatio='none'%3E%3Cpath fill='%239a2020' d='M0 26L0 11L18 13L36 20L53 11L71 12L89 14L107 6L124 12L142 15L160 18L178 4L196 8L213 4L231 18L249 16L267 3L284 22L302 21L320 15L338 14L356 5L373 2L391 13L409 3L427 6L444 7L462 3L480 11L498 11L516 19L533 12L551 15L569 12L587 15L604 11L622 8L640 22L658 22L676 19L693 16L711 8L729 7L747 8L764 3L782 17L800 10L818 19L836 10L853 21L871 19L889 2L907 6L924 20L942 11L960 22L978 10L996 3L1013 15L1031 18L1049 7L1067 4L1084 9L1102 21L1120 17L1138 4L1156 7L1173 4L1191 3L1209 18L1227 6L1244 13L1262 11L1280 6L1298 17L1316 5L1333 15L1351 4L1369 10L1387 6L1404 7L1422 21L1440 18L1458 8L1476 20L1493 6L1511 10L1529 19L1547 15L1564 4L1582 22L1600 6L1600 26Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

.wi-piede p { margin: 0 auto 6px; max-width: 60em; }

/* 7. Pagine di testo ------------------------------------------------------- */

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

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

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

.wi-pagina h1 {
	color: var(--wi-rosso-acceso);
	font-size: clamp(2.2rem, 6vw, 3rem);
	line-height: 1.05;
	text-transform: uppercase;
}

.wi-pagina h2 { font-size: 1.7rem; line-height: 1.1; letter-spacing: .02em; }

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

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

.wi-pagina table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9rem; line-height: 1.5; }

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

/* Telefono e tablet -------------------------------------------------------- */

@media (max-width: 860px) {
	.wi-coppia { display: block; }

	.wi-pannello { margin: -28px 0 0; padding: 30px 22px 26px; }

	.wi-schede { grid-template-columns: repeat(2, 1fr); margin-top: 44px; }

	.wi-galleria { grid-template-columns: repeat(2, 1fr); gap: 10px; }

	.wi-galleria .wi-foto:first-child { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
	.wi-eroe { padding-top: 28px; text-align: center; }

	.wi-eroe__sfondo { background-position: 50% 0; }

	.wi-eroe__sfondo::before {
		background: linear-gradient(180deg, rgba(13, 13, 13, .5) 0%, rgba(13, 13, 13, .72) 55%, var(--wi-nero) 100%);
	}

	.wi-eroe__corpo { align-items: center; margin: 0 auto; }

	.wi-logo { width: min(62vw, 240px); }

	.wi-pulsanti { flex-direction: column; align-items: stretch; width: 100%; }

	.wi-chiusura .wi-pulsanti { max-width: 340px; margin: 0 auto; }
}

/* 8. Movimento ------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.wi-eroe__corpo > * { animation: wi-emerge .9s cubic-bezier(.2, .7, .2, 1) both; }
	.wi-eroe__corpo > :nth-child(2) { animation-delay: .12s; }
	.wi-eroe__corpo > :nth-child(3) { animation-delay: .22s; }
	.wi-eroe__corpo > :nth-child(4) { animation-delay: .32s; }
	.wi-eroe__corpo > :nth-child(5) { animation-delay: .42s; }
	.wi-eroe__sfondo::after { animation: wi-brace 9s ease-in-out infinite; }
	.wi-giu { animation: wi-respira 2.4s ease-in-out 1.2s infinite; }
}

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

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

/* Il varco arde piano, come brace. */
@keyframes wi-brace {
	0%, 100% { opacity: .2; }
	50%      { opacity: 1; }
}

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