/* ==========================================================================
   Orografie Custom — animations.css
   Modulo animazioni: reveal, parallax, hover cinematici, custom cursor,
   page transitions. Tutto opt-in via data-attributes, rispettoso di
   prefers-reduced-motion.
   ========================================================================== */

/* ---------- Variabili animazioni ---------- */
:root {
	--anim-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
	--anim-ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
	--anim-fast:        .35s;
	--anim-base:        .8s;
	--anim-slow:        1.2s;
	--anim-depth-shadow: 0 38px 90px -42px rgba(15, 13, 11, 0.34);
}

/* ==========================================================================
   1. Reveal on scroll (potenziato)
   --------------------------------------------------------------------------
   Stili applicati a [data-reveal]; varianti via data-reveal="fade-up | fade-in
   | fade-left | fade-right | scale-in | blur-in".
   Stagger via data-reveal-stagger sul contenitore.
   ========================================================================== */
[data-reveal] {
	opacity: 0;
	transition:
		opacity var(--anim-base) var(--anim-ease),
		transform var(--anim-base) var(--anim-ease),
		filter var(--anim-base) var(--anim-ease);
	will-change: opacity, transform;
}
[data-reveal="fade-up"]    { transform: translateY(36px); }
[data-reveal="fade-down"]  { transform: translateY(-36px); }
[data-reveal="fade-left"]  { transform: translateX(36px); }
[data-reveal="fade-right"] { transform: translateX(-36px); }
[data-reveal="fade-in"]    { transform: none; }
[data-reveal="scale-in"]   { transform: scale(0.94); }
[data-reveal="blur-in"]    { filter: blur(12px); transform: translateY(20px); }

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Quando GSAP gestisce i reveal disabilitiamo le transition CSS
   per evitare doppie interpolazioni. */
body.gsap-enhanced [data-reveal] {
	transition: none !important;
}

/* Hero title split words (creato via JS) */
.hero .display--xl .hero-word-wrap {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}
.hero .display--xl .hero-word {
	display: inline-block;
	will-change: transform, opacity;
}

/* Scene scroll molto evidente (home) */
.proof.is-scroll-scene-active,
.metodo.is-scroll-scene-active {
	will-change: transform, opacity, filter;
}
.proof.is-scroll-scene-active .proof__item,
.metodo.is-scroll-scene-active .step {
	will-change: transform, opacity, filter;
	transition: box-shadow .3s var(--anim-ease), border-color .3s var(--anim-ease);
}
.proof.is-scroll-scene-active .proof__list,
.metodo.is-scroll-scene-active .metodo__steps {
	overflow: visible;
}
.proof.is-scroll-scene-active .proof__list {
	border-top: 0;
	gap: 1.25rem;
	background: transparent;
}
.proof.is-scroll-scene-active .proof__item {
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: var(--c-paper);
	position: relative;
	z-index: 1;
}
.proof.is-scroll-scene-active .proof__item.is-active-scale,
.metodo.is-scroll-scene-active .step.is-active-scale {
	box-shadow: 0 34px 64px -34px rgba(13, 11, 8, 0.46);
	border-color: rgba(107, 79, 58, 0.55);
	z-index: 3;
}
.proof.is-scroll-scene-active .proof__item.is-active-scale {
	outline: 0;
	border-color: rgba(107, 79, 58, 0.55);
}
.scene-progress {
	position: absolute;
	right: clamp(0.6rem, 2vw, 1.4rem);
	top: 50%;
	transform: translateY(-50%);
	z-index: 8;
	display: grid;
	gap: .55rem;
	padding: .55rem;
	border-radius: 999px;
	background: rgba(13, 11, 8, 0.08);
	backdrop-filter: blur(4px);
}
.scene-progress__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(29, 26, 22, 0.24);
	transform: scale(1);
	transition: transform .26s var(--anim-ease), background-color .26s var(--anim-ease), box-shadow .26s var(--anim-ease);
}
.scene-progress__dot.is-active {
	background: var(--c-accent);
	transform: scale(1.65);
	box-shadow: 0 0 0 6px rgba(107, 79, 58, 0.16);
}
@media (max-width: 960px) {
	.scene-progress {
		display: none;
	}
}

/* Stagger automatico: i figli di un contenitore [data-reveal-stagger] entrano
   uno dopo l'altro. JS imposta --stagger-i sull'elemento. */
[data-reveal-stagger] > [data-reveal] {
	transition-delay: calc(var(--stagger-i, 0) * 90ms);
}

