/* Kinetonos Style: effetti (sfondo aurora, testata, luce animata, interazioni, animazioni).
   Sostituisce background.css, modern.css e animations.css.
   Nessun !important.

   COME SOVRASCRIVERE
   - Le parti in "@layer kinetonos" (aurora, testata vetro/fissa, luce delle sezioni scure, freccia
     dei pulsanti) perdono contro QUALSIASI regola fuori dal layer, qualunque sia la specificita':
     per cambiarle basta il CSS aggiuntivo, senza trucchi.
     Esempio, per spegnere lo sfondo animato:  body::before, body::after { display: none; }
     Esempio, per togliere la sfocatura della testata:  .kn-header { backdrop-filter: none; }
   - Le parti fuori dal layer convivono con gli stili di WordPress (theme.json, blocchi, plugin),
     che sono anch'essi fuori da ogni layer: per questo restano normali regole a bassa specificita'. */

@layer kinetonos {

	/* =====================================================================
	   Sfondo animato "aurora" (solo CSS, vedi anche --kn-aurora-*)
	   ===================================================================== */
	/* Colori e velocita' dello sfondo. Il CSS aggiuntivo (o un tema child) li cambia con :root { ... } */
	:root {
		color-scheme: light;
		--kn-aurora-opacity: 1;
		--kn-aurora-speed: 1; /* 1 = normale (cicli di 15-18 s), 2 = il doppio piu' lento */
		--kn-aurora-a: var(--wp--preset--color--sage, #a9c9be);
		--kn-aurora-b: var(--wp--preset--color--teal, #1f5a5e);
		--kn-aurora-c: var(--wp--preset--color--mint, #d0e0d8);
		--kn-aurora-d: var(--wp--preset--color--copper, #c8774b);
		--kn-aurora-e: var(--wp--preset--color--mist, #e4ecee);
	}

	@media (prefers-color-scheme: dark) {
		:root:not(.kn-light) {
			color-scheme: dark;
			--kn-aurora-opacity: 1;
			--kn-aurora-a: #1b6660;
			--kn-aurora-b: #5fbab2;
			--kn-aurora-c: #174541;
			--kn-aurora-d: #c8774b;
			--kn-aurora-e: #12353a;
		}
	}

	body::before,
	body::after {
		content: "";
		position: fixed;
		inset: -25%;
		z-index: -1;
		pointer-events: none;
		opacity: var(--kn-aurora-opacity);
		will-change: transform;
	}

	body::before {
		background:
			radial-gradient(38% 42% at 22% 24%, color-mix(in srgb, var(--kn-aurora-a) 95%, transparent), transparent 72%),
			radial-gradient(34% 38% at 80% 26%, color-mix(in srgb, var(--kn-aurora-b) 30%, transparent), transparent 72%),
			radial-gradient(30% 34% at 50% 55%, color-mix(in srgb, var(--kn-aurora-e) 90%, transparent), transparent 75%);
	}

	body::after {
		background:
			radial-gradient(36% 40% at 74% 76%, color-mix(in srgb, var(--kn-aurora-c) 100%, transparent), transparent 72%),
			radial-gradient(26% 30% at 18% 82%, color-mix(in srgb, var(--kn-aurora-d) 28%, transparent), transparent 72%),
			radial-gradient(28% 32% at 88% 58%, color-mix(in srgb, var(--kn-aurora-a) 65%, transparent), transparent 72%);
	}

	@media (prefers-reduced-motion: no-preference) {
		body::before {
			animation: kn-aurora-a calc(15s * var(--kn-aurora-speed)) ease-in-out infinite alternate;
		}

		body::after {
			animation: kn-aurora-b calc(18s * var(--kn-aurora-speed)) ease-in-out infinite alternate;
		}
	}

	@keyframes kn-aurora-a {
		0%   { transform: translate3d(-7%, -5%, 0) rotate(0deg) scale(1); }
		50%  { transform: translate3d(8%, 6%, 0) rotate(12deg) scale(1.1); }
		100% { transform: translate3d(-3%, 10%, 0) rotate(-8deg) scale(1.03); }
	}

	@keyframes kn-aurora-b {
		0%   { transform: translate3d(8%, 5%, 0) rotate(0deg) scale(1.05); }
		50%  { transform: translate3d(-8%, -6%, 0) rotate(-13deg) scale(1); }
		100% { transform: translate3d(5%, -10%, 0) rotate(9deg) scale(1.12); }
	}

	.kn-bg-static::before,
	.kn-bg-static::after {
		animation: none;
	}

	@media print {
		body::before,
		body::after {
			display: none;
		}
	}

	/* =====================================================================
	   Testata: vetro, fissa, ombra allo scorrimento
	   ===================================================================== */
	/* Testata "vetro": semitrasparente con sfocatura, sfondo che passa dietro. */
	.kn-header {
		background: color-mix(in srgb, var(--wp--preset--color--paper, #f8f8f8) 62%, transparent);
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--line, #bcd0ca) 70%, transparent);
	}

	@supports (backdrop-filter: blur(1px)) {
		.kn-header {
			-webkit-backdrop-filter: blur(var(--wp--custom--glass--header-blur)) saturate(1.3);
			backdrop-filter: blur(var(--wp--custom--glass--header-blur)) saturate(1.3);
		}
	}

	header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 100;
	}

	body.admin-bar header.wp-block-template-part {
		top: var(--wp-admin--admin-bar--height, 32px);
	}

	/* Sotto il pannello di amministrazione a due altezze (telefono) la barra non e' fissa */
	@media (max-width: 600px) {
		body.admin-bar header.wp-block-template-part {
			top: 0;
		}
	}

	/* Ombra che compare dopo i primi pixel di scorrimento (solo CSS, dove supportato) */
	@supports (animation-timeline: scroll()) {
		@media (prefers-reduced-motion: no-preference) {
			.kn-header {
				animation: kn-header-shadow linear both;
				animation-timeline: scroll(root);
				animation-range: 0 90px;
			}
		}
	}

	@keyframes kn-header-shadow {
		from { box-shadow: 0 0 0 rgba(6, 24, 26, 0); }
		to   { box-shadow: 0 10px 30px rgba(6, 24, 26, 0.10); }
	}

	/* Con la testata fissa, i collegamenti ad ancora non finiscono sotto di lei */
	html {
		scroll-padding-top: 96px;
	}

	/* =====================================================================
	   Sezioni scure con luce animata
	   ===================================================================== */
	.is-style-kn-section-dark,
	.alignfull.has-ink-background-color {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	.is-style-kn-section-dark::before,
	.alignfull.has-ink-background-color::before {
		content: "";
		position: absolute;
		inset: -40%;
		z-index: -1;
		pointer-events: none;
		background:
			radial-gradient(34% 40% at 24% 36%, color-mix(in srgb, var(--wp--preset--color--teal) 70%, transparent), transparent 70%),
			radial-gradient(28% 34% at 78% 70%, color-mix(in srgb, var(--wp--preset--color--copper) 30%, transparent), transparent 70%),
			radial-gradient(30% 34% at 62% 22%, color-mix(in srgb, var(--wp--preset--color--sage) 16%, transparent), transparent 70%);
		will-change: transform;
	}

	@media (prefers-reduced-motion: no-preference) {
		.is-style-kn-section-dark::before,
		.alignfull.has-ink-background-color::before {
			animation: kn-glow 15s ease-in-out infinite alternate;
		}
	}

	@keyframes kn-glow {
		0%   { transform: translate3d(-5%, -3%, 0) rotate(0deg) scale(1); }
		100% { transform: translate3d(6%, 5%, 0) rotate(14deg) scale(1.12); }
	}

	/* Pulsante con freccia che scorre: aggiungi la classe "kn-btn-arrow" al pulsante
	   (la freccia la mette il tema, non serve scriverla nel testo). */
	.kn-btn-arrow > .wp-block-button__link::after {
		content: "\2192";
		display: inline-block;
		margin-inline-start: 0.5em;
		transition: transform 0.25s ease;
	}

	@media (hover: hover) and (prefers-reduced-motion: no-preference) {
		.kn-btn-arrow > .wp-block-button__link:hover::after,
		.kn-btn-arrow > .wp-block-button__link:focus-visible::after {
			transform: translateX(5px);
		}
	}

}

/* =====================================================================
   Tela di fondo (fuori dal layer: deve battere lo sfondo che theme.json mette su body)
   ===================================================================== */
/* La tela di fondo e' la "carta"; il body diventa trasparente cosi' le macchie
   (dietro al body ma sopra la tela) si vedono. */
html {
	background: var(--wp--preset--color--paper, #f8f8f8);
}

html body {
	background: transparent;
}

/* =====================================================================
   Micro-interazioni
   ===================================================================== */
.wp-block-button__link,
.wp-element-button,
.kn-tab-btn,
.is-style-kn-pills a,
.wp-block-search__button {
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wp-block-button__link:hover,
	.wp-element-button:hover {
		transform: translateY(-2px);
		box-shadow: var(--wp--custom--shadow--button);
	}

	.wp-block-button__link:active,
	.wp-element-button:active {
		transform: translateY(0) scale(0.98);
		box-shadow: none;
	}

	.kn-post-card,
	.kn-nav-card {
		transition: transform 0.25s ease, box-shadow 0.25s ease;
	}

	.kn-post-card:hover,
	.kn-nav-card:hover {
		transform: translateY(-4px);
		box-shadow: inset 0 1px 0 var(--kn-glass-border), var(--kn-shadow-lg);
	}
}

/* =====================================================================
   Griglia "bento" (pattern Bento)
   ===================================================================== */
.kn-bento {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.kn-bento > * {
	margin: 0;
	min-width: 0;
}

.kn-bento-hero {
	grid-column: span 2;
	grid-row: span 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.kn-bento-wide {
	grid-column: span 2;
}

.kn-bento-full {
	grid-column: span 3;
}

.kn-bento .kn-big {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(44px, 5vw + 16px, 76px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
}

@media (max-width: 900px) {
	.kn-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kn-bento-hero,
	.kn-bento-full {
		grid-column: span 2;
		grid-row: auto;
	}
}

@media (max-width: 600px) {
	.kn-bento {
		grid-template-columns: minmax(0, 1fr);
	}

	.kn-bento-hero,
	.kn-bento-wide,
	.kn-bento-full {
		grid-column: auto;
	}
}

/* =====================================================================
   Transizioni tra pagine (browser che le supportano; gli altri le ignorano)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	/* La testata resta ferma mentre il resto della pagina sfuma */
	header.wp-block-template-part {
		view-transition-name: kn-header;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.28s;
	}
}

/* =====================================================================
   Modalita' scura (segue l'impostazione del dispositivo)
   ===================================================================== */
/* Per tenere il sito sempre chiaro: classe "kn-light" sull'elemento html
   (o nel CSS aggiuntivo: :root { color-scheme: light; } e rimuovi questo blocco).
   Le sezioni scure restano scure; il resto si inverte.
   Questo blocco sta FUORI dal layer perche' deve battere le variabili di colore che WordPress
   genera da theme.json (anch'esse fuori da ogni layer). I colori dello sfondo aurora in modalita'
   scura sono invece nel layer, in cima al file. */
@media (prefers-color-scheme: dark) {
	:root:not(.kn-light) {
		/* Palette invertita: ink e white si scambiano, cosi' le coppie testo/sfondo restano leggibili */
		--wp--preset--color--paper: #0a1b1d;
		--wp--preset--color--mist: #112a2d;
		--wp--preset--color--mint: #153431;
		--wp--preset--color--white: #0f2528;
		--wp--preset--color--ink: #e7f0ed;
		--wp--preset--color--line: #2a4a4b;
		--wp--preset--color--muted: #a9bdb8;
		--wp--preset--color--teal: #6fc3bc;
		--wp--preset--color--copper: #e0925f;
		--wp--preset--color--silver: #a9b8b8;
		--wp--preset--color--gold: #d8b94a;
		--wp--preset--color--bronze: #d9a066;

		--kn-glass-bg: rgba(255, 255, 255, 0.05);
		--kn-glass-bg-strong: rgba(255, 255, 255, 0.09);
		--kn-glass-border: rgba(255, 255, 255, 0.10);
		--kn-glass-line: rgba(255, 255, 255, 0.10);
		--kn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
		--kn-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
		--kn-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 24px 56px rgba(0, 0, 0, 0.45);
	}

	/* Pannelli che nel tema chiaro sono scuri: tornano ai colori del tema chiaro
	   (cosi' restano scuri, con i loro testi chiari) */
	:root:not(.kn-light) :is(
		.is-style-kn-section-dark,
		.is-style-kn-card-dark,
		.has-ink-background-color,
		.has-ink-soft-background-color
	) {
		--wp--preset--color--paper: #f8f8f8;
		--wp--preset--color--mist: #e4ecee;
		--wp--preset--color--mint: #d0e0d8;
		--wp--preset--color--white: #ffffff;
		--wp--preset--color--ink: #06181a;
		--wp--preset--color--line: #bcd0ca;
		--wp--preset--color--muted: #3e5757;
		--wp--preset--color--teal: #1f5a5e;
		--wp--preset--color--copper: #c8774b;
		--wp--preset--color--silver: #5b6b6b;
		--wp--preset--color--gold: #9a7a12;
		--wp--preset--color--bronze: #8a5a2b;

		--kn-glass-bg: rgba(255, 255, 255, 0.62);
		--kn-glass-bg-strong: rgba(255, 255, 255, 0.82);
		--kn-glass-border: rgba(255, 255, 255, 0.75);
		--kn-glass-line: rgba(31, 90, 94, 0.14);
	}

	/* Le foto non abbagliano su fondo scuro */
	:root:not(.kn-light) :is(.wp-block-image, .wp-block-post-featured-image) img {
		filter: brightness(0.92) contrast(1.02);
	}

	:root:not(.kn-light) .kn-header {
		border-bottom-color: rgba(255, 255, 255, 0.08);
	}
}

/* =====================================================================
   Animazioni opzionali (si attivano dal pannello "Animazione" del blocco)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* ---------- Entrata allo scorrimento ---------- */
	.kn-js :is(.kn-anim-up, .kn-anim-fade, .kn-anim-left, .kn-anim-right, .kn-anim-zoom, .kn-anim-blur) {
		opacity: 0;
		transition:
			opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
			transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
			filter 0.7s ease,
			translate 0.25s ease,
			box-shadow 0.25s ease;
		transition-delay: var(--kn-delay, 0s), var(--kn-delay, 0s), var(--kn-delay, 0s), 0s, 0s;
	}

	.kn-js .kn-anim-up { transform: translateY(28px); }
	.kn-js .kn-anim-left { transform: translateX(-36px); }
	.kn-js .kn-anim-right { transform: translateX(36px); }
	.kn-js .kn-anim-zoom { transform: scale(0.94); }
	.kn-js .kn-anim-blur { transform: translateY(12px); filter: blur(10px); }

	.kn-js :is(.kn-anim-up, .kn-anim-fade, .kn-anim-left, .kn-anim-right, .kn-anim-zoom, .kn-anim-blur).is-visible {
		opacity: 1;
		transform: none;
		filter: none;
	}

	/* ---------- Ritardo ---------- */
	.kn-delay-1 { --kn-delay: 0.12s; }
	.kn-delay-2 { --kn-delay: 0.25s; }
	.kn-delay-3 { --kn-delay: 0.4s; }

	/* ---------- Elementi a cascata (per Gruppo, Colonne, Pulsanti) ---------- */
	.kn-js .kn-anim-stagger > * {
		opacity: 0;
		transform: translateY(24px);
		transition:
			opacity 0.6s ease,
			transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
			translate 0.25s ease,
			box-shadow 0.25s ease;
	}

	.kn-js .kn-anim-stagger.is-visible > * {
		opacity: 1;
		transform: none;
	}

	.kn-js .kn-anim-stagger.is-visible > :nth-child(2) { transition-delay: 0.1s, 0.1s, 0s, 0s; }
	.kn-js .kn-anim-stagger.is-visible > :nth-child(3) { transition-delay: 0.2s, 0.2s, 0s, 0s; }
	.kn-js .kn-anim-stagger.is-visible > :nth-child(4) { transition-delay: 0.3s, 0.3s, 0s, 0s; }
	.kn-js .kn-anim-stagger.is-visible > :nth-child(5) { transition-delay: 0.4s, 0.4s, 0s, 0s; }
	.kn-js .kn-anim-stagger.is-visible > :nth-child(6) { transition-delay: 0.5s, 0.5s, 0s, 0s; }
	.kn-js .kn-anim-stagger.is-visible > :nth-child(7) { transition-delay: 0.6s, 0.6s, 0s, 0s; }
	.kn-js .kn-anim-stagger.is-visible > :nth-child(8) { transition-delay: 0.7s, 0.7s, 0s, 0s; }

	/* ---------- Effetti: solleva al passaggio ---------- */
	.kn-fx-lift {
		transition: translate 0.25s ease, box-shadow 0.25s ease;
	}

	.kn-fx-lift:hover {
		translate: 0 -6px;
		box-shadow: 0 18px 40px rgba(6, 24, 26, 0.16);
	}

	/* ---------- Effetti: galleggia ---------- */
	.kn-fx-float {
		animation: kn-float 6s ease-in-out infinite alternate;
	}

	@keyframes kn-float {
		from { translate: 0 0; }
		to { translate: 0 -12px; }
	}

	/* ---------- Effetti: sottolineatura che si disegna ---------- */
	.kn-fx-underline {
		width: fit-content;
		max-width: 100%;
		padding-bottom: 8px;
		background: linear-gradient(var(--wp--preset--color--copper), var(--wp--preset--color--copper)) no-repeat 0 100% / 100% 3px;
	}

	.kn-js .kn-fx-underline {
		background-size: 0 3px;
		transition: background-size 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
	}

	.kn-js .kn-fx-underline.is-visible {
		background-size: 100% 3px;
	}

	/* ---------- Effetti: sfumatura in movimento (per le sezioni) ---------- */
	body .kn-fx-gradient {
		background-image: linear-gradient(120deg, var(--wp--preset--color--mint), var(--wp--preset--color--mist), var(--wp--preset--color--mint), var(--wp--preset--color--mist));
		background-size: 300% 300%;
		animation: kn-gradient 18s ease-in-out infinite;
	}

	body .is-style-kn-section-dark.kn-fx-gradient {
		background-image: linear-gradient(120deg, var(--wp--preset--color--ink), var(--wp--preset--color--deep), var(--wp--preset--color--ink-soft), var(--wp--preset--color--ink));
	}

	@keyframes kn-gradient {
		0% { background-position: 0% 50%; }
		50% { background-position: 100% 50%; }
		100% { background-position: 0% 50%; }
	}

	/* ---------- Effetti: pulsanti ---------- */
	.kn-fx-shine .wp-block-button__link {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	.kn-fx-shine .wp-block-button__link::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
		translate: -120% 0;
		transition: translate 0.7s ease;
	}

	.kn-fx-shine .wp-block-button__link:hover::after {
		translate: 120% 0;
	}

	.kn-fx-pulse .wp-block-button__link {
		animation: kn-pulse 2.6s ease-out infinite;
	}

	@keyframes kn-pulse {
		0% { box-shadow: 0 0 0 0 rgba(31, 90, 94, 0.45); }
		70% { box-shadow: 0 0 0 14px rgba(31, 90, 94, 0); }
		100% { box-shadow: 0 0 0 0 rgba(31, 90, 94, 0); }
	}
}