/* YP Motion Study v0.2 — scroll-driven gathering of up to eight films. Everything is scoped to .ypms. */

.ypms {
	--bg: #1d252b;
	--bg-2: #2a343b;
	--ink: #f3ede8;
	--ink-2: rgba(243, 237, 232, .76);
	--ink-3: rgba(243, 237, 232, .5);
	--gold: #c9a96e;
	--blush: #dcc5b7;
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--vh: 1vh;

	position: relative;
	isolation: isolate;
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: "Cormorant Garamond", "Antic Didone", serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow: clip; /* clips without breaking position: sticky */
}
@supports (height: 100svh) { .ypms { --vh: 1svh; } }

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

/* ---------- The pinned stage ---------- */

.ypms__track { position: relative; }

.ypms__stage {
	position: relative;
	height: calc(var(--vh) * 100);
	min-height: 560px;
	overflow: hidden;
	background:
		radial-gradient(70% 60% at 50% 50%, rgba(49, 62, 72, .95) 0%, rgba(29, 37, 43, 0) 72%),
		radial-gradient(50% 40% at 6% 96%, rgba(201, 169, 110, .08) 0%, rgba(201, 169, 110, 0) 70%),
		var(--bg);
}
.ypms__stage::after {
	content: "";
	position: absolute;
	top: 0;
	left: 6vw;
	right: 6vw;
	height: 1px;
	background: linear-gradient(90deg, rgba(201, 169, 110, 0), rgba(201, 169, 110, .45), rgba(201, 169, 110, 0));
}

/* Edge to edge inside a page-builder container (shortcode default). --ypms-sb = scrollbar width, set by JS. */
.ypms.ypms--bleed {
	width: calc(100vw - var(--ypms-sb, 0px));
	max-width: none;
	margin-left: calc(50% - (100vw - var(--ypms-sb, 0px)) / 2);
	margin-right: calc(50% - (100vw - var(--ypms-sb, 0px)) / 2);
}

/* Scroll mode (set by JS unless reduced motion): tall track, stage pinned while it plays. */
.ypms--scroll .ypms__track { height: calc(var(--vh) * 100 * var(--len, 3.4)); }
.ypms--scroll .ypms__stage { position: sticky; top: 0; }
/* Fallback pinning, used only if a parent element stops position: sticky from working. */
.ypms--pin .ypms__stage { position: absolute; top: 0; left: 0; right: 0; }
.ypms--pin .ypms__stage.is-pinned { position: fixed; top: 0; left: var(--ypms-left, 0px); right: auto; width: var(--ypms-width, 100%); }
.ypms--pin .ypms__stage.is-after { top: auto; bottom: 0; }


.ypms__grain {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .08;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ypms__wm {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 0;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	font-family: "Antic Didone", serif;
	font-size: 34vw;
	line-height: .8;
	letter-spacing: -.03em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(201, 169, 110, .15);
	transform: translate3d(calc(-50% + (var(--P, .5) - .5) * -30vw), -50%, 0);
}

/* ---------- Heading (centre of the stage) ---------- */

.ypms .ypms__head {
	position: absolute;
	left: 50%;
	top: calc(var(--ypms-hdr, 0px) + (100% - var(--ypms-hdr, 0px)) / 2);
	z-index: 20;
	width: min(44vw, 780px);
	margin: 0;
	text-align: center;
	transform: translate(-50%, -50%) scale(calc(1 - var(--P, 0) * .05));
	text-shadow: 0 2px 30px rgba(20, 25, 29, .55);
	pointer-events: none;
}

.ypms .ypms__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 clamp(18px, 2.6vh, 36px);
	font: 600 11px/1 "Josefin Sans", sans-serif;
	letter-spacing: .42em;
	text-transform: uppercase;
	color: var(--gold);
	text-shadow: none;
}
.ypms .ypms__eyebrow::before,
.ypms .ypms__eyebrow::after {
	content: "";
	width: clamp(28px, 3.4vw, 64px);
	height: 1px;
	background: currentColor;
}

.ypms .ypms__title {
	margin: 0;
	padding: 0;
	font-family: "Antic Didone", serif;
	font-weight: 400;
	font-size: min(5.6vw, 10.5vh);
	line-height: .92;
	letter-spacing: -.028em;
	text-transform: none;
	color: var(--ink);
}
.ypms .ypms__line { display: block; overflow: hidden; padding: .02em .1em .08em; margin-bottom: -.06em; }
.ypms .ypms__li { display: inline-block; }
.ypms .ypms__title em {
	display: inline-block;
	font-family: "Cormorant Garamond", serif;
	font-style: italic;
	font-weight: 300;
	font-size: 1.24em;
	line-height: .8;
	color: var(--blush);
}