/* ==========================================================================
   2. Parallax
   --------------------------------------------------------------------------
   data-parallax="0.2" sull'elemento. JS legge il valore e applica
   --parallax-y in funzione dello scroll.
   ========================================================================== */
[data-parallax] {
	will-change: transform;
	transform: translate3d(0, var(--parallax-y, 0px), 0);
}
.parallax-wrap {
	position: relative;
	overflow: hidden;
}
.parallax-wrap > [data-parallax] {
	height: 120%;
	margin-top: -10%;
	width: 100%;
}
.parallax-wrap > [data-parallax] img,
.parallax-wrap > [data-parallax] figure {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Profondita extra per hero/case usando il sistema GSAP. */
.hero__media,
.page-head__media,
.case__media {
	box-shadow: var(--anim-depth-shadow);
	transform-style: preserve-3d;
}

/* ==========================================================================
   3. Hover cinematici
   ========================================================================== */
.hover-cinema,
.contexts__item,
.case-card,
.servizio-card,
.archive-progetti__item,
.studies__item {
	overflow: hidden;
	position: relative;
	isolation: isolate;
	transition:
		transform .6s var(--anim-ease),
		box-shadow .6s var(--anim-ease);
}

.hover-cinema__media,
.contexts__item .media,
.contexts__item img,
.case-card__media,
.case-card__media img,
.archive-progetti__item img,
.studies__item img {
	transition:
		transform 1.2s var(--anim-ease),
		filter 1.2s var(--anim-ease);
	transform-origin: center center;
}

.hover-cinema:hover,
.contexts__item:hover,
.case-card:hover,
.archive-progetti__item:hover,
.studies__item:hover {
	transform: translateY(-4px);
}
.hover-cinema:hover .hover-cinema__media,
.contexts__item:hover img,
.contexts__item:hover .media,
.case-card:hover .case-card__media img,
.case-card:hover .case-card__media,
.archive-progetti__item:hover img,
.studies__item:hover img {
	transform: scale(1.06);
	filter: saturate(1.05);
}

/* Overlay graduale */
.hover-cinema::after,
.contexts__item::after,
.case-card::after,
.archive-progetti__item::after,
.studies__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(29,26,22,0) 35%, rgba(29,26,22,0.55) 100%);
	opacity: 0;
	transition: opacity .8s var(--anim-ease);
	pointer-events: none;
	z-index: 1;
}
.hover-cinema:hover::after,
.contexts__item:hover::after,
.case-card:hover::after,
.archive-progetti__item:hover::after,
.studies__item:hover::after {
	opacity: 1;
}

/* Etichetta "Vedi" che appare su hover */
.hover-cinema__label,
.case-card__cta,
.archive-progetti__item .item-cta {
	position: absolute;
	left: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 2;
	color: var(--c-on-dark);
	font-family: var(--ff-body);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity .6s var(--anim-ease) .1s,
		transform .6s var(--anim-ease) .1s;
}
.hover-cinema:hover .hover-cinema__label,
.case-card:hover .case-card__cta,
.archive-progetti__item:hover .item-cta {
	opacity: 1;
	transform: translateY(0);
}
.hover-cinema__label::after,
.case-card__cta::after,
.archive-progetti__item .item-cta::after {
	content: "";
	width: 24px;
	height: 1px;
	background: currentColor;
	transition: width .6s var(--anim-ease);
}
.hover-cinema:hover .hover-cinema__label::after,
.case-card:hover .case-card__cta::after,
.archive-progetti__item:hover .item-cta::after {
	width: 36px;
}

/* Pulsanti: micro-shift della freccia */
.btn .btn__arrow {
	transition: transform .5s var(--anim-ease);
}
.btn:hover .btn__arrow {
	transform: translateX(6px);
}

/* Link inline: underline animato */
a.link-cinema,
.menu-primary a {
	position: relative;
}
a.link-cinema::after,
.menu-primary a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .5s var(--anim-ease);
}
a.link-cinema:hover::after,
.menu-primary a:hover::after,
.menu-primary .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* ==========================================================================
   4. Custom cursor (solo desktop con pointer:fine)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
	body.has-custom-cursor,
	body.has-custom-cursor a,
	body.has-custom-cursor button,
	body.has-custom-cursor [role="button"],
	body.has-custom-cursor input,
	body.has-custom-cursor textarea,
	body.has-custom-cursor select {
		cursor: none;
	}
}

