/*
 * Groove Site — landing layer. Loads on the "Landing (manifesto)" template,
 * on any page whose content uses a landing section (inc/landing.php), and in
 * the editor.
 *
 * Colour comes only from the preset variables, so the split follows the
 * scheme through global.css. The CTA and the landing footer stay inverted in
 * both schemes: they redefine the same presets locally (ink = paper,
 * base = night), so anything placed inside them, has-*-color classes
 * included, inverts with no extra rules.
 *
 * The portable block styles (Data sheet, Spec sheet, Pull manifesto) are not
 * here; they ride on each block's own stylesheet (see inc/landing.php).
 *
 * Selectors that override core's flow-layout margins carry two classes:
 * core prints `:root :where(.is-layout-flow) > *` at one class's weight.
 */

/* ----------------------------------------------------------------- tokens */

.gs-split,
.gs-cta,
.gs-footer-landing {
	--gs-poster-x: var(--wp--preset--spacing--margin-x);
	--gs-poster-y: clamp(3rem, 10svh, 12rem);
}

.gs-split {
	/* Anything fixed above the sticky pane: the admin bar, plus the site
	   header when a split is used on an ordinary page template. */
	--gs-top: var(--wp-admin--admin-bar--height, 0px);
}

.gs-main .gs-split {
	--gs-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--gs-header-h));
}

.gs-cta,
.gs-footer-landing {
	--wp--preset--color--base: var(--wp--preset--color--night);
	--wp--preset--color--ink: var(--wp--preset--color--paper);
	--wp--preset--color--muted: color-mix(in srgb, var(--wp--preset--color--paper) 62%, var(--wp--preset--color--night));
	--wp--preset--color--line: color-mix(in srgb, var(--wp--preset--color--paper) 20%, transparent);
	--wp--preset--color--surface: color-mix(in srgb, var(--wp--preset--color--paper) 8%, var(--wp--preset--color--night));
	color-scheme: dark;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

/* Sections sit edge to edge: no block gap between them or before the footer. */
.wp-block-group:is(.gs-split, .gs-cta),
.gs-footer-landing {
	margin-block: 0;
}

/* ------------------------------------------------------------ split pane */

.gs-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-block-end: var(--gs-rule) solid var(--wp--preset--color--ink);
}

.wp-block-group.gs-split > * {
	margin-block: 0;
}

.gs-anchor {
	container-type: inline-size;
	padding: var(--gs-poster-y) var(--gs-poster-x) 4rem;
	border-block-end: var(--gs-rule) solid var(--wp--preset--color--ink);
}

