/*
 * Starting states for src/scripts/motion.ts (the site-motion skill). Everything hidden here is
 * scoped to html.motion-on, which BaseLayout's inline script sets unless the visitor prefers
 * reduced motion (and takes away again if the script never runs), so without it the page is the
 * static site. An element the script has taken over gets .motion-in, and a move class below while it moves.
 */

/* ---- EDIT PER SITE: keep in step with the selectors at the top of motion.ts ------------------- */
@media only screen and (min-width: 64rem) {
	.motion-on #cs-navigation .cs-li:not(.motion-in),
	.motion-on #cs-navigation .cs-nav-button:not(.motion-in) {
		opacity: 0;
	}
	/* CodeStitch's mobile-menu transition on the items would drag behind the tween */
	.motion-on #cs-navigation .cs-li {
		transition: none;
	}
}
.motion-on main [id^="hero-"] .cs-stats > :not(.motion-in),
.motion-on [id^="banner-"] .cs-container > :not(.motion-in),
.motion-on main .cs-content > :not(.motion-in),
.motion-on main .cs-card-group > .cs-item:not(:has(> .cs-picture)):not(.motion-in),
.motion-on main .cs-gallery > :not(.motion-in),
.motion-on [data-motion-counter]:not(.motion-in) {
	opacity: 0;
}
/* ------------------------------------------------------------------------------------------------ */

/* Lenis: only the rules a site needs from lenis/dist/lenis.css. Its
   `.lenis.lenis-smooth iframe { pointer-events: none }` would make a Turnstile checkbox unclickable. */
html.lenis,
html.lenis body {
	height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
	overflow: clip;
}

/* The moves. motion.ts adds one of these classes with --motion-at (delay) and --motion-dur per element,
   and takes it off again when it ends. The curve is GSAP's power2.out; fill mode `both` holds the
   hidden start through the delay. They animate the individual translate/scale properties, which add
   to a template's own transform (CodeStitch skews its buttons) instead of replacing it. */
.motion-on .motion-up,
.motion-on .motion-left,
.motion-on .motion-card,
.motion-on .motion-rise,
.motion-on .motion-settle,
.motion-on .motion-out {
	animation-duration: var(--motion-dur, 0.5s);
	animation-delay: var(--motion-at, 0s);
	animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
	animation-fill-mode: both;
}
.motion-on .motion-up {
	animation-name: motion-up;
}
.motion-on .motion-left {
	animation-name: motion-left;
}
.motion-on .motion-card {
	animation-name: motion-card;
}
.motion-on .motion-rise {
	animation-name: motion-rise;
}
.motion-on .motion-settle {
	animation-name: motion-settle;
}
@keyframes motion-up {
	from {
		opacity: 0;
		translate: 0 24px;
	}
}
@keyframes motion-left {
	from {
		opacity: 0;
		translate: -35px 0;
	}
}
@keyframes motion-card {
	from {
		opacity: 0;
		translate: 0 30px;
	}
}
@keyframes motion-rise {
	from {
		translate: 0 110%;
	}
}
@keyframes motion-settle {
	from {
		scale: 1.08;
	}
}

/* The reverse (motion.ts REVERSE): scrolling back up, a reveal that sinks into the bottom of the
   screen fades back down, and one that has left the screen is reset out of sight. .motion-gone then
   holds it hidden until it reveals again. !important, because a template's own opacity can outrank
   the hide rules at the top (912's CTA text: `#cta-2293 .cs-text { opacity: 0.8 }`) and would
   bring the element straight back. */
.motion-on .motion-out {
	animation-name: motion-out;
}
@keyframes motion-out {
	to {
		opacity: 0;
		translate: 0 24px;
	}
}
.motion-on .motion-gone {
	opacity: 0 !important;
}

/* Word masks (motion.ts split(): the structure and classes SplitText's words + mask made). A display
   face can be taller than its line (Boldonse caps: ~1.24em on a 1.2em line): the clip box reaches
   past the line without moving it. vertical-align: top because WebKit (every iPhone browser) sits a
   clipping inline-block on its bottom edge, not on the text baseline: each line grew while the title
   was split and dropped back when it reverted. 912's 3-line phone hero measured 149.1 px split vs
   137.4 px plain in WebKit, 137.4 both in Chrome ("at the last second… line height drops abruptly"). */
.motion-word,
.motion-word-mask {
	display: inline-block;
	position: relative;
}
.motion-word-mask {
	overflow: hidden;
	overflow: clip;
	vertical-align: top;
	padding: 0.15em 0.05em;
	margin: -0.15em -0.05em;
}

/* Drift: the window stays put and crops its photo, which is wider than it by --motion-drift (how far
   it travels; motion.ts measures it). Only for a CodeStitch-style photo: img absolute, height 100%,
   object-fit cover (a photo in normal flow would also grow taller). !important because the
   template's own `#section-id .cs-picture img { width: 100% }` outranks this selector: on 912 that
   left the photo frame-sized, so it slid inside its window and uncovered the frame edge ("the
   container moves, on kaunostatyba only the image inside does"). */
.motion-on [data-motion-drift] {
	overflow: hidden !important;
}
.motion-on [data-motion-drift] img {
	width: calc(100% + var(--motion-drift, 15%)) !important;
	max-width: none !important;
}

/*
 * Curtain frame (kaunostatyba.lt's team photo). The frame must be positioned (CodeStitch's
 * .cs-picture is). Its drift window fills it; .motion-curtain is a strip of the ground colour that
 * starts over the whole photo and closes onto a 10 px seam at 30%, so the photo reads as two
 * panels. data-motion-curtain="notched" also cuts a notch across the top of the right panel and
 * the bottom of the left one. Without motion the seam and notches are simply there.
 * data-motion-curtain="wipe" has no seam: the cover slides off the right edge and the photo ends
 * whole.
 *   <div class="cs-picture" data-motion-curtain="notched" style="--motion-ground: #F1EEEC">
 *     <picture data-motion-drift>…</picture>
 *     <span class="motion-curtain" aria-hidden="true"></span>
 *     <div class="inset" data-motion-counter data-motion-drift="reverse" style="--motion-drift: 8%">…</div>   (optional)
 *   </div>
 * The inset box never moves: it pops in after the curtain and its own photo drifts the other way.
 */
[data-motion-curtain] > picture[data-motion-drift] {
	display: block;
	position: absolute;
	inset: 0;
}
.motion-curtain {
	width: 0.625rem;
	height: 100%;
	background-color: var(--motion-ground, #fff);
	position: absolute;
	top: 0;
	left: var(--motion-seam, 30%);
	z-index: 1;
	transition: left 0.7s cubic-bezier(0.65, 0, 0.35, 1), width 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.motion-on .motion-curtain:not(.motion-in) {
	width: 100%;
	left: 0;
}
/* "wipe": no seam; the cover ends at zero width past the right edge (and isn't there without motion).
   Give it the colour the photo sits on at its right edge, since that's where it disappears. */
[data-motion-curtain="wipe"] > .motion-curtain {
	width: 0;
	left: 100%;
}
[data-motion-curtain="notched"]::before,
[data-motion-curtain="notched"]::after {
	content: "";
	height: clamp(1.5rem, 3.5vw, 3.125rem);
	background-color: var(--motion-ground, #fff);
	position: absolute;
	z-index: 1;
}
[data-motion-curtain="notched"]::before {
	width: calc(100% - var(--motion-seam, 30%));
	top: 0;
	right: 0;
}
[data-motion-curtain="notched"]::after {
	width: var(--motion-seam, 30%);
	bottom: 0;
	left: 0;
}