.cursor {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 9999;
	mix-blend-mode: difference;
	transform: translate3d(-100px, -100px, 0);
	will-change: transform;
	transition: opacity .3s var(--anim-ease);
}
.cursor:not(.is-active) { opacity: 0; }
.cursor--icon {
	mix-blend-mode: normal;
}
.cursor--icon .cursor__ring,
.cursor--icon .cursor__dot,
.cursor--icon .cursor__label {
	display: none;
}
.cursor__symbol {
	position: absolute;
	top: 0;
	left: 0;
	width: 58px;
	height: 58px;
	color: #05070a;
	transform: translate(-50%, -50%) rotate(-12deg) scale(1);
	transform-origin: center;
	filter: drop-shadow(0 8px 18px rgba(5, 7, 10, 0.24));
	transition: transform .35s var(--anim-ease), opacity .35s var(--anim-ease);
}
.cursor__symbol svg {
	display: block;
	width: 100%;
	height: 100%;
}
.cursor.is-link .cursor__symbol {
	transform: translate(-50%, -50%) rotate(-12deg) scale(1.08);
}
.cursor.is-media .cursor__symbol {
	transform: translate(-50%, -50%) rotate(-12deg) scale(1.15);
}
.cursor__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-on-dark);
	transition:
		width .35s var(--anim-ease),
		height .35s var(--anim-ease),
		background-color .35s var(--anim-ease);
}
.cursor__ring {
	width: 36px;
	height: 36px;
	margin: -15px 0 0 -15px;
	border-radius: 50%;
	border: 1px solid var(--c-on-dark);
	transition:
		width .45s var(--anim-ease),
		height .45s var(--anim-ease),
		margin .45s var(--anim-ease),
		opacity .35s var(--anim-ease),
		background-color .35s var(--anim-ease);
}
.cursor.is-link .cursor__dot { width: 0; height: 0; }
.cursor.is-link .cursor__ring {
	width: 56px; height: 56px;
	margin: -28px 0 0 -28px;
	background: var(--c-on-dark);
}
.cursor.is-media .cursor__ring {
	width: 90px; height: 90px;
	margin: -45px 0 0 -45px;
	background: var(--c-accent);
	border-color: transparent;
}
.cursor.is-media .cursor__dot { width: 0; height: 0; }
.cursor.is-media .cursor__label {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
.cursor__label {
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--ff-body);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--c-on-dark);
	mix-blend-mode: difference;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.7);
	transition:
		opacity .35s var(--anim-ease),
		transform .35s var(--anim-ease);
	white-space: nowrap;
	pointer-events: none;
}

/* ==========================================================================
   5. Page transitions
   ========================================================================== */
.page-transition {
	position: fixed;
	inset: 0;
	z-index: 9000;
	pointer-events: none;
	transform: translateY(100%);
	background: transparent;
	transition: transform .9s cubic-bezier(0.76, 0, 0.24, 1);
	overflow: hidden;
}
.page-transition.is-leaving { transform: translateY(0); }
.page-transition.is-entering {
	transform: translateY(-100%);
	transition: transform .9s cubic-bezier(0.76, 0, 0.24, 1);
}
.page-transition__row {
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	overflow: hidden;
	will-change: transform;
}
.page-transition__row--top {
	top: 0;
	background: var(--c-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-104%);
}
.page-transition__row--bottom {
	bottom: 0;
	background: linear-gradient(135deg, #1f1a14 0%, #4a3d30 35%, #a38766 100%);
	transform: translateY(104%);
}

.page-transition__row--bottom::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23efe9dd' stroke-opacity='0.24' stroke-width='1.2'%3E%3Crect x='10' y='10' width='58' height='58'/%3E%3Crect x='76' y='10' width='42' height='42'/%3E%3Crect x='124' y='10' width='46' height='78'/%3E%3Crect x='10' y='76' width='34' height='34'/%3E%3Crect x='50' y='76' width='68' height='68'/%3E%3Crect x='124' y='94' width='46' height='46'/%3E%3Crect x='10' y='116' width='30' height='54'/%3E%3Crect x='46' y='150' width='72' height='20'/%3E%3Crect x='124' y='146' width='46' height='24'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 180px 180px;
	background-repeat: repeat;
	mix-blend-mode: screen;
	opacity: 0.32;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.page-transition__grain {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(13, 11, 8, 0.12) 0.7px, transparent 0.7px);
	background-size: 2px 2px;
	opacity: 0.24;
	mix-blend-mode: multiply;
	animation: transition-grain 9s steps(8) infinite;
}
.page-transition__mark-wrap {
	position: relative;
	z-index: 2;
	opacity: 0;
	transform: translateY(34px) scale(0.84) rotate(-8deg);
	transition:
		opacity .35s var(--anim-ease) .18s,
		transform .68s cubic-bezier(0.22, 1, 0.36, 1) .18s;
}
.page-transition__mark {
	display: inline-block;
	width: clamp(96px, 16vw, 180px);
	height: clamp(96px, 16vw, 180px);
	color: #05070a;
	filter: drop-shadow(0 16px 28px rgba(13, 11, 8, 0.22));
}
.page-transition__mark svg {
	display: block;
	width: 100%;
	height: 100%;
}
.page-transition__mark svg path {
	stroke-dasharray: 220;
	stroke-dashoffset: 220;
	opacity: 0;
	filter: drop-shadow(0 0 0 rgba(227, 213, 22, 0));
}

