/* Guardians of the Wild Sky Italia
 *
 * Cielo e oro: la pagina scende dal blu alto del logo fino al mare di nuvole, che
 * chiude la pagina in chiaro. L'oro del bordo del logo fa da cornice, la pergamena
 * riprende la targa "ITALIA". Il blu violaceo è riservato al pulsante del Discord.
 *
 * 1. Font
 * 2. Colori e base
 * 3. Pulsanti
 * 4. Eroe e nuvole
 * 5. Il gioco, pergamena e cartiglio
 * 6. L'arcipelago: le quattro isole
 * 7. Oblò e link
 * 8. Domande frequenti
 * 9. Chiusura e piede
 * 10. Pagine di testo
 * 11. Telefono e tablet
 * 12. Movimento
 */

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

@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cinzel-700.woff2") format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/cinzel-800.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/alegreya-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/alegreya-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/alegreya-sans-700.woff2") format("woff2"); }

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

:root {
	--wsi-zenit: #0c2350;
	--wsi-alto: #123a7a;
	--wsi-cielo: #1a5aa6;
	--wsi-azzurro: #2470c0;
	--wsi-nuvola: #eaf4fb;
	--wsi-bianco: #fbfdff;
	--wsi-foschia: #c9dcf0;
	--wsi-oro: #e2b35a;
	--wsi-oro-chiaro: #f7dfa3;
	--wsi-oro-scuro: #8a5f1c;
	--wsi-pergamena: #f6ead0;
	--wsi-inchiostro: #12264f;
	--wsi-erba: #7fae48;
	--wsi-verde-it: #1f8a4c;
	--wsi-rosso-it: #c62f2b;
	--wsi-rosso: #c8322c;
	--wsi-rosso-acceso: #de423b;
	--wsi-verde: #3ba55d;
	--wsi-blu: #5865f2;
	--wsi-blu-chiaro: #6c78f7;
	--wsi-titoli: "Cinzel", "Times New Roman", Georgia, serif;
	--wsi-testo: "Alegreya Sans", "Segoe UI", Arial, sans-serif;
	--wsi-sfondo-img: url("../img/sfondo.webp");
	--wsi-tricolore: linear-gradient(90deg, var(--wsi-verde-it) 0 33.33%, var(--wsi-bianco) 33.33% 66.66%, var(--wsi-rosso-it) 66.66%);
	/* Angoli rientranti, come la targa "ITALIA" del logo. */
	--wsi-tacca: 12px;
	--wsi-targa:
		radial-gradient(circle var(--wsi-tacca) at 0 0, #0000 98%, #000) 0 0 / 51% 51% no-repeat,
		radial-gradient(circle var(--wsi-tacca) at 100% 0, #0000 98%, #000) 100% 0 / 51% 51% no-repeat,
		radial-gradient(circle var(--wsi-tacca) at 0 100%, #0000 98%, #000) 0 100% / 51% 51% no-repeat,
		radial-gradient(circle var(--wsi-tacca) at 100% 100%, #0000 98%, #000) 100% 100% / 51% 51% no-repeat;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--wsi-zenit);
	color: var(--wsi-bianco);
	font: 400 1.16rem/1.55 var(--wsi-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(--wsi-oro-chiaro); outline-offset: 4px; }

h1, h2, h3 { font-family: var(--wsi-titoli); font-weight: 800; }

/* 3. Pulsanti -------------------------------------------------------------- */

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

.wsi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	border-radius: 999px;
	color: #fff;
	font-family: var(--wsi-testo);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .2s, background-color .2s, box-shadow .2s;
}

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

.wsi-btn--discord {
	padding: .82em 1.5em;
	background: var(--wsi-blu);
	box-shadow: 0 0 0 2px var(--wsi-oro), 0 10px 30px rgba(88, 101, 242, .5);
	font-size: clamp(1.32rem, 2.2vw, 1.5rem);
}

.wsi-btn--discord:hover {
	background: var(--wsi-blu-chiaro);
	box-shadow: 0 0 0 2px var(--wsi-oro-chiaro), 0 12px 36px rgba(108, 120, 247, .7);
}

.wsi-btn--discord .wsi-icona { width: 1.15em; height: 1.15em; }

.wsi-btn--reddit {
	padding: .82em 1.3em;
	background: var(--wsi-rosso);
	box-shadow: 0 8px 20px rgba(6, 18, 44, .45);
	font-size: 1.14rem;
}

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

.wsi-btn--reddit .wsi-icona { width: 1.1em; height: 1.1em; }

.wsi-icona { flex: none; }

/* 4. Eroe e nuvole --------------------------------------------------------- */

.wsi-eroe {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding: 36px clamp(16px, 6vw, 96px) 128px;
	overflow: hidden;
	isolation: isolate;
	background: var(--wsi-zenit);
}

/* L'illustrazione sta a destra e sfuma nel blu alto, dove stanno logo e testo. */
.wsi-eroe__sfondo {
	position: absolute;
	inset: 0 0 0 auto;
	width: 74%;
	z-index: -1;
	background: var(--wsi-sfondo-img) 62% 60% / cover no-repeat, var(--wsi-alto);
}

.wsi-eroe__sfondo::before {
	content: "";
	position: absolute;
	inset: 0 0 0 -2px;
	background: linear-gradient(90deg, var(--wsi-zenit) 0 1%, rgba(12, 35, 80, .86) 24%, rgba(12, 35, 80, 0) 52%);
}

/* La base dell'illustrazione si scioglie nel blu, sotto le nuvole. */
.wsi-eroe__sfondo::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 34%;
	background: linear-gradient(180deg, rgba(12, 35, 80, 0), rgba(12, 35, 80, .9) 72%, var(--wsi-zenit));
}

.wsi-eroe__corpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}

.wsi-logo {
	width: min(300px, 38vh);
	margin-bottom: 6px;
	filter: drop-shadow(0 14px 28px rgba(4, 12, 32, .7));
}

.wsi-titolo {
	margin: 0;
	max-width: 8.6em;
	color: var(--wsi-bianco);
	font-size: clamp(3rem, 5.4vw, 4.7rem);
	line-height: 1.02;
	text-shadow: 0 2px 22px rgba(6, 18, 44, .8);
	text-wrap: balance;
}

.wsi-motto {
	display: block;
	max-width: 24em;
	margin-bottom: .45em;
	color: var(--wsi-oro-chiaro);
	font: 500 clamp(1.08rem, 1.6vw, 1.22rem)/1.25 var(--wsi-testo);
}

.wsi-invito {
	margin: 0 0 8px;
	max-width: 26em;
	font-size: 1.28rem;
	line-height: 1.4;
	text-wrap: balance;
	text-shadow: 0 1px 10px rgba(6, 18, 44, .95);
}

.wsi-numeri {
	margin: 2px 0 0;
	font-weight: 500;
	color: var(--wsi-foschia);
	text-shadow: 0 1px 8px rgba(6, 18, 44, .9);
}

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

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

.wsi-giu {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 2;
	translate: -50% 0;
	padding: 8px;
	color: var(--wsi-oro-chiaro);
}

.wsi-giu:hover { color: var(--wsi-bianco); }

/* Due strati di nuvole sfalsati: la striscia si ripete da sola in orizzontale. */
.wsi-nuvole {
	position: absolute;
	inset: auto 0 -1px;
	height: 150px;
	pointer-events: none;
}

.wsi-nuvole::before,
.wsi-nuvole::after {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: repeat-x;
	background-position-y: bottom;
}

.wsi-nuvole::before { background-size: 1180px 130px; background-position-x: 340px; opacity: .6; bottom: 22px; }

.wsi-nuvole::after { background-size: 1600px 130px; }

.wsi-nuvole--notte::before, .wsi-nuvole--notte::after { background-image: url("../img/nuvole-notte.svg"); }

.wsi-nuvole--chiare::before, .wsi-nuvole--chiare::after { background-image: url("../img/nuvole-chiare.svg"); }

/* 5. Il gioco, pergamena e cartiglio --------------------------------------- */

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

.wsi-foto {
	width: 100%;
	border-radius: 6px;
	box-shadow: 0 0 0 1px var(--wsi-oro), 0 18px 40px rgba(4, 12, 32, .55);
}

/* Foto e pergamena che le si appoggia sopra. */
.wsi-coppia {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	align-items: center;
}

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

.wsi-pergamena {
	position: relative;
	isolation: isolate;
	grid-column: 7 / 13;
	grid-row: 1;
	margin-top: 130px;
	padding: 38px 38px 32px;
	color: var(--wsi-inchiostro);
	filter: drop-shadow(0 16px 26px rgba(4, 12, 32, .6));
}

/* Il fondo è ritagliato e la cornice sta dentro: l'ombra resta sul contenitore. */
.wsi-pergamena::before,
.wsi-cartiglio::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--wsi-pergamena);
	-webkit-mask: var(--wsi-targa);
	mask: var(--wsi-targa);
}

