/* =====================================================================
   ASIA J. LANNI — mondeis.css v1.10.0
   Nero #000000 · Bianco #FFFFFF · Rosso #E8000D
   Label rossi (solo testo), stacchi di montaggio, Inter Tight; marchio "AJL — Stacco" in Bodoni Moda (tools/make_mark.py).
   ===================================================================== */

/* ---------- Font ---------- */
@font-face {
	font-family: 'Inter Tight';
	src: url('../fonts/InterTight-Variable.ttf') format('truetype');
	font-weight: 100 900;
	font-display: swap;
}

/* Bodoni Moda Black (SIL OFL 1.1, vedi fonts/BodoniModa-OFL.txt) — voci grandi del menu,
   stesso carattere del marchio */
@font-face {
	font-family: 'Bodoni Moda';
	src: url('../fonts/BodoniModa-Black.woff2') format('woff2');
	font-weight: 900;
	font-display: swap;
}


/* ---------- Tokens ---------- */
:root {
	--blk: #000000;
	--wht: #FFFFFF;
	--red: #E8000D;
	--dim: rgba(255, 255, 255, .55);
	--line: rgba(255, 255, 255, .14);
	--ff-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', serif;
	--ff: 'Inter Tight', 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
	--pad: clamp(18px, 4vw, 56px);
	--header-h: 72px;
	--ease-snap: cubic-bezier(.72, 0, .18, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scrollbar-width: none; }

body.mnd-body {
	background: var(--blk);
	color: var(--wht);
	font-family: var(--ff);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.mnd-lock { overflow: hidden; }

body.mnd-page--home,
body.mnd-page--works { overflow: hidden; height: 100vh; height: 100svh; }
body.mnd-page--home .mnd-footer,
body.mnd-page--works .mnd-footer { display: none; }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--red); color: var(--wht); }

/* Scrollbar nascosta: stessa larghezza utile su tutte le pagine,
   la navbar resta ferma passando da Home/Work ad About/Contact */
::-webkit-scrollbar { width: 0; height: 0; background: transparent; }

:focus { outline: none; }
:focus-visible { outline: 1px solid var(--red); outline-offset: 4px; }

/* ---------- Grain leggerissima ---------- */
.mnd-grain {
	position: fixed;
	inset: -60px;
	z-index: 3500;
	pointer-events: none;
	opacity: .04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: mnd-grain 1.15s steps(3) infinite;
}

@keyframes mnd-grain {
	0% { transform: translate(0, 0); }
	33% { transform: translate(-22px, 14px); }
	66% { transform: translate(16px, -18px); }
	100% { transform: translate(0, 0); }
}

.mnd-scan { display: none; }

/* ---------- Chip — label rosso, solo testo (v1.2) ---------- */
.mnd-chip {
	display: inline-block;
	padding: 0;
	background: none;
	color: var(--red);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}

/* ---------- Cursor ---------- */
.mnd-cursor {
	position: fixed;
	top: 0; left: 0;
	z-index: 4000;
	pointer-events: none;
	transform: translate(-200px, -200px);
	will-change: transform;
}

/* Cursore: pallino REC rosso (v1.4) */
.mnd-cursor__ring {
	display: block;
	width: 12px; height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: var(--red);
	transition: transform .3s var(--ease-out), opacity .2s;
}

/* Il pallino copre il cursore di sistema ovunque (come il bottone PLAY) */
html.mnd-has-cursor,
html.mnd-has-cursor * { cursor: none !important; }
html.mnd-has-cursor input,
html.mnd-has-cursor textarea { cursor: text !important; }

.mnd-cursor.is-link .mnd-cursor__ring { transform: scale(1.8); }
.mnd-cursor.is-out { opacity: 0; }
.mnd-cursor { transition: opacity .2s; }

/* Il pallino respira come la spia REC di una camera */
@keyframes mnd-rec { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .35; } }
.mnd-cursor:not(.is-link):not(.is-play) .mnd-cursor__ring { animation: mnd-rec 1.2s steps(1) infinite; }

.mnd-cursor__label {
	position: absolute;
	top: 0; left: 0;
	transform: translate(-50%, -50%) scale(0);
	padding: 10px 18px;
	background: var(--red);
	color: var(--wht);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	border-radius: 3px;
	white-space: nowrap;
	transition: transform .3s var(--ease-out);
}

.mnd-cursor.is-play .mnd-cursor__ring { transform: scale(0); }
.mnd-cursor.is-play .mnd-cursor__label { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }

@media (pointer: coarse) { .mnd-cursor { display: none; } }

/* ---------- Header ---------- */
.mnd-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 900;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 22px var(--pad) 14px;
	pointer-events: none;
	transition: background .3s;
}

.mnd-header > * { pointer-events: auto; }

.mnd-header.is-scrolled { background: linear-gradient(180deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, 0)); }

.mnd-header__bar {
	display: flex;
	align-items: center;
	gap: clamp(22px, 3vw, 44px);
}

.mnd-header { align-items: center; }

/* Monogramma AJL: SVG vettoriale, colore dal testo */
.mnd-mark { display: block; width: auto; color: var(--wht); overflow: visible; }

.mnd-logo { height: 28px; }

.mnd-header__logo { display: inline-flex; align-items: center; transition: opacity .25s; }
.mnd-header__logo:hover { opacity: 1; }

/* Hover sul marchio: le due metà si ricompongono, la linea rossa si chiude */
/* Scroll: core.js sposta la metà bassa con --kick in base alla velocità (classe is-kicking);
   fuori dallo scroll torna morbida al suo posto */
