/**
 * AEIOUY Studio — effetti cinematici leggeri.
 *
 * Gli stati nascosti esistono solo sotto html.cine, aggiunta in <head> soltanto
 * se il visitatore non ha chiesto movimento ridotto. Senza JS, o se
 * cinematic.js non parte, la classe viene tolta e la pagina resta statica.
 * Movimento ridotto attivato durante la visita e stampa: cinematic.js mostra tutto.
 * Le classi usate sono quelle già presenti nelle pagine: nessun HTML da modificare.
 */

:root {
	--cine-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--cine-rise: 28px;
}

/* 1. Testi e liste: salgono e compaiono, a cascata (--cine-d impostato dal JS). */

.cine main :is(.hero-copy, .page-hero-copy, .section-heading, .section-heading > div, .editorial-copy, .ai-head, .course-copy, .founder-copy, .closing-section, .contact-followup, .entry-header) > :is(p, h1, h2, a, small),
.cine main :is(.goal-list > article, .ai-list > article, .app-grid > .app-card, .detail-row, .course-facts > span, .proof-strip > span, .ai-statement, .post-grid > .post-card) {
	opacity: 0;
	transform: translate3d(0, var(--cine-rise), 0);
	transition:
		opacity 0.9s var(--cine-ease) var(--cine-d, 0s),
		transform 1.1s var(--cine-ease) var(--cine-d, 0s),
		translate 0.35s ease,
		box-shadow 0.35s ease,
		background-color 0.18s,
		color 0.18s;
}

.cine main .is-in {
	opacity: 1 !important;
	transform: none !important;
}

/* 2. Pannelli: il laboratorio della hero entra di lato, il monogramma si apre come un sipario. */

.cine main .communication-lab {
	opacity: 0;
	transform: translate3d(36px, 0, 0);
	transition:
		opacity 1.1s var(--cine-ease) 0.35s,
		transform 1.3s var(--cine-ease) 0.35s,
		translate 0.35s ease,
		box-shadow 0.35s ease;
}

.cine main :is(.founder-monogram, .ai-word) {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.4s var(--cine-ease) 0.1s;
}

.cine main :is(.founder-monogram, .ai-word).is-in {
	clip-path: inset(0 0 0 0);
}

/* 3. Immagini: si svelano dall'alto mentre la scala torna a 1, come una messa a fuoco lenta. */

.cine main :is(.editorial-image > img:not([src*="hairdoneai"]), .editorial-image > svg, .course-preview > img, .entry-media > img) {
	clip-path: inset(3% 3% 100% 3%);
	transform: scale(1.06);
	transform-origin: 50% 40%;
	transition:
		clip-path 1.4s var(--cine-ease) var(--cine-d, 0s),
		transform 1.8s var(--cine-ease) var(--cine-d, 0s);
}

.cine main :is(.editorial-image > img, .editorial-image > svg, .course-preview > img, .entry-media > img).is-in {
	clip-path: inset(0 0 0 0);
}

/* La foto dell'articolo ha gli angoli arrotondati anche durante lo svelamento. */
.cine main .entry-media > img {
	clip-path: inset(3% 3% 100% 3% round var(--radius-media));
}

.cine main .entry-media > img.is-in {
	clip-path: inset(0 0 0 0 round var(--radius-media));
}

/* 4–5. Parallasse e profondità: cinematic.js aggiorna --cine-x/--cine-y; translate si somma a transform. */

.cine-depth {
	translate: var(--cine-x, 0) var(--cine-y, 0);
}

/* 6. Header: quando la pagina scorre la linea diventa un'ombra leggera. */

.cine .header {
	transition:
		box-shadow 0.5s ease,
		border-color 0.5s ease;
}

.cine .header.is-scrolled {
	border-bottom-color: transparent;
	box-shadow: 0 10px 30px -22px rgba(24, 36, 59, 0.45);
}

/* Il punto del laboratorio respira lentamente. */

.cine .communication-lab .signal {
	animation: cine-breathe 3.2s ease-in-out infinite;
}

@keyframes cine-breathe {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.45;
		transform: scale(1.6);
	}
}

/* Hover sobrio sui pannelli. */

@media (hover: hover) {

	.cine main .app-card.is-in:hover,
	.cine main .communication-lab.is-in:hover {
		translate: 0 -3px;
		box-shadow: 0 18px 40px -28px rgba(24, 36, 59, 0.5);
	}
}

@media (max-width: 820px) {

	:root {
		--cine-rise: 18px;
	}

	.cine main .communication-lab {
		transform: translate3d(0, 18px, 0);
	}
}