/* ==========================================================================
   5-bis. Texture + glow dinamico su hero per un look piu complesso
   ========================================================================== */
.hero {
	isolation: isolate;
}
.hero::before,
.hero::after {
	content: "";
	position: absolute;
	pointer-events: none;
	inset: -15%;
	z-index: -1;
}
.hero::before {
	background:
		radial-gradient(circle at 18% 16%, rgba(214, 197, 165, 0.38), transparent 42%),
		radial-gradient(circle at 82% 24%, rgba(107, 79, 58, 0.2), transparent 46%),
		radial-gradient(circle at 48% 84%, rgba(29, 26, 22, 0.12), transparent 52%);
	filter: blur(8px);
	animation: hero-glow 11s ease-in-out infinite alternate;
}
.hero::after {
	opacity: .2;
	background-image: radial-gradient(rgba(29,26,22,0.22) 0.8px, transparent 0.8px);
	background-size: 3px 3px;
	mix-blend-mode: multiply;
	animation: hero-grain 13s steps(8) infinite;
}
@keyframes hero-glow {
	0%   { transform: translate3d(-1.5%, -1.2%, 0) scale(1); }
	100% { transform: translate3d(1.8%, 1.1%, 0) scale(1.045); }
}
@keyframes hero-grain {
	0%   { transform: translate3d(0, 0, 0); }
	20%  { transform: translate3d(1%, -1%, 0); }
	40%  { transform: translate3d(-1%, 1.2%, 0); }
	60%  { transform: translate3d(1.1%, .7%, 0); }
	80%  { transform: translate3d(-1.2%, -.6%, 0); }
	100% { transform: translate3d(.6%, -1%, 0); }
}
.page-transition.is-leaving .page-transition__row--top {
	animation: loading-row-top 2.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.page-transition.is-leaving .page-transition__row--bottom {
	animation: loading-row-bottom 2.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.page-transition.is-leaving .page-transition__mark-wrap {
	animation: loading-logo 2.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.page-transition.is-leaving .page-transition__mark svg path:nth-child(1) {
	animation: draw-path-1 1.15s cubic-bezier(0.65, 0, 0.35, 1) .22s forwards;
}
.page-transition.is-leaving .page-transition__mark svg path:nth-child(2) {
	animation: draw-path-2 .78s cubic-bezier(0.65, 0, 0.35, 1) .68s forwards;
}
.page-transition.is-leaving .page-transition__mark svg path:nth-child(3) {
	animation: draw-path-3 .78s cubic-bezier(0.65, 0, 0.35, 1) .88s forwards;
}
body.is-transitioning main {
	transition: opacity .55s var(--anim-ease), filter .55s var(--anim-ease), transform .55s var(--anim-ease);
	opacity: 0;
	filter: blur(6px);
	transform: scale(1.015);
}
body.is-entering main {
	animation: enter-fade-up .9s var(--anim-ease) both;
}
@keyframes enter-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes transition-grain {
	0%   { transform: translate3d(0, 0, 0); }
	20%  { transform: translate3d(1.2%, -1.1%, 0); }
	40%  { transform: translate3d(-1%, 1.1%, 0); }
	60%  { transform: translate3d(1.4%, .8%, 0); }
	80%  { transform: translate3d(-1.3%, -.7%, 0); }
	100% { transform: translate3d(.6%, -1.1%, 0); }
}
@keyframes loading-row-top {
	0%   { transform: translateY(-104%) translateX(0); }
	58%  { transform: translateY(0) translateX(0); }
	80%  { transform: translateY(0) translateX(0); }
	100% { transform: translateY(0) translateX(112%); }
}
@keyframes loading-row-bottom {
	0%   { transform: translateY(104%) translateX(0); }
	58%  { transform: translateY(0) translateX(0); }
	80%  { transform: translateY(0) translateX(0); }
	100% { transform: translateY(0) translateX(112%); }
}
@keyframes loading-logo {
	0%   { opacity: 0; transform: translateY(34px) scale(0.84) rotate(-8deg); }
	60%  { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
	82%  { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
	100% { opacity: 0; transform: translateY(-8px) scale(0.96) rotate(3deg); }
}
@keyframes draw-path-1 {
	0%   { stroke-dashoffset: 220; opacity: 0; filter: drop-shadow(0 0 0 rgba(5, 7, 10, 0)); }
	35%  { opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 1; filter: drop-shadow(0 0 10px rgba(5, 7, 10, 0.18)); }
}
@keyframes draw-path-2 {
	0%   { stroke-dashoffset: 180; opacity: 0; filter: drop-shadow(0 0 0 rgba(227, 213, 22, 0)); }
	30%  { opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 1; filter: drop-shadow(0 0 12px rgba(227, 213, 22, 0.42)); }
}
@keyframes draw-path-3 {
	0%   { stroke-dashoffset: 180; opacity: 0; filter: drop-shadow(0 0 0 rgba(227, 213, 22, 0)); }
	30%  { opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 1; filter: drop-shadow(0 0 12px rgba(227, 213, 22, 0.42)); }
}

/* ==========================================================================
   6. Magnetic buttons
   ========================================================================== */
[data-magnetic] {
	transition: transform .35s var(--anim-ease);
	will-change: transform;
}

/* ==========================================================================
   7. Marquee (per filiera/partner)
   ========================================================================== */
.marquee {
	overflow: hidden;
	position: relative;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
	display: inline-flex;
	gap: 4rem;
	white-space: nowrap;
	animation: marquee 40s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ==========================================================================
   8. Lightbox per gallery progetti
   ========================================================================== */
.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(15, 13, 11, 0.94);
	z-index: 9500;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s var(--anim-ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__img {
	max-width: 92vw;
	max-height: 88vh;
	object-fit: contain;
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
	transform: scale(.96);
	transition: transform .6s var(--anim-ease);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__close,
.lightbox__nav {
	position: absolute;
	background: transparent;
	border: 1px solid rgba(239, 233, 221, 0.4);
	color: var(--c-on-dark);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: all .35s var(--anim-ease);
}
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: clamp(1rem, 3vw, 2rem); }
.lightbox__nav--next { right: clamp(1rem, 3vw, 2rem); }
.lightbox__close:hover,
.lightbox__nav:hover {
	background: var(--c-on-dark);
	color: var(--c-ink);
	border-color: var(--c-on-dark);
}
.lightbox__nav:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__counter {
	position: absolute;
	bottom: clamp(1rem, 3vw, 2rem);
	left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(239, 233, 221, 0.7);
}

/* ==========================================================================
   9. Project gallery grid
   ========================================================================== */
.project-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(.5rem, 1.5vw, 1.25rem);
	margin: clamp(2rem, 5vw, 4rem) 0;
}
.project-gallery__item {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius);
	cursor: pointer;
}
.project-gallery__item:nth-child(4n + 2),
.project-gallery__item:nth-child(4n + 4) { aspect-ratio: 1 / 1; }
.project-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--anim-ease);
}
.project-gallery__item:hover img {
	transform: scale(1.06);
}

/* ==========================================================================
   10. Reduced motion override
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	[data-reveal],
	[data-reveal].is-revealed,
	[data-parallax],
	.hover-cinema,
	.hover-cinema * {
		transition: none !important;
		animation: none !important;
		transform: none !important;
		filter: none !important;
		opacity: 1 !important;
	}
	[data-parallax] { --parallax-y: 0px !important; }
	.marquee__track { animation: none !important; }
}

/* ==========================================================================
   11. Page-head media (immagine hero ACF nelle pagine)
   --------------------------------------------------------------------------
   Fix: dare dimensione esplicita al wrapper, altrimenti il parallax collassa
   a 0px e l'immagine non si vede.
   ========================================================================== */
.page-head__media {
	position: relative;
	width: 100%;
	margin-top: clamp(2rem, 5vw, 4rem);
	aspect-ratio: 16 / 9;
	max-height: 70vh;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--c-bg-alt);
}
.page-head__media img,
.page-head__media .page-head__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.page-head__media.parallax-wrap > [data-parallax] {
	height: 120%;
	margin-top: -10%;
	width: 100%;
}
.page-head__media.parallax-wrap > [data-parallax] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}