/* Works Wheel for Elementor */

.ww {
	--ww-bg: transparent;
	--ww-fg: #0a0a0a;
	--ww-muted: #8a8a8a;
	--ww-card-bg: #ececec;
	--ww-radius: 8px;
	--ww-shadow: rgba(10, 10, 10, 0.12);
	--ww-action-bg: #fff;
	--ww-active-from: #177ee5;
	--ww-active-from-stop: 0%;
	--ww-active-to: #fa0282;
	--ww-active-to-stop: 100%;
	--ww-active-angle: 115deg;
	--ww-ease: cubic-bezier(0.22, 1, 0.36, 1); /* easeOutQuint-ish */

	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 24rem;
	overflow: hidden;
	/* Isolate the component: its per-frame changes never repaint the page around it */
	contain: layout paint;
	background: var(--ww-bg);
	color: var(--ww-fg);
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.ww *,
.ww *::before,
.ww *::after {
	box-sizing: border-box;
}

/* Scroll-linked mode: a tall track, the widget pinned inside it.
   (JS sets the track height and the pinned `top`.) */
.ww-track {
	position: relative;
	width: 100%;
	max-width: 100%;
	/* second safety net against sideways overflow - clip (unlike hidden) doesn't
	   break the sticky pinning inside */
	overflow-x: clip;
}

/* 3D (desktop) only: Safari can let 3D-transformed children escape
   overflow:hidden - clip-path is a hard clip it applies to 3D content too.
   Not used on the flat (mobile) version, where plain overflow works and a
   clip-path would only add repaint work while scrolling. */
.ww:not(.ww--flat) {
	-webkit-clip-path: inset(0);
	clip-path: inset(0);
}

/* Caption on the card itself - used by the flat (phone) drum only. It moves with
   its card, so it never crosses another card and never has to fade in and out
   while scrolling (which read as flicker). */
.ww-caption {
	display: none;
}

.ww--flat .ww-caption {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 2.4em 0.9em 0.75em;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55));
	color: #fff;
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-align: start;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	opacity: var(--ww-cap, 1);
}

/* ...so the separate floating title is not needed there */
.ww--flat .ww-title {
	display: none;
}

/* Flat (2D) drum on phones: no 3D context at all */
.ww--flat .ww-stage {
	perspective: none;
}
.ww--flat .ww-wheel {
	-webkit-transform-style: flat;
	transform-style: flat;
}
.ww--flat .ww-card {
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
}