.mnd-header__logo .mnd-mark__bot { transform: translateX(var(--kick, 0px)); }
.mnd-header__logo:not(.is-kicking) .mnd-mark__bot { transition: transform .45s var(--ease-snap); }
.mnd-header__logo .mnd-mark__cut { transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease-snap); }
.mnd-header__logo:hover .mnd-mark__bot { transform: translate(var(--sx), var(--sy)); }
.mnd-header__logo:hover .mnd-mark__cut { transform: scaleX(0); }

/* ---------- Voce "a stacco" ----------
   Il testo vero resta trasparente (per lettori di schermo e larghezza); sopra ci sono
   due copie ritagliate: metà alta e metà bassa. Al passaggio una lama rossa attraversa
   la parola e la metà bassa scivola a destra, come nel marchio. */
.mnd-cut {
	position: relative;
	display: inline-block;
	color: transparent;
	white-space: nowrap;
}
.mnd-cut::before,
.mnd-cut::after {
	content: attr(data-text);
	position: absolute;
	left: 0; top: 0;
	color: var(--wht);
	transition: transform .42s var(--ease-snap), color .25s;
}
/* Le due metà si sovrappongono di un soffio: a riposo nessuna riga di giunzione */
.mnd-cut::before { clip-path: inset(0 0 47% 0); }
.mnd-cut::after  { clip-path: inset(52% 0 0 0); }
.mnd-cut i {
	position: absolute;
	left: -6%; right: -14%;
	top: 52%;
	height: 2px;
	margin-top: -1px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .32s var(--ease-snap);
}

/* Solo in movimento: un taglio fermo si leggerebbe come una parola barrata */
a:hover > .mnd-cut::after,
a:focus-visible > .mnd-cut::after { transform: translate(.22em, .1em); }
a:hover > .mnd-cut i,
a:focus-visible > .mnd-cut i { transform: scaleX(1); }

.mnd-cut__num {
	font-size: .62em;
	font-weight: 800;
	letter-spacing: .08em;
	color: var(--red);
	vertical-align: super;
	margin-right: .5em;
}

/* ---------- Nav desktop: una riga ---------- */
.mnd-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.6vw, 40px);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.mnd-nav__link { padding: 8px 0; }
.mnd-nav__link .mnd-cut::before,
.mnd-nav__link .mnd-cut::after { color: rgba(255, 255, 255, .6); }
.mnd-nav__link:hover .mnd-cut::before,
.mnd-nav__link:hover .mnd-cut::after,
.mnd-nav__link.is-current .mnd-cut::before,
.mnd-nav__link.is-current .mnd-cut::after { color: var(--wht); }
.mnd-nav__link .mnd-cut i { height: 1px; margin-top: -.5px; }

.mnd-lang { display: flex; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.mnd-lang__item { padding: 6px 8px; color: var(--dim); transition: color .2s; }
.mnd-lang__item.is-active { color: var(--wht); }
.mnd-lang__item + .mnd-lang__item { border-left: 1px solid var(--line); }
.mnd-lang__item:hover { color: var(--red); }

/* ---------- Toggle mobile: due linee sfalsate (lo stacco) → X rossa ---------- */
.mnd-menu-toggle {
	display: none;
	position: relative;
	z-index: 1001;
	width: 44px; height: 44px;
	margin-right: -10px;
	align-items: center;
	justify-content: center;
}

.mnd-burger { position: relative; display: block; width: 26px; height: 12px; }
.mnd-burger i {
	position: absolute;
	left: 0;
	width: 26px; height: 2px;
	background: var(--wht);
	transition: transform .45s var(--ease-snap), background .25s, width .3s;
}
.mnd-burger i:first-child { top: 0; }
.mnd-burger i:last-child { top: 10px; width: 20px; transform: translateX(6px); }

/* Menu aperto: l'header (marchio e X) resta sopra l'overlay */
body.mnd-menu-open .mnd-header { z-index: 1100; background: none; }

body.mnd-menu-open .mnd-burger i { background: var(--red); width: 26px; }
body.mnd-menu-open .mnd-burger i:first-child { transform: translateY(5px) rotate(45deg); }
body.mnd-menu-open .mnd-burger i:last-child { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
	.mnd-header__bar { display: none; }
	.mnd-menu-toggle { display: inline-flex; }
}

/* ---------- Overlay: si apre dal centro lungo la linea rossa ---------- */
.mnd-menu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: var(--blk);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: calc(var(--header-h) + 10px) var(--pad) 120px;
	visibility: hidden;
	clip-path: inset(50% 0 50% 0);
	transition: clip-path .7s var(--ease-snap), visibility 0s linear .7s;
}

.mnd-menu.is-open {
	visibility: visible;
	clip-path: inset(0 0 0 0);
	transition: clip-path .7s var(--ease-snap);
}

/* La lama che apre il sipario */
.mnd-menu::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 2px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left center;
}
.mnd-menu.is-open::before { animation: mnd-blade .7s var(--ease-snap); }

.mnd-menu__nav { display: flex; flex-direction: column; gap: clamp(6px, 1.6vh, 16px); }

