/* =========================================================================
   Lions Football Cup: fondamenta (font, token, reset, tipografia, comparse)
   ========================================================================= */

/* --- Font --------------------------------------------------------------- */

/* Anton per i titoli, Archivo per il testo: gli stessi del brand kit, serviti
   dal tema (nessuna richiesta a Google Fonts). Archivo è un file variabile
   che copre tutti i pesi da 400 a 900. */

@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/anton-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/anton-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/archivo-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Token -------------------------------------------------------------- */

:root {
	--lfc-gold: #c8a02c;
	--lfc-gold-hi: #f0d67a;
	--lfc-gold-dk: #a67f23;
	--lfc-navy: #0e2a47;
	--lfc-navy-mid: #14334f;
	--lfc-ink: #081523;
	--lfc-paper: #f4f1e8;
	--lfc-white: #ffffff;
	--lfc-g1: #cdd8e3;
	--lfc-g2: #9fb0c2;
	--lfc-g3: #5a6b7d;
	--lfc-hair: rgba(200, 160, 44, 0.28);
	--lfc-hair-w: rgba(255, 255, 255, 0.12);
	--lfc-hair-ink: rgba(11, 22, 34, 0.14);
	--lfc-red: #e5484d;
	--lfc-green: #46a758;

	--lfc-border: #d6dadd;
	--lfc-muted: #5a6b7d;
	--lfc-surface: #ffffff;

	--lfc-font-display: "Anton", Impact, sans-serif;
	--lfc-font-body: "Archivo", system-ui, sans-serif;

	--lfc-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--lfc-ease-io: cubic-bezier(0.76, 0, 0.24, 1);
	--lfc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	--lfc-container: 1360px;
	--lfc-gutter: clamp(20px, 5vw, 72px);
	--lfc-radius: 16px;
	--lfc-header-height: 60px;
	--lfc-admin-bar: 0px;
	--lfc-title-size: clamp(34px, 4vw, 56px);
}

.admin-bar {
	--lfc-admin-bar: 32px;
}

@media (max-width: 782px) {
	.admin-bar {
		--lfc-admin-bar: 46px;
	}
}

/* --- Reset -------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--lfc-header-height) + var(--lfc-admin-bar) + 40px);
}

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--lfc-ink);
	color: var(--lfc-white);
	font-family: var(--lfc-font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Grana sopra tutta la pagina: gli sfondi scuri non sono mai piatti. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 95;
	pointer-events: none;
	opacity: 0.07;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.lfc-menu-open {
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

img,
video,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

a {
	color: var(--lfc-gold);
	text-decoration: none;
	transition: color 0.2s;
}

a:hover {
	color: var(--lfc-gold-hi);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

:focus-visible {
	outline: 2px solid var(--lfc-gold-hi);
	outline-offset: 3px;
}

::selection {
	background: var(--lfc-gold);
	color: var(--lfc-ink);
}

strong,
b {
	font-weight: 700;
}

/* --- Utilità ------------------------------------------------------------ */

.lfc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.lfc-skip-link {
	position: absolute;
	top: -100px;
	left: 10px;
	z-index: 200;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--lfc-gold);
	color: var(--lfc-ink);
	font-weight: 800;
}

.lfc-skip-link:focus {
	top: calc(var(--lfc-admin-bar) + 10px);
	color: var(--lfc-ink);
}

.lfc-container {
	width: min(var(--lfc-container), 100% - var(--lfc-gutter) * 2);
	margin-inline: auto;
}

.lfc-container--narrow {
	--lfc-container: 860px;
}

.lfc-main {
	display: block;
}

.lfc-icon {
	flex: none;
	width: 1em;
	height: 1em;
}

.lfc-icon--arrow {
	width: 20px;
	height: 12px;
}

.lfc-flag {
	flex: none;
	width: 21px;
	height: 15px;
	border-radius: 2px;
}

/* --- Tipografia --------------------------------------------------------- */