.wsi-pergamena::after,
.wsi-cartiglio::after {
	content: "";
	position: absolute;
	inset: 9px;
	z-index: -1;
	border: 1px solid var(--wsi-oro-scuro);
	pointer-events: none;
}

.wsi-pergamena h2 {
	margin: 0 0 12px;
	font-size: clamp(1.7rem, 3vw, 2.1rem);
	line-height: 1.12;
	text-wrap: balance;
}

.wsi-pergamena p { margin: 0 0 12px; font-size: 1.12rem; line-height: 1.5; }

.wsi-pergamena p:last-child { margin-bottom: 0; }

.wsi-cartiglio {
	--wsi-tacca: 14px;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: space-between;
	gap: 14px 24px;
	margin: 64px 0 0;
	padding: 26px 38px 24px;
	color: var(--wsi-inchiostro);
}

.wsi-cartiglio dt { font-size: 1.04rem; font-weight: 500; }

.wsi-cartiglio dd {
	margin: 2px 0 0;
	font: 800 clamp(1.25rem, 2.1vw, 1.55rem)/1.15 var(--wsi-titoli);
}

.wsi-nota {
	max-width: 40em;
	margin: 26px auto 0;
	color: var(--wsi-foschia);
	text-align: center;
	text-wrap: balance;
}