.mnd-menu__item {
	display: block;
	font-family: var(--ff-display);
	font-weight: 900;
	font-size: clamp(52px, 15vw, 132px);
	line-height: .98;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.mnd-menu__item .mnd-cut i { height: 3px; margin-top: -1.5px; }
.mnd-menu__item .mnd-cut__num { font-family: var(--ff); font-size: 13px; letter-spacing: .14em; vertical-align: top; margin-right: 14px; position: relative; top: .5em; }

/* Entrata: le due metà di ogni parola arrivano da lati opposti e si incastrano */
.mnd-menu .mnd-menu__item .mnd-cut::before { transform: translateX(-34px); opacity: 0; }
.mnd-menu .mnd-menu__item .mnd-cut::after  { transform: translateX(34px);  opacity: 0; }
.mnd-menu .mnd-menu__item .mnd-cut::before,
.mnd-menu .mnd-menu__item .mnd-cut::after {
	transition: transform .7s var(--ease-snap), opacity .3s, color .25s;
	transition-delay: calc(.22s + var(--i, 0) * .08s);
}
.mnd-menu.is-open .mnd-menu__item .mnd-cut::before,
.mnd-menu.is-open .mnd-menu__item .mnd-cut::after { transform: none; opacity: 1; }
.mnd-menu.is-open .mnd-menu__item:hover .mnd-cut::after { transform: translate(.08em, .04em); transition-delay: 0s; }
.mnd-menu__item.is-current .mnd-cut::before,
.mnd-menu__item.is-current .mnd-cut::after { color: var(--red); }

.mnd-menu__foot {
	position: absolute;
	left: var(--pad); right: var(--pad); bottom: 30px;
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--dim);
	opacity: 0;
	transition: opacity .4s .5s;
}
.mnd-menu.is-open .mnd-menu__foot { opacity: 1; }
.mnd-menu__foot a:hover { color: var(--red); }
.mnd-menu__foot .mnd-lang { margin-left: auto; }

/* ---------- DECK — stacchi di montaggio ---------- */
.mnd-deck {
	position: fixed;
	inset: 0;
	background: var(--blk);
	overflow: hidden;
	touch-action: none;
}

/* Vanish: dissolvenza in blur tra le slide */
.mnd-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	filter: blur(22px);
	transform: scale(1.045);
	transition:
		opacity .88s var(--ease-out),
		filter .88s var(--ease-out),
		transform .88s var(--ease-out),
		visibility 0s linear .88s;
}

.mnd-slide.is-active {
	opacity: 1;
	visibility: visible;
	filter: none;
	transform: none;
	z-index: 2;
	transition:
		opacity .88s var(--ease-out),
		filter .88s var(--ease-out),
		transform .88s var(--ease-out);
}

.mnd-slide.is-leaving {
	opacity: 0;
	visibility: visible;
	filter: blur(26px);
	transform: scale(1.055);
	z-index: 3;
	transition:
		opacity .88s var(--ease-out),
		filter .88s var(--ease-out),
		transform .88s var(--ease-out);
}

.mnd-card__media {
	position: absolute;
	inset: 0;
	background: #050505;
	overflow: hidden;
	cursor: none;
}

@media (pointer: coarse) { .mnd-card__media { cursor: pointer; } }

.mnd-card__vid,
.mnd-card__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mnd-card__poster { z-index: 2; transition: opacity .3s; }
.mnd-slide.is-playing .mnd-card__poster { opacity: 0; }

.mnd-card__ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #050505;
}

.mnd-card__ph span {
	color: var(--red);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .2em;
}

.mnd-card__veil {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.6) 100%);
	pointer-events: none;
}

/* Info slide — entrata a scatto, da cut */
.mnd-slide__info {
	position: absolute;
	left: var(--pad); right: var(--pad);
	bottom: clamp(42px, 8vh, 84px);
	z-index: 4;
	pointer-events: none;
}

.mnd-slide.is-active .mnd-slide__info { animation: mnd-snap .28s var(--ease-snap) 1; }

@keyframes mnd-snap {
	0% { transform: translateY(14px); opacity: 0; }
	100% { transform: none; opacity: 1; }
}

.mnd-slide__info .mnd-chip { margin-bottom: 14px; }

.mnd-slide__title {
	font-weight: 800;
	text-transform: uppercase;
	font-size: 150px;
	line-height: .92;
	letter-spacing: -.02em;
	color: var(--wht);
	/* il titolo finisce a circa l'80% dello schermo, prima della colonna del menu */
	max-width: 82%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 900px) { .mnd-slide__title { max-width: 100%; } }

.mnd-slide__wordmark { height: clamp(36px, 7vw, 96px); }

/* UI del deck */
.mnd-deck__ui {
	position: absolute;
	inset: 0;
	z-index: 10;
	pointer-events: none;
}

.mnd-rail {
	position: absolute;
	left: calc(var(--pad) - 4px);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.mnd-rail__ticks { display: flex; flex-direction: column; gap: 7px; }

.mnd-rail__ticks span {
	width: 14px;
	height: 2px;
	background: rgba(255, 255, 255, .3);
	transition: width .3s var(--ease-snap), background .3s;
}

.mnd-rail__ticks span.is-on { width: 30px; background: var(--red); }

.mnd-rail b {
	font-weight: 800;
	font-size: 15px;
	color: var(--wht);
}

#mnd-rail-num.tick { animation: mnd-snap .25s var(--ease-snap) 1; }

.mnd-deck__hint {
	position: absolute;
	right: var(--pad);
	bottom: 18px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .3em;
	color: var(--dim);
	animation: mnd-hint 2.4s ease-in-out infinite;
}

@keyframes mnd-hint {
	0%, 100% { opacity: .45; }
	50% { opacity: 1; }
}

/* Filtri (Work) — solo testo, attivo in rosso. INDEX in coda alla riga,
   lontano dal menu laterale (niente più sovrapposizioni) */
.mnd-filters {
	position: absolute;
	top: calc(var(--header-h) + 16px);
	left: var(--pad);
	right: calc(var(--pad) + 140px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 22px;
	pointer-events: auto;
}

.mnd-filter,
.mnd-index-btn {
	padding: 6px 0;
	background: none;
	border: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, .72);
	text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
	transition: color .2s;
}

.mnd-filter:hover,
.mnd-index-btn:hover { color: var(--wht); }
.mnd-filter.is-on { color: var(--red); }

.mnd-index-btn {
	position: relative;
	padding-left: 22px;
	color: var(--wht);
}

.mnd-index-btn::before {
	content: '';
	position: absolute;
	left: 0; top: 50%;
	width: 1px; height: 12px;
	margin-top: -6px;
	background: rgba(255, 255, 255, .35);
}

.mnd-index-btn:hover { color: var(--red); }

@media (max-width: 900px) {
	.mnd-filters { right: var(--pad); gap: 4px 16px; }
}

/* End slide — GET IN TOUCH come una title-slide */
.mnd-slide--end { background: var(--blk); }

.mnd-end__mark {
	position: absolute;
	left: 50%; top: 50%;
	width: min(84vw, 1200px);
	height: auto;
	transform: translate(-50%, -50%);
	opacity: .07;
	pointer-events: none;
}

.mnd-slide__title--mail { text-transform: lowercase; letter-spacing: -.02em; }
.mnd-slide__title--mail a { pointer-events: auto; border-bottom: 4px solid var(--red); transition: color .2s; }
.mnd-slide__title--mail a:hover { color: var(--red); }

.mnd-end__socials { margin-top: 16px; }
.mnd-end__socials a {
	pointer-events: auto;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .08em;
	color: var(--wht);
	transition: color .2s;
}
.mnd-end__socials a:hover { color: var(--red); }

.mnd-end__legal {
	position: absolute;
	right: var(--pad);
	bottom: clamp(42px, 8vh, 84px);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--dim);
	text-align: right;
	z-index: 5;
}

