/* Vedmi motion layer.
   Replaces the former AOS / GSAP / SplitType stack with plain CSS driven by
   small vanilla scripts (assets/js/main.js). Uses Baseline "newly available"
   features: CSS nesting and the Popover API with @starting-style and
   transition-behavior: allow-discrete.

   Initial hidden states are gated behind the .js flag on <html> so the page
   stays fully readable when JavaScript is unavailable. :where() keeps the
   gate at zero specificity, preserving the original AOS cascade. */

/* ---------------------------------------------------- scroll reveal (AOS) */

:where(.js) [data-aos] {
	opacity: 0;
	transform: translate3d(0, 100px, 0);
	transition-property: opacity, transform;
	transition-duration: var(--aos-duration, 400ms);
	transition-timing-function: ease;
}

:where(.js) [data-aos].aos-animate {
	opacity: 1;
	transform: translateZ(0);
	transition-delay: var(--aos-delay, 0ms);
}

/* ------------------------------------------------------------- split text */

:where(.js) [data-letters-slide-down]:not(.is-split),
:where(.js) [data-words-slide-down]:not(.is-split) {
	opacity: 0;
}

/* Section titles: characters fade in while sliding up. */
[data-letters-slide-down].is-split .char {
	opacity: 0;
	transform: translateY(100%);
}

[data-letters-slide-down].is-inview .char {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--d, 0ms),
		transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--d, 0ms);
}

/* Pretitles and body copy: whole words fade in while sliding up. */
[data-words-slide-down].is-split .word {
	opacity: 0;
	transform: translateY(100%);
}

[data-words-slide-down].is-inview .word {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--d, 0ms),
		transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--d, 0ms);
}

/* ------------------------------------------------------------- hero media */

.first-page__bg video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	/* The vignette ellipse is centred at 52%, so it still carries ~15%
	   alpha where it meets the right edge and lands razor-thin on the
	   left: both sides cut the artwork square. A second layer fades the
	   sides and is intersected with the first, the same way the mission
	   and vision clips handle their own square edges. */
	mask:
		radial-gradient(ellipse 52% 50% at 52% 50%, #000 48%, transparent 100%) center / 100% 100%
			no-repeat,
		linear-gradient(to right, transparent, #000 12%, #000 88%, transparent) center / 100% 100%
			no-repeat;
	mask-composite: intersect;
	mix-blend-mode: darken;
	pointer-events: none;
}

/* ----------------------------------------------------- mobile menu popover */

.modal-menu {
	/* Neutralize popover UA defaults; geometry and skin come from main.css
	   and theme.css. */
	width: 100%;
	border: 0;
	border-bottom: 0.26667cqw solid rgb(18 18 18 / 12%);

	transition:
		opacity 0.4s ease,
		visibility 0.4s ease,
		display 0.4s allow-discrete,
		overlay 0.4s allow-discrete;

	&:popover-open {
		opacity: 1;
		visibility: visible;

		@starting-style {
			opacity: 0;
		}
	}
}