.lfc-display,
.lfc-title {
	margin: 0;
	font-family: var(--lfc-font-display);
	font-weight: 400;
	line-height: 0.92;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.lfc-title {
	font-size: var(--lfc-title-size);
	line-height: 1;
}

.lfc-h1 {
	font-size: clamp(60px, 11vw, 190px);
	line-height: 0.86;
}

.lfc-h2 {
	font-size: clamp(46px, 7.4vw, 124px);
}

.lfc-h2--long {
	font-size: clamp(38px, 5vw, 84px);
	line-height: 0.98;
}

.lfc-h3 {
	font-size: clamp(34px, 4vw, 60px);
	line-height: 0.96;
}

.lfc-gold {
	color: var(--lfc-gold);
}

.lfc-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--lfc-gold);
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.lfc-eyebrow::before {
	content: "";
	flex: none;
	width: 44px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--lfc-gold));
}

.lfc-lead {
	color: var(--lfc-g1);
	font-size: clamp(17px, 1.3vw, 20px);
	line-height: 1.62;
	text-wrap: pretty;
}

.lfc-dot {
	display: inline-block;
	width: 0.2em;
	height: 0.2em;
	margin: 0 0.32em;
	border-radius: 50%;
	background: var(--lfc-gold);
	vertical-align: middle;
	transform: translateY(-0.08em);
}

/* --- Sezioni ------------------------------------------------------------ */

.lfc-sec {
	position: relative;
	padding-block: clamp(88px, 12vw, 180px);
}

.lfc-sec--tight {
	padding-block: clamp(64px, 8vw, 110px);
}

.lfc-sec-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	margin-bottom: clamp(40px, 5vw, 72px);
}

.lfc-sec-head .lfc-eyebrow {
	margin-bottom: 14px;
}

.lfc-sec-head .lfc-lead {
	max-width: 44ch;
}

