/**
 * FD AIdeas: CSS side of the single project Motion.page timelines (see js/progetto/fd-motion-timelines.js).
 *
 * Pre-hide: the script loads deferred, so without this the hero text, showcase and header would paint, jump to
 * their start state and then animate. visibility (not opacity) so Motion still reads opacity 1 as the end value.
 * Failsafe: shown after 3s even if the script never runs. Showcase and header only above 1024px, where their
 * timelines run.
 *
 * Media reveal + parallax (desktop, only once the script adds html.fd-mp-media, so nothing changes with JS off or
 * reduced motion):
 * - The reveal tweens --fd-reveal (8% -> 0%) and the clip-path below reads it. Without the variable the declaration
 *   is invalid at computed-value time, so clip-path falls back to none before the timeline sets it. When the reveal
 *   ends the script adds data-fd-revealed, which turns the clip off (it would also cut the frame/tile shadow).
 * - Inner parallax: the timelines tween --fd-parallax and the img moves with the `translate` property, which composes
 *   with Motion's reveal `transform` (scale). It needs the image oversized inside a clipping widget: gallery `scale`
 *   1.09 around the centre leaves 4.5% each way for -4% -> 4%; showcase only goes 0% -> 4% (down), so 1.045 anchored
 *   at the bottom covers the top edge and crops half as much. Bigger travel means a bigger crop of the mockups.
 * - The tile shadow moves from the img up to the widget, since overflow: hidden would cut it on the img.
 *   The img selector repeats fd-progetto-galleria.css's chain to beat its specificity.
 */
html:not(.fd-mp-ready) .fd-progetto__hero-content {
	visibility: hidden;
	animation: fd-mp-failsafe 0s linear 3s forwards;
}

@media (min-width: 1025px) {
	html:not(.fd-mp-ready) .fd-progetto__showcase,
	html:not(.fd-mp-ready) .fd-header .e-con-inner {
		visibility: hidden;
		animation: fd-mp-failsafe 0s linear 3s forwards;
	}

	html.fd-mp-media .fd-progetto__frame--desktop:not([data-fd-revealed]),
	html.fd-mp-media .fd-progetto__slot-image:not([data-fd-revealed]) {
		clip-path: inset(var(--fd-reveal) round 24px);
	}

	html.fd-mp-media .fd-progetto__frame-image,
	html.fd-mp-media .fd-progetto__slot-image {
		overflow: hidden;
	}

	html.fd-mp-media .fd-progetto__frame-image {
		border-radius: 18px;
	}

	html.fd-mp-media .fd-progetto__frame-image img,
	html.fd-mp-media .elementor-279 .elementor-element.elementor-element-fd-progetto-galleria-grid .fd-progetto__slot-image img {
		translate: 0 var(--fd-parallax, 0%);
	}

	html.fd-mp-media .fd-progetto__frame-image img {
		scale: 1.045;
		transform-origin: 50% 100%;
	}

	html.fd-mp-media .fd-progetto__slot-image {
		border-radius: var(--fd-radius-tile, 24px);
		box-shadow: 0 24px 48px -32px rgb(33 33 33 / 0.35);
	}

	html.fd-mp-media .elementor-279 .elementor-element.elementor-element-fd-progetto-galleria-grid .fd-progetto__slot-image img {
		box-shadow: none;
		scale: 1.09;
	}
}

@keyframes fd-mp-failsafe {
	to {
		visibility: visible;
	}
}