/**
 * ===================================================================
 * hero animato con lo scroll (partials/hero_scroll.html + js/hero.js)
 *
 * Tutte le regole dell'animazione valgono solo con JS attivo, su schermi
 * larghi più di 768px, senza prefers-reduced-motion e se hero.js non ha messo
 * .is-static (es. JSON degli angoli non caricato). In tutti gli altri casi,
 * mobile compreso, #intro resta esattamente com'è definito in main.css.
 * -------------------------------------------------------------------
 */

/* Stessa condizione di animationQuery in hero.js */
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {

	/* Runway: dà lo spazio di scroll su cui avanza l'animazione */
	.js .hero-runway:not(.is-static) {
		position: relative;
		height: 300vh;
		background: #111111;
	}

	/* Frame fermo nel viewport per tutta la runway, poi scorre via con la pagina.
	   Lo sfondo è il primo frame: si vede subito, prima che il canvas sia pronto
	   (center/cover = stessa matematica "cover" del canvas). */
	.js .hero-runway:not(.is-static) .hero-sticky {
		position: sticky;
		top: 0;
		height: 100vh;
		overflow: hidden;
		background: #111111 url(../hero/frames/frame_000.webp) no-repeat center / cover;
	}

	.js .hero-runway:not(.is-static) .hero-canvas {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		z-index: 1;
		transform-origin: 0 0;   /* durante lo zoom riceve la stessa omografia della hero */
		will-change: transform;
	}

	/* Luce dello schermo sulla tastiera: il gradiente (posizione e raggi) lo
	   imposta hero.js; durante lo zoom segue la trasformazione del canvas */
	.js .hero-runway:not(.is-static) .hero-glow {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		display: block;
		transform-origin: 0 0;
		opacity: 0;
		pointer-events: none;
		mix-blend-mode: screen;
		will-change: transform, opacity;
	}

	/* Vetro sopra la hero, dentro il livello proiettato: alone caldo del
	   tramonto in alto a sinistra, ombra interna ai bordi, filo di luce sullo
	   spigolo alto e (::before) riflesso diagonale che scorre con lo scroll */
	.js .hero-runway:not(.is-static) .hero-glass {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		display: block;
		pointer-events: none;
		background: radial-gradient(ellipse at 12% -10%, rgba(255, 170, 90, 0.3), transparent 55%);
		box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	}

	.js .hero-runway:not(.is-static) .hero-glass::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(115deg,
			transparent 39%,
			rgba(255, 255, 255, 0.13) 43%,
			rgba(255, 255, 255, 0.04) 45.5%,
			transparent 47%,
			rgba(255, 255, 255, 0.07) 48.5%,
			transparent 50%);
		background-size: 250% 100%;
		background-position: var(--glass-sheen, 75%) 0;
		mix-blend-mode: screen;
	}

	/* Livello proiettato nello schermo del laptop. transform-origin 0 0 perché
	   la matrice dell'omografia è calcolata a partire dall'angolo in alto a sinistra. */
	.js .hero-runway:not(.is-static) .hero-screen {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 3;
		transform-origin: 0 0;
		opacity: 0;
		pointer-events: none;
		will-change: transform, opacity, filter;
	}

	/* A fine animazione niente will-change: il testo torna renderizzato
	   esattamente come nella hero normale */
	.js .hero-runway:not(.is-static) .hero-screen.is-done {
		will-change: auto;
	}

	.js .hero-runway:not(.is-static) .hero-screen.is-interactive {
		pointer-events: auto;
	}

	/* Dentro un elemento trasformato background-attachment: fixed non funziona;
	   l'altezza deve essere quella del viewport perché la proiezione sia esatta. */
	.js .hero-runway:not(.is-static) #intro {
		height: 100%;
		min-height: 0;
		background-attachment: scroll;
	}

	/* All'inizio niente menu: hero.js lo fa riapparire a fine zoom (CONFIG.headerFadeStart).
	   Qui è nascosto già prima che hero.js parta, per non vederlo lampeggiare.
	   html.hero-static (fallback di hero.js) lo rimette sempre visibile. */
	.js:not(.hero-static) body > header {
		opacity: 0;
		visibility: hidden;
	}

	.js .hero-runway:not(.is-static) .hero-skip {
		position: absolute;
		top: 24px;   /* il menu qui è nascosto: il link può stare in alto */
		right: 24px;
		z-index: 5;
		display: block;
	}

	.js .hero-runway:not(.is-static) .hero-scroll-cue,
	.js .hero-runway:not(.is-static) .hero-title {
		display: block;
	}

	.js .hero-runway:not(.is-static) .hero-debug:not([hidden]) {
		display: block;
	}
}

/* Senza animazione (reduced motion, no JS, .is-static) i wrapper devono essere
   "trasparenti": #intro ha height: 100% e deve continuare a riempire il viewport */
.hero-runway,
.hero-sticky,
.hero-screen {
	height: 100%;
}