.gs-lockup {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.wp-block-group.gs-lockup > * {
	margin-block: 0;
}

.wp-block-group.gs-lockup > .is-style-gs-spec {
	margin-block-start: 2rem;
}

.wp-block-group.gs-lockup > .gs-controls {
	margin-block-start: auto;
}

/* Masthead: sized to its pane. "GROOVE" is 4.14em wide in Inter 900 at
   -0.04em tracking, so 24cqi (the source) fills the pane to within a pixel
   and overflows on any rounding; 23.5cqi leaves ~3%. */
.wp-block-heading.is-style-gs-masthead {
	margin-inline-start: -0.04em;
	font-size: clamp(2.5rem, 23.5cqi, 11rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 0.85;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.gs-sub {
	max-inline-size: 15ch;
	font-size: clamp(1.2rem, 6cqi, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	text-transform: uppercase;
}

.wp-block-group.gs-controls {
	gap: 1rem 1.5rem;
}

.wp-block-group.gs-controls > * {
	margin: 0;
}

/*
 * Framed here, unlike in the header: at the foot of a tall pane a bare icon
 * floats, and the frame gives the lockup a corner to rest on. 1px in the
 * icon's own colour, so it darkens with it on hover, and lighter than the
 * 2px ink rule above so it does not compete with it. The frame, not the
 * icon, now lines up with the text, so no negative margin.
 */
.wp-block-group.gs-controls > .gs-scheme-toggle {
	border: 1px solid currentColor;
}

.gs-cta-link {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gs-cta-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-block-size: 2.75rem; /* 44px touch target */
	text-decoration: none;
	opacity: 0.75;
	transition: opacity 0.3s;
}

.gs-cta-link a:is(:hover, :focus-visible) {
	opacity: 1;
}

.gs-cta-link .gs-arrow {
	transition: translate 0.3s var(--gs-ease);
}

.gs-cta-link a:hover .gs-arrow {
	translate: 0 3px;
}

/* ----------------------------------------------------------------- essay */

.gs-essay {
	padding: var(--gs-poster-y) var(--gs-poster-x) 10rem;
}

/* 34rem is the source's 55ch at its 16px Inter; ch would track the theme's
   fluid body size instead. */
.wp-block-group.gs-essay > * {
	max-inline-size: 34rem;
	margin-block: 0 2rem;
	margin-inline: 0 auto;
}

.wp-block-group.gs-essay > p {
	margin-block-end: 2em;
	font-size: var(--wp--preset--font-size--essay);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.35;
}

.wp-block-group.gs-essay > :is(.wp-block-table, .wp-block-quote, .wp-block-image) {
	margin-block: 3em;
}

/* Headings take a spacing step, not em: 3em of a pull heading's own size
   was ~225px a side and grew with it. A block's own margin still wins. */
.wp-block-group.gs-essay > :is(h2, h3) {
	margin-block: var(--wp--preset--spacing--60);
}

.wp-block-group.gs-essay > :last-child {
	margin-block-end: 0;
}

.is-style-gs-lead,
.wp-block-group.gs-essay > p.is-style-gs-lead {
	font-size: var(--wp--preset--font-size--essay);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.35;
}

mark.gs-signal {
	padding-inline: 0.05em;
	background: none;
	color: inherit;
	font-weight: 900;
}

/*
 * Links in the essay. At rest, a 2px line in ink. Pointing at one reveals
 * the signal colours along it from the start edge, the header rule's fill
 * in miniature: a reveal, not a stretch, so the colours stay put under a
 * moving edge. Leaving covers them again from the start, so the colour runs
 * off the far end and the line always travels forwards. The words stay ink:
 * the gradient as text fails 3:1 on light paper, and the line is enough.
 *
 * Backgrounds rather than text-decoration, which cannot take a gradient; a
 * background follows a link that wraps, fragment by fragment. Two layers,
 * both 3px tall just under the baseline: the colours, whole, underneath;
 * over them a cover, 1px of paper above 2px of ink, which reads as the ink
 * line, so the colour comes up a pixel thicker. The
 * cover shrinks toward the end edge to reveal, and grows back from the start.
 */
.gs-essay :is(p, li, td) a:not(.wp-element-button) {
	--gs-cover: 100% 3px;
	--gs-cover-anchor: left 0 bottom var(--gs-line-drop);
	/* The foot of the link box sits under the descenders; lift the line to
	   just below the baseline, where a text underline would be. */
	--gs-line-drop: 0.14em;
	background:
		linear-gradient(var(--wp--preset--color--base) 1px, currentColor 1px) var(--gs-cover-anchor) / var(--gs-cover) no-repeat,
		linear-gradient(to right, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-2) 55%, var(--wp--preset--color--accent-3)) left 0 bottom var(--gs-line-drop) / 100% 3px no-repeat;
	color: inherit;
	text-decoration: none;
	transition: background-size 0.5s var(--gs-ease);
}

.gs-essay :is(p, li, td) a:not(.wp-element-button):is(:hover, :focus-visible) {
	--gs-cover: 0% 3px;
	--gs-cover-anchor: right 0 bottom var(--gs-line-drop);
}

[dir="rtl"] .gs-essay :is(p, li, td) a:not(.wp-element-button) {
	--gs-cover-anchor: right 0 bottom var(--gs-line-drop);
}

[dir="rtl"] .gs-essay :is(p, li, td) a:not(.wp-element-button):is(:hover, :focus-visible) {
	--gs-cover-anchor: left 0 bottom var(--gs-line-drop);
}

@media (forced-colors: active) {
	.gs-essay :is(p, li, td) a:not(.wp-element-button) {
		background: none;
		text-decoration: underline;
	}
}

/*
 * Plate: a screenshot of the plugin set into the essay, captioned like a
 * figure in a printed manual. It takes the whole pane rather than the 34rem
 * text measure, so the UI reads at a useful size and the column's edge
 * breaks once per plate. No frame and no radius; a long, faint shadow in
 * fixed night lifts a white admin screen off the paper without drawing a
 * line round it (on the night scheme it disappears, which is fine: a light
 * screenshot already stands off the dark).
 */
.wp-block-group.gs-essay > .wp-block-image.is-style-gs-plate {
	max-inline-size: none;
}

.wp-block-image.is-style-gs-plate img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: 0;
	box-shadow: 0 1.75rem 3.5rem -2rem color-mix(in srgb, var(--wp--preset--color--night) 40%, transparent);
}

.wp-block-image.is-style-gs-plate :where(figcaption) {
	max-inline-size: 34rem;
	margin-block: 1.25rem 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	line-height: 1.5;
	text-align: start;
	text-transform: uppercase;
}

.wp-block-image.is-style-gs-plate figcaption strong {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* ----------------------------------------------------- two-pane (>1024px) */

@media (width > 1024px) {
	.gs-split {
		grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
	}

	.gs-anchor {
		padding-block-end: var(--gs-poster-y);
		border-block-end: 0;
		border-inline-end: var(--gs-rule) solid var(--wp--preset--color--ink);
	}
}

/* Sticky only where the lockup fits the viewport; on a short screen a sticky
   column would hide its own controls until the end of the essay. */
@media (width > 1024px) and (height >= 36rem) {
	.gs-lockup {
		position: sticky;
		top: calc(var(--gs-top) + var(--gs-poster-y));
		min-block-size: calc(100svh - var(--gs-top) - 2 * var(--gs-poster-y));
	}
}

/* ------------------------------------------------------------------- CTA */

.gs-cta {
	container-type: inline-size;
	padding: clamp(6rem, 15svh, 12rem) var(--gs-poster-x) clamp(4rem, 8vw, 8rem);
}

/* The "Get the plugin" jump should land on the section, not above it. */
.gs-landing .gs-cta {
	scroll-margin-top: var(--wp-admin--admin-bar--height, 0px);
}

.wp-block-group.gs-cta > * {
	margin-block: 0;
}

.wp-block-group.gs-cta > .is-style-gs-steps {
	margin-block-end: clamp(5rem, 10vw, 8rem);
}

.wp-block-group.gs-cta > .is-style-gs-poster {
	margin-block-end: clamp(2.5rem, 5vw, 4rem);
}

@media (width > 1024px) {
	.wp-block-group.gs-cta > .is-style-gs-steps {
		max-inline-size: calc(50% - 2rem);
	}
}

/* Steps: "<strong>01. Install.</strong> One minute" per item. */
.wp-block-list.is-style-gs-steps {
	margin-inline: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--mono);
}

.wp-block-list.is-style-gs-steps > li {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding-block: 1.5rem;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent);
	font-size: 1.25rem;
	line-height: 1.2;
	text-transform: uppercase;
}

.wp-block-list.is-style-gs-steps > li:not(:last-child) {
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.wp-block-list.is-style-gs-steps > li > strong {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

/* Poster: capped at 21cqi so "A BETTER" (4.6em) keeps its two lines at 320px. */
.wp-block-heading.is-style-gs-poster {
	margin-inline-start: -0.03em;
	font-size: min(var(--wp--preset--font-size--poster), 21cqi);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 0.8;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

/* Signal button: inverse of its surroundings (paper on the night CTA, ink on
   a page), filled with the moving gradient on hover. */
.wp-block-button.is-style-gs-signal .wp-block-button__link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2rem);
	padding: clamp(1.2rem, 3vw, 2.5rem) clamp(1.5rem, 5vw, 5rem);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	/* 19px+ at weight 800 is WCAG large text, so night over the violet end of the hover gradient (3.18:1) passes 3:1. */
	font-size: clamp(1.1875rem, 0.9rem + 1vw, 1.5rem);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-align: start;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		color 0.3s var(--gs-ease),
		translate 0.3s var(--gs-ease),
		box-shadow 0.3s var(--gs-ease);
}

.wp-block-button.is-style-gs-signal .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gs-gradient) 0% 50% / 300% 300%;
	scale: 1 0;
	transform-origin: bottom;
	transition: scale 0.4s var(--gs-ease);
}