.mnd-end__legal a:hover { color: var(--red); }

/* ---------- INDEX overlay ---------- */
.mnd-index {
	position: fixed;
	inset: 0;
	z-index: 2100;
	background: rgba(0, 0, 0, .96);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s var(--ease-out), visibility 0s linear .25s;
	overflow-y: auto;
}

.mnd-index.is-open { opacity: 1; visibility: visible; transition: opacity .25s var(--ease-out); }

.mnd-index__close {
	position: fixed;
	top: 20px; right: var(--pad);
	z-index: 2;
	width: 44px; height: 44px;
	background: var(--red);
	border-radius: 3px;
	font-size: 16px;
	font-weight: 800;
	transition: transform .2s;
}

.mnd-index__close:hover { transform: rotate(-4deg); }

.mnd-index__inner {
	columns: 2;
	column-gap: clamp(40px, 6vw, 100px);
	padding: calc(var(--header-h) + 30px) var(--pad) 80px;
	max-width: 1500px;
	margin: 0 auto;
}

.mnd-index__group { break-inside: avoid; margin-bottom: 44px; }
.mnd-index__group .mnd-chip { margin-bottom: 16px; }

.mnd-index__group li {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
	font-weight: 500;
}

.mnd-index__group li em { font-style: normal; color: var(--red); font-weight: 700; }

@media (max-width: 900px) { .mnd-index__inner { columns: 1; } }

/* ---------- Viewer + transport ---------- */
.mnd-viewer {
	position: fixed;
	inset: 0;
	z-index: 2200;
	background: var(--blk);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s var(--ease-out), visibility 0s linear .2s;
}

.mnd-viewer.is-open { opacity: 1; visibility: visible; transition: opacity .2s var(--ease-out); }

.mnd-viewer__stage { position: absolute; inset: 0; }
.mnd-viewer__stage video { width: 100%; height: 100%; object-fit: contain; background: var(--blk); }

.mnd-viewer__title {
	position: absolute;
	left: var(--pad); right: var(--pad); top: 24px;
	z-index: 5;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(18px, 2.6vw, 36px);
	line-height: .95;
	letter-spacing: -.015em;
	pointer-events: none;
	text-shadow: 0 4px 30px rgba(0, 0, 0, .6);
}

.mnd-vtc {
	position: absolute;
	top: 30px; right: var(--pad);
	z-index: 6;
	display: inline-flex;
	gap: 8px;
	align-items: baseline;
	color: var(--red);
	text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
	font-weight: 800;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
}

.mnd-vtc i { font-style: normal; opacity: .7; }
.mnd-vtc__dur { opacity: .7; }

.mnd-vctl {
	position: absolute;
	bottom: 34px;
	z-index: 7;
	display: flex;
	gap: 10px;
}

.mnd-vctl--l { left: var(--pad); }
.mnd-vctl--r { right: var(--pad); }

.mnd-vbtn {
	padding: 12px 18px;
	background: rgba(0, 0, 0, .55);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 3px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--wht);
	transition: background .2s, color .2s, transform .2s, border-color .2s;
}

.mnd-vbtn:hover { background: var(--red); border-color: var(--red); transform: rotate(-1.5deg); }
.mnd-vbtn--x { background: var(--wht); color: var(--blk); border-color: var(--wht); }

/* Timeline a filo dello schermo */
.mnd-scrub {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 18px;
	z-index: 8;
	cursor: pointer;
	touch-action: none;
}

.mnd-scrub::before {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4px;
	background: rgba(255, 255, 255, .16);
	transition: height .2s var(--ease-out);
}

.mnd-scrub:hover::before { height: 8px; }

.mnd-scrub__fill {
	position: absolute;
	left: 0; bottom: 0;
	height: 4px;
	width: 0%;
	background: var(--red);
	pointer-events: none;
	transition: height .2s var(--ease-out);
}

.mnd-scrub:hover .mnd-scrub__fill { height: 8px; }

@media (max-width: 760px) {
	.mnd-vtc__dur, .mnd-vtc i { display: none; }
	.mnd-vbtn { padding: 11px 13px; }
}

/* Credits — titoli di coda a tutto schermo, stampati */
.mnd-credits {
	position: absolute;
	inset: 0;
	z-index: 9;
	background: rgba(0, 0, 0, .94);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--ease-out), visibility 0s linear .3s;
	overflow-y: auto;
}

.mnd-credits.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease-out); }