.ypms .ypms__intro {
	max-width: 32ch;
	margin: clamp(16px, 2.6vh, 34px) auto 0;
	font: 400 clamp(1.05rem, min(1.35vw, 2.4vh), 1.55rem)/1.45 "Cormorant Garamond", serif;
	color: var(--ink-2);
}

/* ---------- Films ---------- */

.ypms .ypms__film {
	--e: 1;           /* 0 = off-screen at its entry point, 1 = settled */
	position: absolute;
	left: calc(var(--x) * 1%);
	/* --ypms-hdr = height of a fixed site header (set by JS); films lay out in the space below it. */
	top: calc(var(--ypms-hdr, 0px) + (100% - var(--ypms-hdr, 0px)) * var(--y) / 100);
	height: calc((100% - var(--ypms-hdr, 0px)) * var(--h) / 100);
	aspect-ratio: 9 / 16;
	margin: 0;
	z-index: calc(2 + var(--z, 0));
	transform:
		translate(-50%, -50%)
		translate3d(calc(var(--fx) * 1vw * (1 - var(--e))), calc(var(--fy) * var(--vh) * (1 - var(--e))), 0)
		rotate(calc(var(--fr) * 1deg * (1 - var(--e))))
		scale(calc(1 + .22 * (1 - var(--e))));
	opacity: var(--o, 1);
	will-change: transform, opacity;
}
@supports not (aspect-ratio: 1 / 1) {
	.ypms .ypms__film { width: calc(var(--h) * .5625 * var(--vh)); }
}

/* Where each film settles (x, y = centre in % of the stage; h = height in % of the stage)
   and where it comes from (fx in vw, fy in vh, fr in degrees). */
.ypms__film--1 { --x: 13; --y: 37; --h: 54; --fx: -60; --fy: 12;  --fr: -12; --z: 3; }
.ypms__film--2 { --x: 31; --y: 17; --h: 28; --fx: -18; --fy: -80; --fr: 9;   --z: 1; }
.ypms__film--3 { --x: 86; --y: 35; --h: 50; --fx: 60;  --fy: -14; --fr: 12;  --z: 3; }
.ypms__film--4 { --x: 68; --y: 17; --h: 27; --fx: 18;  --fy: -80; --fr: -9;  --z: 1; }
.ypms__film--5 { --x: 27; --y: 80; --h: 34; --fx: -50; --fy: 60;  --fr: -7;  --z: 2; }
.ypms__film--6 { --x: 48; --y: 87; --h: 23; --fx: 0;   --fy: 75;  --fr: 5;   --z: 1; }
.ypms__film--7 { --x: 71; --y: 81; --h: 32; --fx: 32;  --fy: 65;  --fr: 8;   --z: 2; }
.ypms__film--8 { --x: 93; --y: 83; --h: 27; --fx: 45;  --fy: 55;  --fr: 10;  --z: 1; }

.ypms .ypms__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--bg-2) center / cover no-repeat;
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(243, 237, 232, .06);
}
.ypms .ypms__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(20, 25, 29, 0) 62%, rgba(20, 25, 29, .6) 100%);
}

.ypms .ypms__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	background: transparent;
	opacity: 0;
	transition: opacity 1s ease;
}
.ypms .ypms__film.is-ready .ypms__video { opacity: 1; }

/* Caption sits inside each frame, bottom-left. */
.ypms .ypms__cap {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 11px;
	z-index: 1;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 9px;
	margin: 0;
	pointer-events: none;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
.ypms .ypms__num { font: 400 17px/1 "Antic Didone", serif; color: var(--gold); }
.ypms .ypms__label {
	font: 600 9.5px/1.3 "Josefin Sans", sans-serif;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--ink);
}
.ypms .ypms__note {
	flex-basis: 100%;
	font: italic 400 14px/1.2 "Cormorant Garamond", serif;
	color: var(--ink-2);
}