.wp-block-button.is-style-gs-signal .wp-block-button__link:is(:hover, :focus-visible) {
	/* Night, not the source's paper: paper on the orange stretch is 1.9:1. */
	color: var(--wp--preset--color--night);
	translate: 0 -4px;
	box-shadow: 0 20px 40px color-mix(in srgb, var(--wp--preset--color--accent-1) 20%, transparent);
}

.wp-block-button.is-style-gs-signal .wp-block-button__link:is(:hover, :focus-visible)::before {
	scale: 1 1;
}

.wp-block-button.is-style-gs-signal .gs-arrow {
	transition: translate 0.4s var(--gs-ease);
}

.wp-block-button.is-style-gs-signal .wp-block-button__link:hover .gs-arrow {
	translate: 12px 0;
}

/* ---------------------------------------------------------------- footer */

.gs-footer-landing {
	padding: 0 var(--gs-poster-x) clamp(4rem, 10svh, 8rem);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wp-block-group.gs-baseline {
	gap: 0.5rem 2rem;
	padding-block-start: 2rem;
	border-block-start: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
}

.wp-block-group.gs-baseline > * {
	margin: 0;
}

/* ----------------------------------------------------------- video modal */

/*
 * A video link (marked by assets/js/video-modal.js, so only once it works)
 * carries a small play mark where the CTA links carry their arrow, and it
 * nudges the same way on hover. A clipped box, not a ▶ character, which
 * iOS draws as an emoji. Inline-block, so the link's underline stops at the
 * words.
 */
a.gs-video-link::after {
	content: "";
	display: inline-block;
	inline-size: 0.5em;
	block-size: 0.6em;
	margin-inline-start: 0.5em;
	background-color: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transition: translate 0.3s var(--gs-ease);
}

a.gs-video-link:hover::after {
	translate: 3px 0;
}

@media (forced-colors: active) {
	a.gs-video-link::after {
		background-color: LinkText;
	}
}

/*
 * The dialog: a screening room. Night in both schemes, like the CTA, by
 * redefining the same presets. The page stays faintly there behind a dark,
 * blurred scrim rather than a solid wall. The panel is the landing's own
 * furniture: a mono label bar over a 2px rule, then the film. No frame, no
 * radius, no shadow.
 */
.gs-video {
	--wp--preset--color--base: var(--wp--preset--color--night);
	--wp--preset--color--ink: var(--wp--preset--color--paper);
	--wp--preset--color--muted: color-mix(in srgb, var(--wp--preset--color--paper) 62%, var(--wp--preset--color--night));
	--gs-video-w: min(72rem, 100vw - 2 * var(--wp--preset--spacing--gutter), (100svh - 10rem) * 16 / 9);
	color-scheme: dark;
	inline-size: var(--gs-video-w);
	max-inline-size: none;
	max-block-size: none;
	margin: auto;
	padding: 0;
	overflow: visible;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
}

.gs-video::backdrop {
	background-color: color-mix(in srgb, var(--wp--preset--color--night) 88%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

html:has(.gs-video[open]) {
	overflow: hidden;
}

.gs-video__panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gs-video__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	border-block-end: var(--gs-rule) solid var(--wp--preset--color--ink);
}

.gs-video__panel p {
	margin: 0;
}

.gs-video__title {
	min-inline-size: 0;
	overflow: hidden;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gs-video__close {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.6em;
	min-block-size: 2.75rem; /* 44px touch target */
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.3s;
}

.gs-video__close:is(:hover, :focus-visible) {
	opacity: 1;
}

.gs-video__x {
	font-size: 1.1em;
	transition: rotate 0.3s var(--gs-ease);
}

.gs-video__close:hover .gs-video__x {
	rotate: 90deg;
}

.gs-video__stage {
	aspect-ratio: 16 / 9;
	background-color: #000;
}

.gs-video__stage > * {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

/*
 * In and out: the panel comes up out of a blur, as the essay reveals do,
 * and the scrim fades under it. Slow in, quick out. display and overlay
 * ride along discretely so the closing fade is seen.
 */
@media (prefers-reduced-motion: no-preference) {
	.gs-video,
	.gs-video::backdrop {
		transition:
			opacity 0.25s var(--gs-ease),
			translate 0.25s var(--gs-ease),
			filter 0.25s var(--gs-ease),
			display 0.25s allow-discrete,
			overlay 0.25s allow-discrete;
	}

	.gs-video:not([open]),
	.gs-video:not([open])::backdrop {
		opacity: 0;
	}

	.gs-video:not([open]) {
		translate: 0 1rem;
		filter: blur(8px);
	}

	.gs-video[open],
	.gs-video[open]::backdrop {
		transition-duration: 0.7s;
	}

	@starting-style {
		.gs-video[open],
		.gs-video[open]::backdrop {
			opacity: 0;
		}

		.gs-video[open] {
			translate: 0 2rem;
			filter: blur(8px);
		}
	}
}

/* -------------------------------------------------------- gradient text */

/*
 * One gradient, three uses: the masthead and the essay highlights follow
 * page scroll (gs-sweep, in global.css, which the header logotype shares); the poster headline drifts on its own. Background-position
 * is not a compositor property, so each moving frame repaints the text —
 * acceptable for three short runs of type, and the reason there is no more
 * of it.
 */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	:is(.wp-block-heading.is-style-gs-masthead, .wp-block-heading.is-style-gs-poster, mark.gs-signal) {
		background-image: var(--gs-gradient);
		background-size: 300% 300%;
		background-position: var(--gs-scroll-p, 0%) 50%;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

@media (forced-colors: active) {
	:is(.wp-block-heading.is-style-gs-masthead, .wp-block-heading.is-style-gs-poster, mark.gs-signal) {
		background: none;
		color: CanvasText;
	}
}

@keyframes gs-drift {
	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

/*
 * Reveal: fade, rise and un-blur as an element scrolls in. The hero is never
 * revealed (it holds the LCP text), nor is the essay's first paragraph.
 *
 * The blur is kept at the source's 8px because it is the softness the design
 * wants, and its cost is bounded: filter is compositor-animated, only the
 * one or two elements inside their entry range are blurred at any moment,
 * and the fill is `backwards` so once an element is in, the animation stops
 * applying and no filter or layer stays behind on it.
 */
@keyframes gs-reveal {
	from {
		opacity: 0;
		translate: 0 2.5rem;
		filter: blur(8px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* Masthead and highlights track page scroll; landing.js stands in by
	   setting --gs-scroll-p where scroll timelines are missing. */
	@supports (animation-timeline: scroll()) {
		:is(.wp-block-heading.is-style-gs-masthead, mark.gs-signal) {
			animation: gs-sweep linear both;
			animation-timeline: scroll(root);
		}
	}

	.wp-block-heading.is-style-gs-poster {
		animation: gs-drift 8s ease-in-out infinite;
	}

	/* The button's gradient only moves while it is showing. */
	.wp-block-button.is-style-gs-signal .wp-block-button__link::before {
		animation: gs-drift 8s ease-in-out infinite paused;
	}

	.wp-block-button.is-style-gs-signal .wp-block-button__link:is(:hover, :focus-visible)::before {
		animation-play-state: running;
	}

	/*
	 * The range ends at whichever comes first: fully in view, or 12rem
	 * after entering. The first keeps elements at the very bottom of the
	 * page reachable; the second keeps a block taller than the viewport
	 * from staying faded while it is being read. landing.js tests this
	 * exact condition before running its IntersectionObserver fallback.
	 */
	@supports (animation-timeline: view()) and (animation-range: entry 0% entry min(100%, 12rem)) {
		.gs-js :is(.gs-essay > :not(:first-child), .gs-cta > :not(.is-style-gs-steps), .gs-cta .is-style-gs-steps > li) {
			animation: gs-reveal var(--gs-ease) backwards;
			animation-timeline: view();
			animation-range: entry 0% entry min(100%, 12rem);
		}
	}
}

/* Fallback reveal, driven by landing.js. It only marks elements that start
   below the fold, so nothing on screen is ever hidden. */
.gs-pending {
	opacity: 0;
	translate: 0 2.5rem;
	filter: blur(8px);
}

.gs-in {
	transition:
		opacity 1.2s var(--gs-ease),
		translate 1.2s var(--gs-ease),
		filter 1.2s var(--gs-ease);
}