.mnd-credits__close {
	position: fixed;
	top: 24px; right: var(--pad);
	width: 44px; height: 44px;
	background: var(--red);
	border-radius: 3px;
	font-size: 16px;
	font-weight: 800;
	transition: transform .2s;
}

.mnd-credits__close:hover { transform: rotate(-4deg); }

.mnd-credits__inner {
	max-width: 780px;
	width: 100%;
	padding: 90px var(--pad);
	text-align: center;
}

.mnd-credits h3 {
	display: inline-block;
	color: var(--red);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .14em;
	margin-bottom: 40px;
	text-transform: uppercase;
}

.mnd-credits li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 18px 0;
	opacity: 0;
	transform: scale(1.25) rotate(-2deg);
	transition: opacity .35s var(--ease-snap), transform .35s var(--ease-snap);
	transition-delay: calc(var(--i, 0) * 90ms);
}

.mnd-credits.is-open li { opacity: 1; transform: none; }

.mnd-credits li b {
	display: inline-block;
	color: var(--red);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.mnd-credits li span {
	font-weight: 800;
	font-size: clamp(19px, 2.4vw, 30px);
	letter-spacing: -.01em;
	text-transform: uppercase;
}

/* ---------- Veil ---------- */
.mnd-veil {
	position: fixed;
	inset: 0;
	z-index: 5000;
	background: var(--blk);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s steps(2), visibility 0s linear .3s;
}

.mnd-veil.is-on {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .3s steps(2);
}

body.mnd-exiting main,
body.mnd-exiting .mnd-deck { filter: brightness(1.3); transition: filter .12s steps(1); }

/* ---------- Pagine statiche ---------- */
.mnd-page { padding-top: var(--header-h); min-height: 100vh; }

/* About: la foto parte dal bordo alto, sotto l'header */
.mnd-page-about { padding-top: 0; }

.mnd-vanish { opacity: 0; transform: translateY(22px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.mnd-vanish.is-in { opacity: 1; transform: none; }

/* About — in linea col resto: title-slide + sezioni numerate */
.mnd-abhero {
	position: relative;
	overflow: hidden;
	min-height: 92vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: calc(var(--header-h) + clamp(60px, 11vh, 130px)) var(--pad) clamp(50px, 9vh, 100px);
}

/* Hero About: foto di sfondo con velo scuro, testi sopra */
.mnd-abhero--photo::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--mnd-abhero-img);
	background-size: cover;
	background-position: center 28%;
	opacity: .5;
}

.mnd-abhero--photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,.9) 100%);
}

.mnd-abhero__inner { position: relative; z-index: 2; }

/* Mobile: foto verticale, volto in alto, testi sotto */
@media (max-width: 760px) {
	.mnd-abhero { min-height: 100svh; }
	.mnd-abhero--photo::before {
		background-image: var(--mnd-abhero-img-m, var(--mnd-abhero-img));
		background-position: center 18%;
		opacity: .62;
	}
	.mnd-abhero--photo::after {
		background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.15) 50%, rgba(0,0,0,.92) 82%);
	}
}

.mnd-abhero .mnd-chip { margin-bottom: 22px; align-self: flex-start; }

.mnd-abhero__title {
	text-indent: -.12em;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(38px, 7vw, 118px);
	line-height: .92;
	letter-spacing: -.022em;
	max-width: 14ch;
}

.mnd-abhero__lead {
	margin-top: 34px;
	max-width: 760px;
	font-size: clamp(18px, 1.8vw, 24px);
	line-height: 1.45;
	font-weight: 600;
	color: rgba(255, 255, 255, .9);
}

.mnd-absec {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) 2.2fr;
	gap: clamp(24px, 4vw, 70px);
	padding: clamp(50px, 9vh, 100px) var(--pad);
	border-top: 1px solid var(--line);
}

.mnd-absec__head .mnd-chip { position: sticky; top: 110px; }

.mnd-absec__body p { margin-bottom: 16px; max-width: 760px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.mnd-absec__body p:last-child { margin-bottom: 0; }

.mnd-absec__goal { margin-top: 26px; font-weight: 600; color: var(--wht); }
.mnd-absec__goal .mnd-chip { display: block; margin-bottom: 10px; }

/* ---------- About: effetti allo scroll (about.js) ----------
   --hp: avanzamento dell'hero (0→1) · --sp: lettura della sezione (0→1) */
.mnd-about-fx .mnd-abhero--photo::before {
	transform: translateY(calc(var(--hp, 0) * 16%)) scale(calc(1.02 + var(--hp, 0) * .12));
	transform-origin: center 30%;
	will-change: transform;
}
.mnd-about-fx .mnd-abhero__inner {
	transform: translateY(calc(var(--hp, 0) * -60px));
	opacity: calc(1 - var(--hp, 0) * .7);
}

/* Il titolo viene tagliato mentre scorri: la metà bassa scivola, la lama si allunga */
.mnd-abhero__title .mnd-cut::before,
.mnd-abhero__title .mnd-cut::after { transition: none; }
.mnd-about-fx .mnd-abhero__title .mnd-cut::after { transform: translate(calc(var(--hp, 0) * .5em), calc(var(--hp, 0) * .08em)); }
.mnd-abhero__title .mnd-cut i { height: 3px; margin-top: -1.5px; transition: none; }
.mnd-about-fx .mnd-abhero__title .mnd-cut i { transform: scaleX(min(1, calc(var(--hp, 0) * 3))); }

/* Parole che si accendono passando alla linea di lettura */
.mnd-about-fx .mnd-word { color: rgba(255, 255, 255, .2); transition: color .35s ease; }
.mnd-about-fx .mnd-word.is-lit { color: rgba(255, 255, 255, .92); }

/* Filo d'apertura delle sezioni: si disegna da sinistra */
.mnd-about-fx .mnd-absec { position: relative; border-top-color: transparent; }
.mnd-about-fx .mnd-absec::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: -1px;
	height: 1px;
	background: var(--line);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s var(--ease-snap);
}
.mnd-about-fx .mnd-absec.is-drawn::before { transform: scaleX(1); }