/* Smaller films: keep captions to one clean line. */
.ypms .ypms__label { white-space: nowrap; }
.ypms__film--2 .ypms__note,
.ypms__film--4 .ypms__note,
.ypms__film--6 .ypms__note { display: none; }
.ypms__film--2 .ypms__label,
.ypms__film--4 .ypms__label,
.ypms__film--6 .ypms__label { font-size: 8px; letter-spacing: .22em; }

/* Play / pause: the whole frame is the button; a quiet pill shows the state. */
.ypms .ypms__toggle {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ypms .ypms__pill {
	position: absolute;
	right: 10px;
	top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 28px;
	padding: 0 11px 0 10px;
	border: 1px solid rgba(243, 237, 232, .32);
	border-radius: 999px;
	background: rgba(20, 25, 29, .34);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--ink);
	font: 600 8.5px/1 "Josefin Sans", sans-serif;
	letter-spacing: .28em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity .3s ease;
}
.ypms .ypms__glyph { width: 7px; height: 8px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.ypms .ypms__film.is-paused .ypms__glyph,
.ypms .ypms__film.is-blocked .ypms__glyph {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4.5px 0 4.5px 7px;
	border-color: transparent transparent transparent currentColor;
}
.ypms .ypms__frame:hover .ypms__pill,
.ypms .ypms__toggle:focus-visible .ypms__pill,
.ypms .ypms__film.is-paused .ypms__pill,
.ypms .ypms__film.is-blocked .ypms__pill { opacity: 1; }
.ypms .ypms__toggle:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* "Scroll" cue, fades as the films arrive. */
.ypms__hint {
	position: absolute;
	left: 50%;
	bottom: 26px;
	z-index: 1;
	display: none;
	transform: translateX(-50%);
	font: 600 9.5px/1 "Josefin Sans", sans-serif;
	letter-spacing: .4em;
	text-transform: uppercase;
	color: var(--ink-3);
	opacity: calc(1 - var(--P, 0) * 12);
}
/* Decorative words are drawn by CSS so search engines only read the real copy. */
.ypms__wm::before { content: attr(data-text); }
.ypms__hint::before { content: "Scroll"; }
.ypms .ypms__pill-text:empty::before { content: "Pause"; }
.ypms .ypms__film.is-paused .ypms__pill-text:empty::before,
.ypms .ypms__film.is-blocked .ypms__pill-text:empty::before { content: "Play"; }
.ypms__hint::after {
	content: "";
	display: block;
	width: 1px;
	height: 38px;
	margin: 12px auto 0;
	background: linear-gradient(var(--ink-3), transparent);
}
.ypms--scroll .ypms__hint { display: block; }

/* ---------- Site header while it sits over the section (homepage) ---------- */

html.ypms-header-over .bde-header-builder {
	background-color: rgba(29, 37, 43, .92) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: background-color .35s ease;
}
html.ypms-header-over .bde-header-builder .breakdance-menu-link,
html.ypms-header-over .bde-header-builder .breakdance-menu-toggle {
	color: #f3ede8 !important;
	transition: color .35s ease;
}
html.ypms-header-over .bde-header-builder .breakdance-menu-toggle .breakdance-menu-toggle-lines,
html.ypms-header-over .bde-header-builder .breakdance-menu-toggle .breakdance-menu-toggle-lines::before,
html.ypms-header-over .bde-header-builder .breakdance-menu-toggle .breakdance-menu-toggle-lines::after {
	background-color: #f3ede8 !important;
}

/* ---------- Closing statement ---------- */

.ypms .ypms__close {
	position: relative;
	padding: clamp(80px, 12vw, 180px) 6vw clamp(96px, 12vw, 200px);
	text-align: center;
}
.ypms .ypms__closing {
	margin: 0;
	font: italic 300 clamp(2rem, 4.2vw, 5rem)/1.06 "Cormorant Garamond", serif;
	letter-spacing: -.01em;
	color: var(--ink);
}
.ypms .ypms__cline { display: block; overflow: hidden; padding: .02em .1em .1em; }
.ypms .ypms__cline:nth-child(2) { color: var(--ink-2); }
.ypms .ypms__closing em {
	font-family: "Antic Didone", serif;
	font-style: normal;
	font-size: .92em;
	letter-spacing: -.02em;
	color: var(--blush);
}
.ypms .ypms__aside {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin: clamp(26px, 2.6vw, 44px) 0 0;
	font: 600 10.5px/1.5 "Josefin Sans", sans-serif;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--gold);
}
.ypms .ypms__aside::before,
.ypms .ypms__aside::after { content: ""; flex: none; width: 36px; height: 1px; background: currentColor; }