.ww-track > .ww {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

/* Invisible snap points along the track (positions set from JS) */
.ww-snap {
	position: absolute;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
	visibility: hidden;
	scroll-snap-align: start;
}

/* Scroll-linked: the page scroll drives the wheel, so no grab cursor and no
   touch handling - vertical swipes are ordinary page scrolling. */
.ww-track .ww-stage {
	cursor: default;
	touch-action: auto;
}

/* Stage: the element that is dragged / scrolled / focused */
.ww-stage {
	position: absolute;
	inset: 0;
	cursor: grab;
	/* Vertical swipes belong to the page (native scroll + momentum on iOS);
	   horizontal swipes are handled by the wheel. */
	touch-action: pan-y;
	outline: none;
}

.ww.is-dragging .ww-stage {
	cursor: grabbing;
}

.ww-stage:focus-visible {
	outline: 2px solid var(--ww-fg);
	outline-offset: -4px;
}

.ww-wheel {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transform-style: preserve-3d;
}

/* Cards */
.ww .ww-card {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	color: inherit;
	text-decoration: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
	-webkit-user-drag: none;
	-webkit-touch-callout: none; /* iOS: no link preview on long-press while swiping */
	/* The card box keeps its full size while the visible face is scaled down in the
	   ring - so only the face takes clicks, or neighbours' boxes would steal them. */
	pointer-events: none;
}

.ww .ww-card:focus-visible {
	outline: 2px solid var(--ww-fg);
	outline-offset: 3px;
	border-radius: var(--ww-radius);
}

.ww-face {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var(--ww-radius);
	background: var(--ww-card-bg);
	box-shadow: 0 18px 40px -18px var(--ww-shadow);
	transform-origin: 50% 50%;
	pointer-events: auto;
	cursor: pointer;
}

/* Press feedback (mouse only): the card gives a little under the click.
   `scale` composes with the tilt's inline transform instead of replacing it.
   Not on touch - there :active fires as a scroll begins. */
@media (hover: hover) and (pointer: fine) {
	.ww-face {
		transition: scale 160ms cubic-bezier(0.23, 1, 0.32, 1);
	}
	.ww-face:active {
		scale: 0.98;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ww-face {
		transition: none;
	}
	.ww-face:active {
		scale: none;
	}
}

.ww .ww-face img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	pointer-events: none;
}

/* Shadow made from the project's own picture: a small blurred copy of it
   sits under the card, a little lower and narrower - a soft coloured glow
   instead of a grey shadow. Desktop only (blur is costly on phones). */
.ww-glow {
	position: absolute;
	top: 3%;
	right: 4%;
	bottom: 1%;
	left: 4%;
	z-index: 0;
	border-radius: var(--ww-radius);
	background-position: center;
	background-size: cover;
	opacity: 0.5;
	filter: blur(30px) saturate(1.25);
	transform: translateY(3.5%);
	pointer-events: none;
}

/* video cards: the live copy of the video, faded in over the poster's glow */
.ww-glow-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.ww-glow-canvas.is-on {
	opacity: 1;
}

.ww-glow ~ .ww-face {
	z-index: 1;
	/* the picture's glow does the work - keep only a faint contact shadow */
	box-shadow: 0 4px 14px -10px rgba(0, 0, 0, 0.24);
}

.ww--flat .ww-glow {
	display: none;
}

.ww--flat .ww-glow ~ .ww-face {
	box-shadow: 0 10px 22px -14px var(--ww-shadow);
}

/* Mouse tilt (desktop): a soft light that follows the cursor across the big
   card. JS drives --ww-gx / --ww-gy (position) and --ww-glare (strength). */
.ww-face::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(circle at var(--ww-gx, 50%) var(--ww-gy, 50%), rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 55%),
		linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.14) 100%);
	opacity: var(--ww-glare, 0);
}

.ww-action {
	z-index: 2;
}

/* Video cards: the video is the card's picture - always shown (its first frame
   until it reaches the front and plays) */
.ww .ww-face .ww-video {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	pointer-events: none;
}

.ww .ww-face .ww-poster {
	position: absolute;
	top: 0;
	left: 0;
}

.ww .ww-face .ww-video--poster {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.ww .ww-face .ww-video--poster.is-playing {
	opacity: 1;
}

/* "לצפייה" - in the language of the site's video pause button (.ms-video-toggle):
   40px, white, hairline border, soft shadow, thin 1.25 stroke icon; on hover the
   edge turns purple (#8a40b3) and it lifts 1px. Always shown on the card standing
   in front (.is-big, set by the wheel), bottom left; the pause sits bottom right. */
.ww-action {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 16px;
	box-sizing: border-box;
	border: 1px solid rgba(17, 17, 17, 0.14);
	border-radius: 999px;
	background: var(--ww-action-bg);
	box-shadow: 0 4px 18px rgba(17, 17, 17, 0.14);
	color: #111;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	transition:
		opacity 0.3s var(--ww-ease),
		border-color 0.2s,
		box-shadow 0.2s,
		transform 0.2s;
	pointer-events: none;
	/* no backdrop blur: it would re-blur every frame inside the tilting card */
}

.ww-action svg {
	flex: none;
	width: 14px;
	height: 14px;
}

.ww--mirror .ww-action svg {
	transform: scaleX(-1);
}

.ww-card.is-big .ww-action {
	opacity: 1;
	pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
	.ww-card.is-big .ww-action:hover {
		border-color: #8a40b3;
		box-shadow: inset 0 0 0 1px #8a40b3, 0 4px 18px rgba(17, 17, 17, 0.14);
		transform: translateY(-1px);
	}
}

.ww-card:focus-visible .ww-action {
	outline: 2px solid #8a40b3;
	outline-offset: 3px;
}

/* the video pause button moves to the right side */
.ww .ww-face button.ms-video-toggle.ms-video-toggle {
	left: auto;
	right: 14px;
}

/* Ring label and front-card title */
.ww-label,
.ww-title {
	pointer-events: none;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--ww-fg);
}