/* Barretta rossa sotto l'etichetta: segue la lettura della sezione */
.mnd-about-fx .mnd-absec__head .mnd-chip::after {
	content: '';
	display: block;
	width: 120px;
	height: 2px;
	margin-top: 12px;
	background: var(--red);
	transform: scaleX(var(--sp, 0));
	transform-origin: left center;
}

.mnd-styleblock { margin-bottom: 44px; }
.mnd-styleblock:last-child { margin-bottom: 0; }

.mnd-styleblock h3 {
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(24px, 3.4vw, 52px);
	letter-spacing: -.018em;
	line-height: 1;
	margin-bottom: 18px;
}

/* Awards — righe display con wipe rosso in hover */
.mnd-awards li {
	position: relative;
	display: flex;
	gap: clamp(16px, 2.6vw, 40px);
	align-items: baseline;
	padding: 20px 14px;
	margin: 0 -14px;
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}

.mnd-awards li::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--ease-snap);
	z-index: 0;
}

.mnd-awards li:hover::before { transform: scaleX(1); }

.mnd-awards li > * { position: relative; z-index: 1; }

.mnd-awards li em {
	font-style: normal;
	font-weight: 800;
	font-size: 13px;
	color: var(--red);
	flex: 0 0 52px;
	transition: color .25s;
}

.mnd-awards li:hover em { color: var(--wht); }

.mnd-awards li b {
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(17px, 2.2vw, 32px);
	line-height: 1.05;
	letter-spacing: -.012em;
	transition: transform .4s var(--ease-out);
}

.mnd-awards li:hover b { transform: translateX(12px); }

/* Directors — righe giganti */
.mnd-duo__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
	transition: padding-left .35s var(--ease-out);
}

.mnd-duo__row:hover { padding-left: 14px; }

.mnd-duo__row b {
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(26px, 4.6vw, 66px);
	line-height: 1;
	letter-spacing: -.02em;
	transition: color .25s;
}

.mnd-duo__row:hover b { color: var(--red); }

.mnd-duo__row span { font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--dim); white-space: nowrap; transition: color .25s; }
.mnd-duo__row:hover span { color: var(--wht); }

/* Client wall — loghi normalizzati alla stessa dimensione */
.mnd-wall__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.mnd-wall__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 116px;
	padding: 20px;
	background: var(--blk);
	transition: background .25s;
}

.mnd-wall__cell:hover { background: #0d0d0d; }

.mnd-wall__cell img,
.mnd-wall__logo {
	height: 34px !important;
	width: auto !important;
	max-width: 72% !important;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: .85;
	transition: opacity .25s;
}

.mnd-wall__cell:hover img { opacity: 1; }

/* Work, ultima slide: su mobile i legali vanno sotto, senza accavallarsi alla mail */
@media (max-width: 760px) {
	.mnd-slide--end .mnd-slide__info { bottom: clamp(104px, 20vh, 170px); }

	.mnd-end__legal {
		left: var(--pad);
		right: var(--pad);
		bottom: 44px;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
		text-align: left;
		gap: 6px 14px;
	}
}

@media (max-width: 900px) {
	.mnd-absec { grid-template-columns: 1fr; gap: 22px; }
	.mnd-absec__head .mnd-chip { position: static; }
	.mnd-wall__grid { grid-template-columns: repeat(2, 1fr); }
	.mnd-wall__cell { height: 92px; }
	.mnd-wall__cell img, .mnd-wall__logo { height: 26px !important; }
}

/* Contact */
.mnd-contact {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(40px, 6vw, 90px);
	align-items: start;
	padding: clamp(70px, 12vh, 130px) var(--pad) 12vh;
	max-width: 1400px;
}

.mnd-contact__side .mnd-chip { display: block; margin-bottom: 18px; }

.mnd-contact__email,
.mnd-contact__ig {
	display: block;
	width: fit-content;
	font-weight: 800;
	font-size: clamp(24px, 2.8vw, 40px);
	letter-spacing: -.015em;
	text-transform: lowercase;
	border-bottom: 3px solid var(--red);
	padding-bottom: 4px;
	transition: color .2s;
	word-break: break-all;
}

.mnd-contact__email:hover,
.mnd-contact__ig:hover { color: var(--red); }

.mnd-contact__ig {
	margin-top: 22px;
	text-transform: none;
}

.mnd-contact__addr { margin-top: 26px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }

.mnd-form { display: flex; flex-direction: column; gap: 30px; }
.mnd-form__field { display: flex; flex-direction: column; gap: 12px; }
.mnd-chip--field { align-self: flex-start; font-size: 11px; }

.mnd-form__field input,
.mnd-form__field textarea {
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .25);
	color: var(--wht);
	font: inherit;
	padding: 6px 0 12px;
	transition: border-color .2s;
	resize: vertical;
}

.mnd-form__field input:focus,
.mnd-form__field textarea:focus { outline: none; border-color: var(--red); }

.mnd-form__send {
	align-self: flex-start;
	padding: 15px 30px;
	background: var(--red);
	border-radius: 3px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .18em;
	transition: transform .2s, background .2s, color .2s;
}

.mnd-form__send:hover { background: var(--wht); color: var(--blk); transform: rotate(-1.5deg); }

.mnd-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.mnd-notice {
	padding: 14px 20px;
	border-radius: 4px;
	margin-bottom: 22px;
	font-size: 14px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, .04);
}
.mnd-notice--err { border-color: var(--red); background: rgba(232, 0, 13, .1); }