.lfc-scenery {
	background:
		radial-gradient(60% 50% at 50% 0%, rgba(200, 160, 44, 0.12), transparent 70%),
		radial-gradient(120% 80% at 50% -10%, #14334f 0%, #0c2138 38%, #081523 100%);
}

.lfc-light {
	background: var(--lfc-paper);
	color: var(--lfc-ink);
}

.lfc-light .lfc-lead {
	color: #3a4654;
}

.lfc-light .lfc-eyebrow {
	color: var(--lfc-gold-dk);
}

.lfc-light .lfc-eyebrow::before {
	background: linear-gradient(90deg, transparent, var(--lfc-gold-dk));
}

.lfc-light a {
	color: var(--lfc-gold-dk);
}

.lfc-light a:hover {
	color: var(--lfc-navy);
}

.lfc-light :focus-visible {
	outline-color: var(--lfc-navy);
}

.lfc-ring {
	position: absolute;
	border: 1.5px solid rgba(200, 160, 44, 0.28);
	border-radius: 50%;
	pointer-events: none;
	animation: lfc-spin 60s linear infinite;
}

.lfc-ring::after {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	width: 11px;
	height: 11px;
	margin-left: -5.5px;
	border-radius: 50%;
	background: var(--lfc-gold);
}

@keyframes lfc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* --- Comparse ----------------------------------------------------------- */

/* Partono nascoste solo se JavaScript c'è (classe `lfc-js` messa in testata):
   senza script la pagina resta leggibile per intero. */

.lfc-js [data-lfc-rv]:not(.is-in),
.lfc-js [data-lfc-stagger]:not(.is-in) > * {
	opacity: 0;
}

.lfc-js [data-lfc-rv].is-in {
	animation: lfc-fade-up 1.05s var(--lfc-ease) backwards;
	animation-delay: var(--d, 0s);
}

.lfc-js [data-lfc-stagger].is-in > * {
	animation: lfc-fade-up 0.95s var(--lfc-ease) backwards;
	animation-delay: calc(var(--d, 0s) + var(--i, 0) * 75ms);
}

.lfc-js [data-lfc-stagger="pop"].is-in > * {
	animation: lfc-pop 0.8s var(--lfc-spring) backwards;
	animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes lfc-fade-up {
	from {
		opacity: 0;
		transform: translateY(36px);
	}
}

@keyframes lfc-pop {
	from {
		opacity: 0;
		transform: scale(0.55) translateY(20px);
	}
}

.lfc-ln {
	display: block;
	margin-bottom: -0.04em;
	padding-bottom: 0.04em;
	overflow: hidden;
}

.lfc-ln > span {
	display: block;
}

.lfc-js [data-lfc-rv="mask"]:not(.is-in) {
	opacity: 1;
}

.lfc-js [data-lfc-rv="mask"].is-in {
	animation: none;
}

.lfc-js [data-lfc-rv="mask"] .lfc-ln > span {
	transform: translateY(112%);
	transition: transform 1.15s var(--lfc-ease);
	transition-delay: calc(var(--d, 0s) + var(--i, 0) * 90ms);
}

.lfc-js [data-lfc-rv="mask"].is-in .lfc-ln > span {
	transform: none;
}

/* La maschera sta sui figli: messa sul riquadro stesso lo renderebbe
   invisibile anche all'osservatore che deve accorgersi del suo ingresso. */
.lfc-js .lfc-wipe > * {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.5s var(--lfc-ease);
}

.lfc-js .lfc-wipe:not(.is-in) {
	border-color: transparent;
}

.lfc-js .lfc-wipe {
	transition: border-color 1s 0.4s;
}

.lfc-js .lfc-wipe img {
	transform: scale(1.25);
	transition: transform 2s var(--lfc-ease), clip-path 1.5s var(--lfc-ease);
}

.lfc-js .lfc-wipe.is-in > * {
	clip-path: inset(0);
}

.lfc-js .lfc-wipe.is-in img {
	transform: scale(1);
}

.lfc-js .lfc-rule-draw {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.4s var(--lfc-ease) 0.2s;
}

.lfc-js .is-in .lfc-rule-draw,
.lfc-js .lfc-rule-draw.is-in {
	transform: scaleX(1);
}

/* --- Testo lungo -------------------------------------------------------- */

.lfc-prose {
	font-size: 17px;
	line-height: 1.7;
}

.lfc-prose > * + * {
	margin-top: 1.1em;
}

.lfc-prose h1,
.lfc-prose h2,
.lfc-prose h3,
.lfc-prose h4 {
	margin-top: 1.7em;
	font-family: var(--lfc-font-display);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.lfc-prose > :first-child {
	margin-top: 0;
}

.lfc-prose h1 {
	font-size: clamp(34px, 3.6vw, 52px);
}

.lfc-prose h2 {
	font-size: clamp(30px, 3vw, 44px);
}

.lfc-prose h3 {
	font-size: clamp(26px, 2.4vw, 34px);
}

.lfc-prose h4 {
	font-size: clamp(22px, 2vw, 28px);
}

.lfc-prose ul,
.lfc-prose ol {
	padding-left: 1.4em;
}

.lfc-prose ul {
	list-style: disc;
}

.lfc-prose ul ul {
	margin-top: 0.4em;
	list-style: circle;
}

.lfc-prose ol {
	list-style: decimal;
}

.lfc-prose li + li {
	margin-top: 0.4em;
}

.lfc-prose li > p + ul,
.lfc-prose li > p + p {
	margin-top: 0.5em;
}

.lfc-prose li::marker {
	color: var(--lfc-gold-dk);
	font-weight: 800;
}

.lfc-prose hr {
	height: 0;
	margin-block: 2em;
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.2;
}

.lfc-prose a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.lfc-prose img {
	border-radius: var(--lfc-radius);
}

.lfc-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.lfc-prose th,
.lfc-prose td {
	padding: 14px 16px;
	border: 1px solid var(--lfc-hair-ink);
	vertical-align: top;
}

.lfc-prose th {
	background: rgba(200, 160, 44, 0.14);
	font-weight: 800;
	text-align: left;
}

.lfc-prose code {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.lfc-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
	.lfc-prose th,
	.lfc-prose td {
		padding: 9px 10px;
	}
}

@media (max-width: 620px) {
	.lfc-eyebrow {
		gap: 10px;
		font-size: 11px;
		letter-spacing: 0.2em;
	}

	.lfc-eyebrow::before {
		width: 28px;
	}
}

/* --- Meno movimento ----------------------------------------------------- */

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

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	.lfc-js [data-lfc-rv]:not(.is-in),
	.lfc-js [data-lfc-stagger]:not(.is-in) > * {
		opacity: 1;
	}

	.lfc-js [data-lfc-rv="mask"] .lfc-ln > span {
		transform: none;
	}

	.lfc-js .lfc-wipe > * {
		clip-path: none;
	}

	.lfc-js .lfc-wipe img {
		transform: none;
	}

	.lfc-js .lfc-rule-draw {
		transform: none;
	}
}