/* The label is a heading (h2 by default): keep the theme's heading margins,
   sizes and colours out of it - size comes from JS, colour from the widget. */
.ww .ww-label {
	margin: 0;
	color: var(--ww-fg);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.ww-label {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 0 8%;
}

.ww-label-text {
	display: inline-block;
	text-align: center;
	overflow-wrap: break-word;
	will-change: transform;
}

.ww-title {
	position: absolute;
	top: 50%;
	left: 8%;
	transform: translateY(-50%);
	opacity: 0;
}

/* Title swap: fade out, change text, fade in (timing driven from JS) */
.ww-title-text {
	display: inline-block;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ww-title-text.is-out {
	opacity: 0;
	transform: translateY(0.15em);
}

.ww--mirror .ww-title {
	left: auto;
	right: 8%;
}

/* Narrow stages: title under the card instead of beside it */
.ww--narrow .ww-title,
.ww--narrow.ww--mirror .ww-title {
	top: auto;
	bottom: 6%;
	left: 6%;
	right: 6%;
	transform: none;
	text-align: center;
}

/* Index */
.ww .ww-index {
	position: absolute;
	top: 7.5%;
	right: 2.5%;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
	line-height: 1.75;
	color: var(--ww-muted);
	z-index: 200;
}

.ww--mirror .ww-index {
	right: auto;
	left: 2.5%;
	text-align: left;
}

.ww .ww-index li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* No shadows on the index, whatever the theme / Elementor Kit sets on text or buttons */
.ww .ww-index,
.ww .ww-index *,
.ww .ww-index *:hover,
.ww .ww-index *:focus,
.ww .ww-index *:active {
	text-shadow: none !important;
	box-shadow: none !important;
	filter: none !important;
}

.ww .ww-index li::before,
.ww .ww-index li::marker {
	content: none;
}

.ww--narrow .ww-index {
	display: none;
}

.ww--narrow.ww--index-mobile .ww-index {
	display: block;
}

/* Hard reset against theme / Elementor Kit button styles */
.ww .ww-index button,
.ww .ww-index button:hover,
.ww .ww-index button:focus,
.ww .ww-index button:active {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	outline: none;
	transition: color 0.2s ease;
}

.ww .ww-index button:hover {
	color: var(--ww-fg);
}

.ww .ww-index button:focus-visible {
	color: var(--ww-fg);
	outline: 1px solid var(--ww-fg);
	outline-offset: 2px;
}

/* ---------- Active index item ----------
   Two stacked copies of the text: the plain one underneath, a gradient one on
   top. Switching never swaps paint in one frame - the gradient copy wipes in
   along the reading direction while the plain copy fades out, and the reverse
   on the item being left. Same weight in both states, so nothing shifts. */
.ww .ww-index button {
	position: relative;
}

.ww .ww-index .ww-i-base,
.ww .ww-index .ww-i-grad {
	display: block;
	white-space: nowrap;
}

.ww .ww-index .ww-i-base {
	transition: opacity 0.45s var(--ww-ease);
}

.ww .ww-index .ww-i-grad {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		var(--ww-active-angle),
		var(--ww-active-from) var(--ww-active-from-stop),
		var(--ww-active-to) var(--ww-active-to-stop)
	);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	pointer-events: none;
	/* hidden: clipped away from the end of the line (LTR) ... */
	clip-path: inset(0 100% 0 0);
	opacity: 0;
	transition: clip-path 0.6s var(--ww-ease), opacity 0.35s ease;
}

/* ... RTL: text starts on the right, so the wipe runs right-to-left */
.ww--mirror .ww-index .ww-i-grad {
	clip-path: inset(0 0 0 100%);
}

.ww .ww-index button.is-active .ww-i-grad {
	clip-path: inset(0 0 0 0);
	opacity: 1;
}

.ww .ww-index button.is-active .ww-i-base {
	opacity: 0;
}

/* Gliding marker beside the active item (position set from JS) */
.ww--index-bar .ww-index::before {
	content: '';
	position: absolute;
	top: 0;
	right: -14px;
	width: 2px;
	height: var(--ww-bar-h, 1em);
	border-radius: 2px;
	background-image: linear-gradient(180deg, var(--ww-active-from), var(--ww-active-to));
	transform: translateY(var(--ww-bar-y, 0px));
	opacity: var(--ww-bar-o, 0);
}

.ww--mirror.ww--index-bar .ww-index::before {
	right: auto;
	left: -14px;
}

.ww--ready.ww--index-bar .ww-index::before {
	transition: transform 0.6s var(--ww-ease), height 0.6s var(--ww-ease), opacity 0.3s ease;
}

/* Touch screens: no hover, so no hover badge - and above all no backdrop blur,
   which iOS Safari re-renders every frame inside 3D-transformed cards (flicker). */
@media (hover: none) {
	.ww .ww-action {
		display: none;
	}
	/* Index on phones: a plain crossfade (compositor-only) instead of the
	   clip-path wipe, which repaints gradient text on every frame of the wipe -
	   exactly while the cards are moving. */
	.ww .ww-index .ww-i-grad,
	.ww--mirror .ww-index .ww-i-grad,
	.ww .ww-index button.is-active .ww-i-grad {
		-webkit-clip-path: none;
		clip-path: none;
		transition: opacity 0.35s ease;
	}
	.ww .ww-card,
	.ww .ww-face {
		-webkit-transform-style: flat;
		transform-style: flat;
	}
	.ww .ww-face {
		/* a lighter shadow is far cheaper to redraw on a phone GPU */
		box-shadow: 0 10px 22px -14px var(--ww-shadow);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ww-card.is-big .ww-action:hover {
		transform: none;
	}
	.ww-action,
	.ww-title-text,
	.ww .ww-index button,
	.ww .ww-index .ww-i-base,
	.ww .ww-index .ww-i-grad,
	.ww--ready.ww--index-bar .ww-index::before {
		transition: none;
	}
}

/* ---------- Scroll-linked choreography (title → gather → grow → projects) ---------- */

/* The pinned title sits above the cards flying in; the separate side title is
   replaced by the per-project names below. */
.ww--scroll .ww-label {
	z-index: 400;
}

.ww--scroll .ww-label-text {
	will-change: transform, opacity, filter;
	position: relative;
}

/* Colour moment on the way in: the same text, painted with the gradient, laid
   exactly over the title; JS fades it in and out (--ww-t-glow) and lets the
   colours drift through the letters (--ww-t-shift). */
.ww--scroll .ww-label-text::after {
	content: attr(data-text);
	position: absolute;
	top: -0.18em;
	right: 0;
	bottom: -0.22em;
	left: 0;
	padding: 0.18em 0 0.22em;
	text-align: inherit;
	color: transparent;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(
		90deg,
		#177ee5 calc(var(--ww-t-shift, 0) * 1%),
		#fa0282 calc(100% + var(--ww-t-shift, 0) * 1%)
	);
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	opacity: var(--ww-t-glow, 0);
	pointer-events: none;
}

/* ...and the plain letters underneath step back as the colour comes in */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.ww--scroll .ww-label-text {
		-webkit-text-fill-color: color-mix(in srgb, currentColor calc((1 - var(--ww-t-glow, 0)) * 100%), transparent);
	}
}

.ww--scroll .ww-title {
	display: none;
}

/* Names on the left (right when mirrored): one per project, stacked on the same
   spot; JS moves each with its project and blurs it out upwards. */
.ww-names {
	display: none;
}

.ww--scroll .ww-names {
	display: block;
	position: absolute;
	top: 50%;
	left: 8%;
	z-index: 300;
	pointer-events: none;
	color: var(--ww-fg);
	letter-spacing: -0.02em;
	line-height: 1.1;
	height: 0; /* a zero-height anchor on the vertical centre; names centre on it */
	opacity: 0;
}

.ww--scroll.ww--mirror .ww-names {
	left: auto;
	right: 8%;
}

.ww--scroll .ww-name {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	opacity: 0;
	will-change: transform, opacity, filter;
}


/* Project names beside the card: a light weight by default (change it in
   Style > "שם הפרויקט") */
.ww-names,
.ww-title {
	font-weight: 300;
}

/* Hover on the project name (and the side title): a slow, soft crossfade from
   the plain colour into the gradient, while the gradient's colours drift gently
   into place (--g-shift). */
@property --g-shift {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

@property --ww-n-mix {
	syntax: '<number>';
	inherits: true;
	initial-value: 1;
}

.ww .ww-n-text,
.ww .ww-title-text {
	--g-shift: 18;
	--ww-n-mix: 1;
	display: inline-block;
	/* room for ascenders / descenders - the gradient only paints inside the box */
	padding: 0.12em 0.04em 0.18em;
	margin: -0.12em -0.04em -0.18em;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
}

.ww .ww-n-text,
.ww .ww-title-text {
	--ww-n-ease: cubic-bezier(0.33, 0, 0.2, 1);
	transition:
		--ww-n-mix 1.1s var(--ww-n-ease),
		--g-shift 1.8s var(--ww-n-ease),
		background-size 1.1s var(--ww-n-ease);
}

.ww .ww-title-text {
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		--ww-n-mix 1.1s var(--ww-n-ease),
		--g-shift 1.8s var(--ww-n-ease),
		background-size 1.1s var(--ww-n-ease);
}

/* Browsers that can mix colours: a true crossfade */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.ww .ww-n-text,
	.ww .ww-title-text {
		color: transparent;
		-webkit-text-fill-color: transparent;
		background-image:
			linear-gradient(color-mix(in srgb, var(--ww-fg) calc(var(--ww-n-mix) * 100%), transparent), color-mix(in srgb, var(--ww-fg) calc(var(--ww-n-mix) * 100%), transparent)),
			linear-gradient(90deg, #177ee5 calc(var(--g-shift, 0) * 1%), #fa0282 calc(100% + var(--g-shift, 0) * 1%));
		background-size: 100% 100%, 100% 100%;
	}
	.ww .ww-name.is-front .ww-n-text:hover,
	.ww .ww-name.is-hot .ww-n-text,
	.ww .ww-title-text:hover,
	.ww .ww-title-text.is-hot {
		--ww-n-mix: 0;
		--g-shift: 0;
	}
}

/* Older browsers: a slow wipe from the start of the line */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.ww .ww-n-text,
	.ww .ww-title-text {
		color: transparent;
		-webkit-text-fill-color: transparent;
		background-image:
			linear-gradient(90deg, #177ee5 calc(var(--g-shift, 0) * 1%), #fa0282 calc(100% + var(--g-shift, 0) * 1%)),
			linear-gradient(var(--ww-fg), var(--ww-fg));
		background-position: 100% 0, 0 0;
		background-size: 0% 100%, 100% 100%;
	}
	.ww .ww-name.is-front .ww-n-text:hover,
	.ww .ww-name.is-hot .ww-n-text,
	.ww .ww-title-text:hover,
	.ww .ww-title-text.is-hot {
		--g-shift: 0;
		background-size: 100% 100%, 100% 100%;
	}
}

.ww--scroll .ww-name.is-front .ww-n-text,
.ww:not(.ww--scroll) .ww-title-text {
	pointer-events: auto;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.ww .ww-n-text,
	.ww .ww-title-text {
		transition: none;
	}
}

/* Phones: the name rides on the card (caption), and the index stays hidden */
.ww--scroll.ww--flat .ww-names,
.ww--scroll.ww--flat .ww-index {
	display: none;
}

/* The index and names arrive with the first project - start hidden */
.ww--scroll .ww-index {
	opacity: 0;
}

/* Sit below a hero it overlaps (the hero needs a higher z-index) */
.ww-track {
	z-index: 1;
}

/* ==========================================================================
   Phone version (.wwm) - its own markup, built for iOS.
   On phones the desktop wheel is not shown at all (display: none - its lazy
   pictures never load). The phone version is a sticky card stack done
   entirely by the browser: position: sticky, every size in CSS, no script
   while scrolling, no transforms / filters / will-change on anything that
   sticks. Sizes use svh: they don't change while Safari's toolbar slides.
   ========================================================================== */
.wwm {
	display: none;
	/* Motion curves (the lite script mirrors --wwm-enter-ease for old iOS) */
	--wwm-enter-ease: cubic-bezier(0.3, 0.15, 0.25, 1); /* scroll-linked: answers at once, lands softly */
	--wwm-deck-ease: cubic-bezier(0.22, 1, 0.36, 1); /* deck: move, scale and shade together */
	--wwm-deck-t: 0.5s;
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
	.ww-track,
	.ww {
		display: none !important;
	}

	.wwm {
		--ww-bg: transparent;
		--ww-fg: #0a0a0a;
		--ww-card-bg: #ececec;
		--ww-radius: 8px;
		--wwm-vh: 100vh;
		--wwm-gap: 56px; /* between cards in the flow */
		--wwm-peek: 14px; /* each card behind shows this much above the one in front */
		--wwm-r: max(var(--ww-radius), 18px);
		/* title */
		--wwm-fs: calc(clamp(30px, 10vw, 46px) * var(--wwm-scale, 1));
		--wwm-lh: calc(var(--wwm-fs) * 1.1);
		/* card height (JS replaces it with the measured value) */
		/* the title stays at the top of the stack; the cards stick below it */
		--wwm-head-pad: 12px;
		--wwm-head-h: calc(var(--wwm-lh) + var(--wwm-head-pad) * 2);
		--wwm-stack-top: calc(var(--wwm-hdr, 0px) + 6px + var(--wwm-head-h));
		/* card height (JS replaces it with the measured value) */
		--wwm-card-h: min(calc((100vw - 32px) * 1.25), calc(var(--wwm-vh) * 0.62));
		/* the stack (deck tops + front card) centred in the space below the title */
		--wwm-top: calc(var(--wwm-stack-top) + 2 * var(--wwm-peek) - 2px); /* right under the title */
		/* tucked under the section above by this much */
		--wwm-tuck: max(calc(var(--wwm-overlap, 30) * var(--wwm-vh) / 100), calc(var(--wwm-lh) + 40px));

		display: block;
		position: relative;
		width: 100%;
		padding-bottom: 48px;
		background: var(--ww-bg);
		color: var(--ww-fg);
		-webkit-tap-highlight-color: transparent;
	}
}

/* (very old Safari without clip: the copies start closer in, inside the screen) */

@supports (height: 100svh) {
	.wwm {
		--wwm-vh: 100svh;
	}
}

.wwm *,
.wwm *::before,
.wwm *::after {
	box-sizing: border-box;
}

/* Head (the title): tucked just above the bottom of the
   section above, sticks at its spot while that section slides away, and is
   revealed - then the cards rise over it */
.wwm-head {
	position: -webkit-sticky;
	position: sticky;
	top: calc(var(--wwm-hdr, 0px) + 6px);
	z-index: 2; /* above the stack: it stays at its top */
	padding: var(--wwm-head-pad) 0;
	/* below it, room for the title to scroll up and grow before the first card
	   comes (once stuck, the cards sit right under it - see --wwm-top) */
	margin: 0;
	/* its top edge is the bottom of the section above: the title comes down from
	   under it (anything above this line is hidden) */
	-webkit-clip-path: inset(0 -100vw -200vh -100vw);
	clip-path: inset(0 -100vw -200vh -100vw);
}

.wwm-title {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0 24px;
	color: var(--ww-fg);
	font-size: var(--wwm-fs);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-align: center;
}

.wwm-title-text {
	position: relative;
	display: inline-block;
	transform-origin: 50% 50%;
}

/* The gradient moment: the same words in the gradient, laid exactly over the
   title; it swells in and out once while the title grows */
.wwm-title-text::after {
	content: attr(data-text);
	position: absolute;
	top: -0.18em;
	right: 0;
	bottom: -0.22em;
	left: 0;
	padding: 0.18em 0 0.22em;
	color: transparent;
	-webkit-text-fill-color: transparent;
	background-image: linear-gradient(90deg, var(--ww-active-from, #177ee5), var(--ww-active-to, #fa0282), var(--ww-active-from, #177ee5));
	background-size: 200% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	opacity: 0;
	pointer-events: none;
}

/* Like the desktop: tucked under the section above, the title is revealed as
   that section slides away, and its entrance follows the scroll - it fades in,
   grows from small to full size and takes the gradient for a moment, all on
   one progress - starting as soon as it comes up into the screen. Done by the browser's own scroll timeline (no script, off the
   main thread). Older browsers (iOS before 26) get the same entrance timed,
   once it comes into view (fallback below). */
@supports (animation-timeline: view()) {
	.wwm {
		view-timeline-name: --wwm-sec;
	}
	.wwm-title-text {
		animation: wwm-t-in linear both;
		animation-timeline: --wwm-sec;
		/* from the moment it comes up into the screen (12% above the bottom) until it
		   reaches its spot at the top */
		animation-range:
			cover calc(var(--wwm-vh) * 0.04)
			cover calc(var(--wwm-vh) - var(--wwm-hdr, 0px) - 6px);
	}
	/* the first card comes in with it - rising a little, growing and fading in */
	.wwm-card:first-child .wwm-face {
		animation: wwm-c-in linear both;
		animation-timeline: --wwm-sec;
		animation-range:
			cover calc(var(--wwm-vh) * 0.04)
			cover calc(var(--wwm-vh) - var(--wwm-hdr, 0px) - 6px);
	}
	.wwm-title-text::after {
		animation: wwm-t-glow linear both;
		animation-timeline: --wwm-sec;
		/* from the moment it comes up into the screen (12% above the bottom) until it
		   reaches its spot at the top */
		animation-range:
			cover calc(var(--wwm-vh) * 0.04)
			cover calc(var(--wwm-vh) - var(--wwm-hdr, 0px) - 6px);
	}
}

/* One move, all together on one progress (like the desktop): it comes down
   out from under the section above, grows from small to full size and turns
   to the gradient - all at the same time, on the same soft curve. */
@keyframes wwm-t-in {
	0% {
		transform: translateY(calc(-100% - var(--wwm-head-pad))) scale(var(--wwm-from, 0.7));
		-webkit-text-fill-color: var(--ww-fg);
		animation-timing-function: var(--wwm-enter-ease);
	}
	100% {
		transform: none;
		-webkit-text-fill-color: transparent;
	}
}

@keyframes wwm-c-in {
	0% {
		opacity: 0;
		transform: translateY(60px) scale(0.86);
		animation-timing-function: var(--wwm-enter-ease);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

/* the colour comes in with it, and stays */
@keyframes wwm-t-glow {
	0% {
		opacity: 0;
		background-position: 100% 0;
		animation-timing-function: var(--wwm-enter-ease);
	}
	100% {
		opacity: 1;
		background-position: 0% 0;
	}
}

@supports not (animation-timeline: view()) {
	.wwm-title-text {
		/* --tpe: 0 .. 1 (eased), set on the section by the script */
		transform:
			translateY(calc((1 - var(--tpe, 0)) * (-100% - var(--wwm-head-pad))))
			scale(calc(var(--wwm-from, 0.7) + (1 - var(--wwm-from, 0.7)) * var(--tpe, 0)));
		-webkit-text-fill-color: color-mix(in srgb, var(--ww-fg) calc((1 - var(--tpe, 0)) * 100%), transparent);
	}
	.wwm-title-text::after {
		opacity: var(--tpe, 0);
		background-position: calc((1 - var(--tpe, 0)) * 100%) 0;
	}
	.wwm-card:first-child .wwm-face {
		opacity: var(--tpe, 0);
		transform: translateY(calc((1 - var(--tpe, 0)) * 60px)) scale(calc(0.86 + 0.14 * var(--tpe, 0)));
	}
}

/* Cards */
/* The title's own box: it ends exactly where the title must let go so that it
   leaves together with the last card (the cards let go when the list ends) -
   the last card never slides up over the title. */
.wwm-headbox {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: calc(var(--wwm-top) + var(--wwm-card-h) - var(--wwm-hdr, 0px) - 6px - var(--wwm-head-h) + 48px);
	z-index: 2;
	pointer-events: none;
}

.wwm-headbox .wwm-head {
	pointer-events: auto;
}

.wwm-list {
	display: flex;
	flex-direction: column;
	gap: var(--wwm-gap);
	/* top: the first card comes right under the title - it reaches its spot
	   at the very moment the title does (no empty stretch in between).
	   (padding, not margin - a margin would leak out and push the section down) */
	padding: calc(var(--wwm-top) - var(--wwm-hdr, 0px) - 6px) 16px 0;
}

.wwm-card {
	position: -webkit-sticky;
	position: sticky;
	top: var(--wwm-top); /* every card sticks at the same spot - the deck is drawn below */
	z-index: 1; /* over the title */
	display: block;
	width: 100%;
	height: var(--wwm-card-h);
	color: #fff;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.wwm-face {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	/* no overflow: hidden and no shadow - the rounded corners are on every layer
	   inside instead (overflow-clipping a video / picture on a moving layer is a
	   classic iOS flicker) */
	border-radius: var(--wwm-r);
	background: var(--ww-card-bg);
}

.wwm .wwm-media {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	/* on the media itself too: iOS doesn't always clip a playing video to its
	   parent's rounded corners */
	border-radius: var(--wwm-r);
	object-fit: cover;
	pointer-events: none;
}

.wwm .wwm-video--poster {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.wwm .wwm-video--poster.is-playing {
	opacity: 1;
}

.wwm-caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 0 0 var(--wwm-r) var(--wwm-r);
	padding: 3em 1em 0.9em;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55));
	color: #fff;
	font-size: 20px;
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-align: start;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}


/* The deck: only the two cards right behind the front one show - each peeks out
   above it, the second one smaller than the first; older cards fade away. Set
   by class once per change (an IntersectionObserver), then a short transition -
   nothing follows the scroll frame by frame. */
.wwm-face {
	transform-origin: 50% 0%;
	transition:
		translate var(--wwm-deck-t) var(--wwm-deck-ease),
		scale var(--wwm-deck-t) var(--wwm-deck-ease);
}

.wwm-face::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	background: #0d0d0d;
	opacity: 0;
	/* dims on the same curve as the move, so the card and its shade are one */
	transition: opacity var(--wwm-deck-t) var(--wwm-deck-ease);
	pointer-events: none;
}

.wwm-card.is-u1 .wwm-face {
	translate: 0 calc(var(--wwm-peek) * -1);
	scale: 0.93;
}

.wwm-card.is-u1 .wwm-face::after {
	opacity: 0.3;
}

.wwm-card.is-u2 .wwm-face {
	translate: 0 calc(var(--wwm-peek) * -2);
	scale: 0.86;
}

.wwm-card.is-u2 .wwm-face::after {
	opacity: 0.5;
}

.wwm-card.is-gone .wwm-face {
	translate: 0 calc(var(--wwm-peek) * -2);
	scale: 0.86;
}

.wwm-card {
	transition: opacity calc(var(--wwm-deck-t) * 0.8) var(--wwm-deck-ease);
}

.wwm-card.is-gone {
	opacity: 0;
}

/* Diagnostics (?ww=bare): the stack with nothing but the pictures - no
   rounding, no deck effect, no title effect - to find what flickers on a phone */
.wwm--bare .wwm-face,
.wwm--bare .wwm-media,
.wwm--bare .wwm-caption {
	border-radius: 0 !important;
}
.wwm--bare .wwm-face::after,
.wwm--bare .wwm-title-text::after {
	display: none !important;
}
.wwm--bare .wwm-card .wwm-face {
	scale: none !important;
	translate: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.wwm-card:first-child .wwm-face {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	/* no movement - but the shade still fades (opacity isn't motion) */
	.wwm-face {
		transition: none;
	}
	.wwm-title-text {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.wwm-title-text,
	.wwm-title-text::after,
	.wwm-title-text.is-in::after {
		animation: none !important;
	}
	.wwm-title-text {
		-webkit-text-fill-color: transparent;
	}
	.wwm-title-text::after {
		opacity: 1;
	}
}