.ypms--motion .ypms__li {
	transform: translate3d(0, 112%, 0);
	transition: transform 1.5s var(--ease-out) calc(var(--d, 0) * 1ms);
}
.ypms--motion .is-in .ypms__li { transform: none; }
.ypms--motion .ypms__aside {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity 1.2s ease .5s, transform 1.4s var(--ease-out) .5s;
}
.ypms--motion .is-in .ypms__aside { opacity: 1; transform: none; }

/* ---------- Mobile: films gather above and below the headline ---------- */

@media (max-width: 759px) {
	.ypms .ypms__head { width: 86vw; }
	.ypms .ypms__eyebrow { gap: 12px; margin-bottom: 14px; font-size: 9.5px; letter-spacing: .36em; }
	.ypms .ypms__eyebrow::before,
	.ypms .ypms__eyebrow::after { width: 24px; }
	.ypms .ypms__title { font-size: min(11.2vw, 5.6vh); }
	.ypms .ypms__intro { max-width: 30ch; margin-top: 12px; font-size: min(1rem, 2.1vh); line-height: 1.4; }

	.ypms__film--1 { --x: 20; --y: 15; --h: 24; --fx: -75; --fy: -8;  --fr: -12; --z: 2; }
	.ypms__film--2 { --x: 45; --y: 9;  --h: 16; --fx: -20; --fy: -60; --fr: 8;   --z: 1; }
	.ypms__film--3 { --x: 64; --y: 20; --h: 20; --fx: 25;  --fy: -60; --fr: -8;  --z: 3; }
	.ypms__film--4 { --x: 86; --y: 12; --h: 21; --fx: 75;  --fy: -10; --fr: 12;  --z: 1; }
	.ypms__film--5 { --x: 17; --y: 83; --h: 22; --fx: -75; --fy: 10;  --fr: -10; --z: 2; }
	.ypms__film--6 { --x: 39; --y: 75; --h: 15; --fx: -20; --fy: 60;  --fr: 7;   --z: 1; }
	.ypms__film--7 { --x: 60; --y: 88; --h: 20; --fx: 20;  --fy: 60;  --fr: -7;  --z: 3; }
	.ypms__film--8 { --x: 85; --y: 79; --h: 23; --fx: 75;  --fy: 12;  --fr: 11;  --z: 2; }

	.ypms .ypms__cap { display: none; }
	.ypms .ypms__pill { right: 6px; top: 6px; height: 24px; padding: 0 8px; }
	.ypms .ypms__pill-text { display: none; }
	.ypms .ypms__frame { box-shadow: 0 0 0 4px var(--bg), 0 24px 50px -24px rgba(0, 0, 0, .7); }

	.ypms .ypms__close { padding: 80px 22px 96px; }
	.ypms .ypms__closing { font-size: clamp(1.9rem, 9vw, 2.8rem); }
	.ypms .ypms__aside { font-size: 9px; letter-spacing: .26em; gap: 12px; }
	.ypms .ypms__aside::before,
	.ypms .ypms__aside::after { width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.ypms *, .ypms *::before, .ypms *::after {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
}

/* ---------- Prototype page chrome (only on the private test page) ---------- */

body.ypms-proto { margin: 0; background: #e9e1dc; }
.ypms-proto__bar {
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 22px 6vw;
	font: 600 11px/1.3 "Josefin Sans", sans-serif;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: #313e48;
}
.ypms-proto__mark { color: inherit; text-decoration: none; }
.ypms-proto__tag { color: rgba(49, 62, 72, .55); letter-spacing: .24em; font-size: 10px; text-align: right; }
.ypms-proto__before,
.ypms-proto__after {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 58vh;
	font: italic 400 1.35rem/1.4 "Cormorant Garamond", serif;
	color: rgba(49, 62, 72, .55);
	text-align: center;
	padding: 0 6vw;
}
.ypms-proto__after { min-height: 44vh; }
.ypms-proto__scroll {
	font: 600 10px/1 "Josefin Sans", sans-serif;
	font-style: normal;
	letter-spacing: .4em;
	text-transform: uppercase;
}
.ypms-proto__scroll::after {
	content: "";
	display: block;
	width: 1px;
	height: 48px;
	margin: 14px auto 0;
	background: currentColor;
}