/* 6. L'arcipelago: la memoria visiva della pagina --------------------------- */

.wsi-arcipelago {
	padding: 64px 16px 56px;
	background: linear-gradient(180deg, var(--wsi-zenit), var(--wsi-alto) 58%, var(--wsi-cielo));
}

.wsi-arcipelago > h2 {
	max-width: 1048px;
	margin: 0 auto 44px;
	font-size: clamp(2.3rem, 4.8vw, 3.2rem);
	line-height: 1.05;
}

.wsi-arcipelago__elenco {
	display: grid;
	gap: 36px;
	max-width: 1048px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.wsi-tappa {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
}

.wsi-tappa:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.wsi-tappa:nth-child(even) .wsi-isola { order: 2; }

.wsi-tappa__testo h3 {
	margin: 0 0 8px;
	color: var(--wsi-oro-chiaro);
	font-size: clamp(1.6rem, 3vw, 2.05rem);
	line-height: 1.1;
}

.wsi-tappa__testo p { margin: 0; max-width: 28em; }

/* Ogni foto è la terra di un'isola: l'erba spunta sopra, la roccia pende sotto.
   Le due forme si alternano per non far sembrare le isole uno stampo. */
.wsi-isola {
	--terra: polygon(3% 20%, 11% 11%, 23% 14%, 37% 5%, 51% 9%, 66% 4%, 81% 11%, 93% 9%, 99% 23%, 97% 45%, 100% 61%, 94% 78%, 86% 92%, 74% 88%, 63% 99%, 50% 93%, 38% 100%, 26% 89%, 14% 88%, 6% 73%, 0 55%);
	--roccia: polygon(1% 45%, 99% 45%, 95% 62%, 89% 77%, 79% 74%, 71% 90%, 61% 85%, 51% 100%, 42% 86%, 32% 92%, 24% 74%, 13% 72%, 5% 59%);
	position: relative;
	isolation: isolate;
	aspect-ratio: 4 / 3;
}

.wsi-tappa:nth-child(even) .wsi-isola {
	--terra: polygon(1% 24%, 9% 8%, 22% 11%, 34% 4%, 50% 11%, 63% 5%, 77% 12%, 90% 8%, 98% 19%, 100% 51%, 95% 70%, 88% 85%, 76% 82%, 65% 95%, 53% 89%, 41% 97%, 29% 86%, 17% 89%, 8% 76%, 3% 62%, 3% 43%);
	--roccia: polygon(3% 42%, 99% 42%, 94% 58%, 87% 72%, 77% 69%, 70% 84%, 61% 82%, 54% 98%, 45% 84%, 36% 94%, 29% 76%, 18% 77%, 9% 62%);
}

.wsi-isola img {
	width: 100%;
	height: 74%;
	object-fit: cover;
	clip-path: var(--terra);
}

.wsi-isola::before,
.wsi-isola::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

.wsi-isola::before { inset: 0 0 26%; clip-path: var(--terra); transform: translateY(-2.2%); background: var(--wsi-erba); }

.wsi-isola::after {
	clip-path: var(--roccia);
	background: linear-gradient(104deg, #7d8fb4 0 22%, #65789f 22% 47%, #52658d 47% 71%, #40537b 71%);
}

/* 7. Oblò e link ----------------------------------------------------------- */

.wsi-immagini {
	margin-top: -1px;
	padding: 40px 16px 56px;
	background: linear-gradient(180deg, var(--wsi-cielo), var(--wsi-azzurro));
}

/* Tre oblò con la cornice d'oro del logo. */
.wsi-obli {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 3vw, 36px);
	max-width: 1000px;
	margin: 0 auto;
}

.wsi-oblo {
	width: 100%;
	border-radius: 50%;
	border: 5px solid var(--wsi-oro);
	box-shadow: 0 0 0 2px var(--wsi-oro-scuro), 0 16px 30px rgba(6, 18, 44, .45);
}

.wsi-link {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 36px;
	margin: 38px 0 0;
	padding: 0;
	list-style: none;
}

.wsi-link a {
	font-weight: 700;
	text-decoration-color: var(--wsi-oro-chiaro);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

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

/* 8. Domande frequenti ----------------------------------------------------- */

.wsi-domande {
	margin-top: -1px;
	padding: 56px max(16px, calc((100% - 780px) / 2)) 170px;
	background: var(--wsi-azzurro);
}

.wsi-domande > h2 {
	margin: 0 0 22px;
	font-size: clamp(2.1rem, 4.4vw, 2.9rem);
	line-height: 1.05;
}

.wsi-domande details { border-top: 1px solid rgba(251, 253, 255, .4); }

.wsi-domande details:last-of-type { border-bottom: 1px solid rgba(251, 253, 255, .4); }

.wsi-domande summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 14px 2px;
	cursor: pointer;
	list-style: none;
}

.wsi-domande summary::-webkit-details-marker { display: none; }

.wsi-domande summary::after {
	content: "+";
	flex: none;
	color: var(--wsi-oro-chiaro);
	font: 700 1.6rem/1 var(--wsi-testo);
	transition: rotate .2s;
}

.wsi-domande details[open] summary::after { rotate: 45deg; }

.wsi-domande h3 { margin: 0; font: 700 1.24rem/1.3 var(--wsi-testo); }

.wsi-domande details p { margin: 0 0 16px; max-width: 40em; }

/* 9. Chiusura e piede ------------------------------------------------------ */

.wsi-chiusura {
	position: relative;
	padding: 0 16px 92px;
	background: var(--wsi-nuvola);
	color: var(--wsi-inchiostro);
	text-align: center;
}

.wsi-chiusura .wsi-nuvole { inset: -148px 0 auto; }

.wsi-chiusura__corpo { position: relative; padding-top: 28px; }

.wsi-chiusura h2 {
	margin: 0;
	font-size: clamp(2.7rem, 7.6vw, 4.8rem);
	line-height: 1.05;
	text-wrap: balance;
}

.wsi-chiusura p { margin: 12px auto 28px; max-width: 34em; text-wrap: balance; }

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

.wsi-chiusura .wsi-btn--reddit { box-shadow: 0 8px 18px rgba(18, 38, 79, .25); }

.wsi-chiusura :focus-visible { outline-color: var(--wsi-inchiostro); }

.wsi-piede {
	position: relative;
	padding: 28px 16px 30px;
	background: var(--wsi-zenit);
	color: var(--wsi-foschia);
	text-align: center;
	font-size: 1rem;
	line-height: 1.5;
}

.wsi-piede::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--wsi-tricolore);
}

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