/* Elementi esistenti solo per l'animazione: nascosti in ogni altro caso */
.hero-canvas,
.hero-title,
.hero-glow,
.hero-glass,
.hero-scroll-cue,
.hero-skip,
.hero-debug {
	display: none;
}

/* Titolo sopra il laptop chiuso: nel cielo, sopra il coperchio. L'ingresso
   è un keyframe sul wrapper interno; l'uscita con lo scroll la gestisce
   hero.js sul contenitore, così le due trasformazioni non si pestano. */
.hero-title {
	position: absolute;
	top: 14vh;
	left: 0;
	right: 0;
	z-index: 3;
	padding: 0 16px;
	text-align: center;
	pointer-events: none;
}

.hero-title-inner {
	animation: hero-title-in 1.2s ease-out both;
}

/* [data-theme] batte i colori dei paragrafi del tema chiaro: il titolo sta
   sempre sopra la foto, quindi resta bianco in entrambi i temi */
.hero-title .hero-title-name,
[data-theme] .hero-title .hero-title-name {
	margin: 0 0 1.2rem;
	font-family: "poppins-bold", sans-serif;
	font-size: clamp(3.2rem, 6vw, 7.2rem);
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: .4rem;
	color: #FFFFFF;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.hero-title .hero-title-role,
[data-theme] .hero-title .hero-title-role {
	margin: 0;
	font-family: "lora-regular", serif;
	font-size: clamp(1.3rem, 1.6vw, 1.9rem);
	line-height: 1.6;
	letter-spacing: .1rem;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55);
	animation: hero-title-in 1.2s ease-out .3s both;
}

@keyframes hero-title-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Icona "scorri": sagoma di un mouse centrata in basso, la rotellina scende */
.hero-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 5vh;
	z-index: 4;
	width: 26px;
	height: 42px;
	margin-left: -13px;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.hero-scroll-wheel {
	position: absolute;
	top: 7px;
	left: 50%;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: #FFFFFF;
	animation: hero-scroll-wheel 1.6s ease-in-out infinite;
}

@keyframes hero-scroll-wheel {
	0%   { transform: translateY(0);    opacity: 1; }
	70%  { transform: translateY(12px); opacity: 0; }
	100% { transform: translateY(0);    opacity: 0; }
}

/* [data-theme] serve a battere la regola dei link del tema chiaro in theme.css:
   il link sta sempre sopra la foto, quindi resta chiaro in entrambi i temi */
.hero-skip,
.hero-skip:visited,
[data-theme] .hero-skip,
[data-theme] .hero-skip:visited {
	font-family: "poppins-bold", sans-serif;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: .2rem;
	color: rgba(255, 255, 255, 0.8);
	background: rgba(0, 0, 0, 0.35);
	padding: .4rem 1.2rem;
	border-radius: 2rem;
}

.hero-skip:hover,
.hero-skip:focus,
[data-theme] .hero-skip:hover,
[data-theme] .hero-skip:focus {
	color: #ffea00;
}

/**
 * Debug (?debug=1): pannello con i valori e punti sugli angoli dello schermo
 * ---------------------------------------------------------------
 */
.hero-debug {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 7;
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.75);
	color: #7CFC00;
	font: 12px/1.5 monospace;
	text-align: left;
	border-radius: 4px;
}

/* .hero-debug davanti: battono gli stili di pre e button del tema */
.hero-debug .hero-debug-info {
	margin: 0 0 6px;
	padding: 0;
	max-height: none;
	overflow: visible;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	white-space: pre;
}

.hero-debug .hero-debug-actions button {
	display: inline-block;
	width: auto;
	line-height: 1;
	font: 11px/1 monospace;
	color: #000000;
	background: #7CFC00;
	border: 0;
	border-radius: 3px;
	padding: 5px 8px;
	margin: 0 6px 0 0;
	cursor: pointer;
	height: auto;
	letter-spacing: 0;
	text-transform: none;
}

.hero-debug-dot {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: #FF2D55;
	box-shadow: 0 0 0 2px #FFFFFF;
	pointer-events: none;
}

/* Contorno dello schermo */
.hero-debug-lines {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.hero-debug-lines polygon {
	fill: none;
	stroke: rgba(255, 45, 85, 0.8);
	stroke-width: 1;
}

/* Lente: pixel del frame ingranditi, senza sfocatura */
.hero-debug .hero-debug-lens {
	display: block;
	width: 160px;
	height: 160px;
	margin: 0 0 6px;
	image-rendering: pixelated;
	border: 1px solid #7CFC00;
}

/* Modificabile: area di presa di 30px, il punto rosso resta al centro */
.hero-debug-dot.is-editable {
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	z-index: 6;
	background: transparent;
	box-shadow: none;
	pointer-events: auto;
	cursor: grab;
	touch-action: none;
}

.hero-debug-dot.is-editable::after {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #FF2D55;
	box-shadow: 0 0 0 2px #FFFFFF;
}

.hero-debug-dot.is-selected::after {
	box-shadow: 0 0 0 2px #FFEA00;
}