/* ==========================================================================
   Orografie Custom — animations.css (v2.1)
   Movimento sobrio: ingressi brevi, parallax leggero opzionale, lightbox.
   Niente cursore custom, niente loader, niente blur/glow.
   Tutto si spegne con prefers-reduced-motion o con body.no-reveal.
   ========================================================================== */

:root {
	--anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--anim-base: .7s;
}

/* ---------- 1. Reveal on scroll ----------
   Nascosto solo se JS è attivo (html.js), così senza JS il contenuto resta
   visibile. Le varianti ACF (fade-up, fade-in, fade-left, fade-right,
   scale-in, blur-in) sono mantenute ma ridotte a spostamenti minimi. */
.js [data-reveal] {
	opacity: 0;
	transition:
		opacity var(--anim-base) var(--anim-ease),
		transform var(--anim-base) var(--anim-ease);
	transition-delay: calc(var(--stagger-i, 0) * 70ms);
}
.js [data-reveal="fade-up"],
.js [data-reveal=""],
.js [data-reveal="blur-in"]  { transform: translateY(16px); }
.js [data-reveal="fade-down"]  { transform: translateY(-16px); }
.js [data-reveal="fade-left"]  { transform: translateX(16px); }
.js [data-reveal="fade-right"] { transform: translateX(-16px); }
.js [data-reveal="scale-in"]   { transform: scale(0.985); }

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

/* Disattivazione da opzioni globali */
.js body.no-reveal [data-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ---------- 2. Parallax (opzionale, blocchi ACF / hero pagine) ---------- */
[data-parallax] {
	will-change: transform;
	transform: translate3d(0, var(--parallax-y, 0px), 0);
}
.parallax-wrap {
	position: relative;
	overflow: hidden;
}
.parallax-wrap > [data-parallax] {
	height: 112%;
	margin-top: -6%;
	width: 100%;
}
.parallax-wrap > [data-parallax] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- 3. Page-head media (immagine hero ACF nelle pagine) ---------- */
.page-head__media {
	position: relative;
	width: 100%;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	aspect-ratio: 16 / 9;
	max-height: 72vh;
	overflow: hidden;
	background: var(--c-placeholder);
}
.page-head__media img,
.page-head__media .page-head__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.case-study__hero.parallax-wrap { aspect-ratio: 16 / 9; max-height: 80vh; }
.case-study__hero.parallax-wrap img { height: 100%; object-fit: cover; }
.case-study__hero.parallax-wrap > [data-parallax] { width: 100%; }

/* ---------- 4. Page fade (opzionale) ---------- */
body.use-page-fade .site-main {
	animation: page-fade .45s var(--anim-ease) both;
}
@keyframes page-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---------- 5. Marquee (per filiera/partner) ---------- */
.marquee {
	overflow: hidden;
	position: relative;
}
.marquee__track {
	display: inline-flex;
	gap: 4rem;
	white-space: nowrap;
	animation: marquee 50s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---------- 6. Lightbox per gallery progetti ---------- */
.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(12, 13, 14, 0.96);
	z-index: 9500;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s var(--anim-ease), visibility .25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
	max-width: 88vw;
	max-height: 84vh;
	object-fit: contain;
}
.lightbox__close,
.lightbox__nav {
	position: absolute;
	background: transparent;
	border: 1px solid rgba(242, 241, 236, 0.3);
	border-radius: 2px;
	color: var(--c-on-dark);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	transition: background-color .2s var(--anim-ease), color .2s var(--anim-ease), border-color .2s var(--anim-ease);
}
.lightbox__close { top: clamp(1rem, 3vw, 1.5rem); right: clamp(1rem, 3vw, 1.5rem); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: clamp(1rem, 3vw, 1.5rem); }
.lightbox__nav--next { right: clamp(1rem, 3vw, 1.5rem); }
.lightbox__close:hover,
.lightbox__nav:hover {
	background: var(--c-on-dark);
	color: var(--c-ink);
	border-color: var(--c-on-dark);
}
.lightbox__counter {
	position: absolute;
	bottom: clamp(1rem, 3vw, 1.5rem);
	left: 50%;
	transform: translateX(-50%);
	font-size: 10.4px;
	font-variant-numeric: tabular-nums;
	color: rgba(242, 241, 236, 0.7);
}

/* ---------- 7. Project gallery grid ---------- */
.project-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: clamp(.5rem, 1.2vw, 1rem);
}
.project-gallery__item {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--c-placeholder);
	cursor: zoom-in;
}
.project-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--anim-ease), opacity .2s var(--anim-ease);
}
.project-gallery__item:hover img { transform: scale(1.03); }

/* ---------- 8. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.js [data-reveal],
	[data-parallax] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.marquee__track,
	body.use-page-fade .site-main { animation: none !important; }
}