@media (max-width: 900px) { .mnd-contact { grid-template-columns: 1fr; gap: 50px; } }

/* Doc */
.mnd-pagehead { padding: clamp(28px, 6vh, 64px) var(--pad) clamp(16px, 3vh, 34px); }
.mnd-pagehead h1 {
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(34px, 5.6vw, 80px);
	line-height: .95;
	letter-spacing: -.02em;
}

.mnd-doc { padding: 20px var(--pad) 100px; max-width: 860px; color: rgba(255, 255, 255, .85); }
.mnd-doc h2, .mnd-doc h3 { margin: 34px 0 14px; font-weight: 800; text-transform: uppercase; }
.mnd-doc p, .mnd-doc ul, .mnd-doc ol { margin-bottom: 16px; }
.mnd-doc ul { list-style: disc; padding-left: 22px; }
.mnd-doc a { color: var(--red); text-decoration: underline; }

/* ---------- Footer — in linea col brand ---------- */
.mnd-footer { border-top: 1px solid var(--line); background: var(--blk); }

.mnd-footer__cta {
	padding: clamp(50px, 9vh, 100px) var(--pad) clamp(30px, 5vh, 60px);
}

.mnd-footer__cta .mnd-chip { margin-bottom: 20px; }

/* Mail e Instagram affiancati, stessa dimensione */
.mnd-footer__links {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px clamp(24px, 4vw, 60px);
}

.mnd-footer__email,
.mnd-footer__ig {
	display: block;
	font-weight: 800;
	text-transform: lowercase;
	font-size: clamp(24px, 3.4vw, 54px);
	line-height: .95;
	letter-spacing: -.022em;
	word-break: break-word;
	transition: color .25s, transform .35s var(--ease-out);
}

.mnd-footer__email:hover,
.mnd-footer__ig:hover { color: var(--red); transform: translateX(10px); }

.mnd-footer__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	padding: clamp(26px, 4vh, 44px) var(--pad);
	border-top: 1px solid var(--line);
}

.mnd-footer__col { display: flex; flex-direction: column; gap: 9px; }

.mnd-footer__col a,
.mnd-footer__col span {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
	transition: color .2s, padding-left .25s var(--ease-out);
}

.mnd-footer__col span { color: var(--dim); }
.mnd-footer__col a:hover { color: var(--red); padding-left: 6px; }

.mnd-footer__base {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px var(--pad) 24px;
	border-top: 1px solid var(--line);
}

.mnd-footer__symbol { height: 22px; }

.mnd-footer__credit {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .18em;
	color: var(--dim);
	transition: color .2s;
}

.mnd-footer__credit:hover { color: var(--red); }

@media (max-width: 760px) { .mnd-footer__grid { grid-template-columns: 1fr; } }

/* ---------- HOME — stile rodeo ---------- */
.mnd-home { position: fixed; inset: 0; background: var(--blk); overflow: hidden; }

.mnd-home__bg { position: absolute; inset: 0; }

.mnd-home__vid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	filter: blur(20px);
	transform: scale(1.06);
	transition: opacity .9s var(--ease-out), filter .9s var(--ease-out), transform .9s var(--ease-out);
}

.mnd-home__vid.is-on { opacity: 1; filter: none; transform: none; }

.mnd-home__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.35) 100%);
	pointer-events: none;
}

.mnd-home__list {
	position: absolute;
	left: var(--pad);
	bottom: clamp(46px, 9vh, 100px);
	right: var(--pad);
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	max-height: calc(100vh - 220px);
	overflow-y: auto;
	scrollbar-width: none;
}

.mnd-home__list::-webkit-scrollbar { display: none; }

.mnd-home__item {
	display: flex;
	max-width: 100%;
	align-items: baseline;
	gap: 16px;
	padding: 7px 0;
	text-align: left;
	cursor: pointer;
}

.mnd-home__item i {
	font-style: normal;
	font-weight: 800;
	font-size: 12px;
	color: var(--red);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity .3s, transform .3s var(--ease-out);
}

.mnd-home__item b {
	font-weight: 800;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	font-size: clamp(20px, 3vw, 44px);
	line-height: 1;
	letter-spacing: -.02em;
	color: rgba(255, 255, 255, .38);
	transition: color .3s, transform .35s var(--ease-out);
}

.mnd-home__item .mnd-chip {
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .3s, transform .3s var(--ease-out);
	font-size: 11px;
}

.mnd-home__item.is-on i,
.mnd-home__item:hover i { opacity: 1; transform: none; }

.mnd-home__item.is-on b,
.mnd-home__item:hover b { color: var(--wht); transform: translateX(10px); }

.mnd-home__item.is-on .mnd-chip { opacity: 1; transform: none; }

.mnd-home__wordmark { height: clamp(20px, 2.8vw, 42px); opacity: .45; transition: opacity .3s, transform .35s var(--ease-out); }
.mnd-home__item.is-on .mnd-home__wordmark,
.mnd-home__item:hover .mnd-home__wordmark { opacity: 1; transform: translateX(10px); }

.mnd-home__hint {
	position: absolute;
	right: var(--pad);
	bottom: 18px;
	z-index: 4;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .3em;
	color: var(--dim);
	animation: mnd-hint 2.4s ease-in-out infinite;
}

.mnd-home__empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
}

.mnd-home__empty .mnd-home__wordmark { height: clamp(40px, 8vw, 96px); opacity: 1; }

body.mnd-page--home .mnd-footer { display: none; }

/* ---------- INTRO — "Stacco" (v1.8) ----------
   Montaggio che accelera → flash → AJL intero → la lama rossa lo taglia e la metà
   bassa scivola via → lo schermo si apre lungo il taglio e rivela la home.
   Fasi: is-reel, is-mark, is-flash, is-black, is-cut, is-tag, is-split */