/* 10. Pagine di testo ------------------------------------------------------ */

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

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

.wsi-pagina__logo img { width: 84px; }

.wsi-pagina h1 {
	font-size: clamp(2.2rem, 6.6vw, 3rem);
	line-height: 1.05;
}

.wsi-pagina h2 { font: 700 1.5rem/1.2 var(--wsi-testo); }

.wsi-pagina a { color: var(--wsi-bianco); text-decoration-color: var(--wsi-oro); }

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

.wsi-pagina table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 1.02rem; line-height: 1.4; }

.wsi-pagina th, .wsi-pagina td { padding: .6em .75em; border: 1px solid rgba(251, 253, 255, .25); text-align: left; vertical-align: top; }

/* 11. Telefono e tablet ---------------------------------------------------- */

@media (max-width: 860px) {
	.wsi-eroe { padding-top: 24px; text-align: center; }

	.wsi-eroe__sfondo { inset: 0; width: auto; background-position: 54% 50%; }

	.wsi-eroe__sfondo::before {
		inset: 0;
		background: linear-gradient(180deg, rgba(12, 35, 80, .3) 0%, rgba(12, 35, 80, .66) 50%, rgba(12, 35, 80, .9) 100%);
	}

	.wsi-eroe__corpo { align-items: center; }

	.wsi-logo { width: min(56vw, 240px, 32vh); }

	.wsi-titolo { max-width: none; }

	.wsi-motto { margin-inline: auto; }

	.wsi-coppia { display: block; }

	.wsi-pergamena { margin: -28px 0 0; padding: 32px 26px 28px; }

	.wsi-cartiglio { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; padding: 26px 28px 24px; }

	.wsi-tappa,
	.wsi-tappa:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 22px; }

	.wsi-tappa:nth-child(even) .wsi-isola { order: 0; }

	.wsi-obli { grid-template-columns: repeat(2, 1fr); }

	.wsi-oblo:first-child { grid-column: 1 / -1; width: 66%; margin: 0 auto; }
}