.mnd-intro {
	position: fixed;
	inset: 0;
	z-index: 3600;
	overflow: hidden;
	cursor: pointer;
}

/* Il "fotogramma" dell'intro: all'uscita viene duplicato e le due copie,
   ritagliate sopra e sotto la linea del taglio, si aprono come una porta */
.mnd-intro__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--blk);
	transition: transform .95s cubic-bezier(.76, 0, .24, 1);
	will-change: transform;
}
.mnd-intro.is-split .mnd-intro__stage:first-child { transform: translateY(-100%); }
.mnd-intro.is-split .mnd-intro__stage:last-child { transform: translateY(100%); }
.mnd-intro.is-split::after { opacity: 0; }

/* Mentre l'intro è a schermo la home aspetta leggermente ingrandita, poi si assesta */
.mnd-home { transition: transform 1.3s cubic-bezier(.16, 1, .3, 1); }
body.mnd-intro-on .mnd-home { transform: scale(1.08); }

.mnd-intro.is-done { opacity: 0; pointer-events: none; }
.mnd-intro.is-removed { display: none; }

/* Grana sopra a tutto */
.mnd-intro::after {
	content: '';
	position: absolute;
	inset: -60px;
	z-index: 5;
	pointer-events: none;
	opacity: .1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: mnd-grain .4s steps(3) infinite;
}

/* Montaggio: un fotogramma alla volta, nessuna transizione (tagli netti) */
.mnd-reel { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.mnd-intro.is-reel .mnd-reel { visibility: visible; }
.mnd-reel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	transform: scale(var(--z, 1));
	filter: contrast(1.12) saturate(.9);
}
/* Zoom d'urto: ogni fotogramma entra un po' più vicino e si assesta */
.mnd-reel img.is-on { opacity: 1; animation: mnd-punch .32s cubic-bezier(.16, 1, .3, 1); }

@keyframes mnd-punch {
	from { transform: scale(calc(var(--z, 1) * 1.14)); }
	to   { transform: scale(var(--z, 1)); }
}

/* Scossone di camera a ogni taglio */
.mnd-intro__stage.is-hit .mnd-reel { animation: mnd-hit .14s steps(3); }

@keyframes mnd-hit {
	0%   { transform: translate(0, 0); }
	33%  { transform: translate(-7px, 4px); }
	66%  { transform: translate(5px, -3px); }
	100% { transform: translate(0, 0); }
}

/* Fotogramma rosso pieno nel finale del montaggio */
.mnd-intro__stage.is-red { background: var(--red); }
.mnd-intro__stage.is-red .mnd-reel { visibility: hidden; }

/* Flash di due fotogrammi tra montaggio e marchio */
.mnd-intro.is-flash .mnd-intro__stage { background: var(--wht); }
.mnd-intro.is-flash .mnd-reel { visibility: hidden; }

.mnd-stacco {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 2.6vw, 34px);
	pointer-events: none;
	opacity: 0;
}

.mnd-stacco__ajl { width: min(72vw, 980px); height: auto; overflow: visible; }

/* Sopra il montaggio il marchio è in negativo, poi diventa bianco pieno sul nero */
.mnd-intro.is-mark .mnd-stacco { opacity: 1; mix-blend-mode: difference; }
.mnd-intro.is-black .mnd-stacco { opacity: 1; }

/* Prima del taglio il marchio è intero: la metà bassa torna al suo posto e la linea è chiusa */
.mnd-stacco__ajl .mnd-mark__bot {
	transform: translate(var(--sx), var(--sy));
	transition: transform .6s var(--ease-snap) .16s;
}
.mnd-stacco__ajl .mnd-mark__cut {
	transform: scaleX(0);
	transform-box: fill-box;
	transform-origin: left center;
	transition: transform .3s var(--ease-snap) .1s;
}
.mnd-intro.is-cut .mnd-stacco__ajl .mnd-mark__bot,
.mnd-intro.is-cut .mnd-stacco__ajl .mnd-mark__cut { transform: none; }

/* La lama: linea rossa che attraversa tutto lo schermo e poi si ritira nel marchio */
.mnd-cutline {
	position: absolute;
	left: 0; right: 0;
	top: 50%;
	height: 3px;
	z-index: 3;
	background: var(--red);
	transform: translateY(-50%) scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}
.mnd-intro.is-cut .mnd-cutline { animation: mnd-blade .62s var(--ease-snap) forwards; }

@keyframes mnd-blade {
	0%   { transform: translateY(-50%) scaleX(0); transform-origin: left center; }
	45%  { transform: translateY(-50%) scaleX(1); transform-origin: left center; }
	46%  { transform: translateY(-50%) scaleX(1); transform-origin: right center; }
	100% { transform: translateY(-50%) scaleX(0); transform-origin: right center; }
}

.mnd-stacco__tag {
	font-size: clamp(10px, .9vw, 12px);
	font-weight: 800;
	letter-spacing: .32em;
	margin-right: -.32em;
	color: var(--wht);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .35s, transform .5s var(--ease-out);
}
.mnd-intro.is-tag .mnd-stacco__tag { opacity: 1; transform: none; }

.mnd-intro__tc {
	position: absolute;
	left: var(--pad);
	bottom: 22px;
	z-index: 4;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	font-variant-numeric: tabular-nums;
	color: var(--red);
	mix-blend-mode: difference;
}


@media (max-width: 760px) {
	.mnd-stacco__ajl { width: 76vw; }
}

/* ---------- Riduzione movimento ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.mnd-grain { animation: none; }
	.mnd-vanish { opacity: 1; transform: none; }
	.mnd-slide, .mnd-home__vid { transition: none; filter: none; transform: none; }
	html { scroll-behavior: auto; }
}