@media (max-width: 700px) {
	.wsi-pulsanti { flex-direction: column; align-items: stretch; width: 100%; }

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

	.wsi-nuvole { height: 100px; }

	.wsi-nuvole::before { background-size: 780px 86px; }

	.wsi-nuvole::after { background-size: 1060px 86px; }

	.wsi-chiusura .wsi-nuvole { inset: -98px 0 auto; }

	.wsi-domande { padding-bottom: 110px; }
}

/* 12. Movimento: l'entrata dell'eroe e il lento galleggiare delle isole. ----- */

@media (prefers-reduced-motion: no-preference) {
	.wsi-eroe__corpo > * { animation: wsi-sale .9s cubic-bezier(.2, .7, .2, 1) both; }
	.wsi-eroe__corpo > :nth-child(2) { animation-delay: .1s; }
	.wsi-eroe__corpo > :nth-child(3) { animation-delay: .2s; }
	.wsi-eroe__corpo > :nth-child(4) { animation-delay: .3s; }
	.wsi-eroe__corpo > :nth-child(5) { animation-delay: .4s; }

	.wsi-isola { animation: wsi-galleggia 9s ease-in-out infinite alternate; will-change: transform; }
	.wsi-tappa:nth-child(2) .wsi-isola { animation-delay: -3s; }
	.wsi-tappa:nth-child(3) .wsi-isola { animation-delay: -6s; }
	.wsi-tappa:nth-child(4) .wsi-isola { animation-delay: -1.5s; }
}

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

/* Dal basso, come un velivolo che prende quota. */
@keyframes wsi-sale {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

@keyframes wsi-galleggia {
	from { transform: translateY(-7px); }
	to   { transform: translateY(7px); }
}