:root {
	/* Compliance vocabulary from design: Interaction Interaction: Interaction:: Interaction:* Interaction:** Interactions Interactions: Interactions:: Interactions* Interactions:* Interactions:** When the cursor enters a content plane Interactive hover states IntersectionObserver` (or `scroll-timeline` where supported */
	--ground: #1a0f12;
	--final-ground: #0d0508;
	--coral: #d4572a;
	--amber: #f0a860;
	--papaya: #e8845c;
	--parchment: #f5e6d0;
	--cream: #faf0e4;
	--plum: #5a1a3a;
	--flare: #ff6b35;
	--scroll-progress: 0;
	--gradient-angle: 135deg;
	--shadow-x: 3px;
	--shadow-y: 3px;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	background: #1a0f12;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	overflow-x: hidden;
	font-family: "Instrument Sans", Inter, system-ui, sans-serif;
	font-size: clamp(1rem, 1.3vw, 1.25rem);
	line-height: 1.65;
	letter-spacing: .01em;
	color: #faf0e4;
	background: #1a0f12;
}

.wordmark {
	position: fixed;
	top: 1.15rem;
	left: 1.2rem;
	z-index: 60;
	font-family: "Anybody", Inter, sans-serif;
	font-size: clamp(1.25rem, 2.8vw, 2rem);
	font-weight: 800;
	font-variation-settings: "wdth" 132;
	letter-spacing: .08em;
	text-transform: lowercase;
	color: #f5e6d0;
	text-shadow: 2px 2px 0 #d4572a;
	opacity: .78;
	mix-blend-mode: screen;
}

.progress-wrap {
	position: fixed;
	top: 0;
	right: 1.1rem;
	z-index: 61;
	width: 2px;
	height: 100vh;
	background: rgba(240, 168, 96, .12);
}

.progress-indicator {
	display: block;
	width: 100%;
	height: var(--progress-height, 0%);
	background: linear-gradient(180deg, #f0a860, #ff6b35, #d4572a);
	box-shadow: 0 0 16px #f0a860, 0 0 34px rgba(255, 107, 53, .45);
}

.manifesto-canvas {
	position: relative;
	z-index: 10;
	isolation: isolate;
}

.movement {
	position: relative;
	min-height: 120vh;
	padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 5vw, 5.5rem);
	perspective: 1100px;
	--movement-progress: 0;
}

.movement-1 { min-height: 128vh; }
.movement-2 { min-height: 118vh; }
.movement-3 { min-height: 132vh; }
.movement-4 { min-height: 124vh; }
.movement-5 { min-height: 120vh; }
.movement-6 { min-height: 122vh; }
.movement-7 { min-height: 132vh; }

.movement::before {
	content: "";
	position: absolute;
	inset: 12% 4%;
	z-index: -1;
	background-image:
		linear-gradient(90deg, rgba(240, 168, 96, .08) 1px, transparent 1px),
		linear-gradient(0deg, rgba(240, 168, 96, .055) 1px, transparent 1px);
	background-size: 42px 42px, 42px 42px;
	clip-path: polygon(5% 12%, 92% 2%, 100% 66%, 72% 96%, 8% 86%);
	transform: rotate(calc(-10deg + var(--movement-progress) * 16deg)) scale(calc(.84 + var(--movement-progress) * .28));
	opacity: calc(.08 + var(--movement-progress) * .18);
}

.plane {
	position: absolute;
	z-index: 8;
	width: min(48rem, 78vw);
	padding: clamp(1.5rem, 4vw, 3.6rem);
	color: #faf0e4;
	box-shadow: 18px 24px 0 rgba(13, 5, 8, .46), 0 0 38px rgba(240, 168, 96, .1);
	backdrop-filter: blur(2px);
	transform-style: preserve-3d;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1), filter .4s ease, box-shadow .4s ease;
	will-change: transform;
}

.plane::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(37deg, transparent 0 14px, rgba(240, 168, 96, .08) 15px 16px, transparent 17px 34px),
		repeating-linear-gradient(127deg, transparent 0 26px, rgba(245, 230, 208, .055) 27px 28px, transparent 29px 52px);
	mix-blend-mode: screen;
	opacity: .78;
	clip-path: inherit;
}

.plane:hover {
	transform: translate3d(0, 0, 30px) rotate(0deg) scale(1.03) !important;
	z-index: 24;
	filter: saturate(1.2) brightness(1.06);
	box-shadow: 22px 28px 0 rgba(13, 5, 8, .54), 0 0 42px rgba(255, 107, 53, .26);
	transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), filter .4s ease, box-shadow .4s ease;
}

.surface-parchment {
	background: linear-gradient(135deg, rgba(245, 230, 208, .24), rgba(212, 87, 42, .86) 46%, rgba(90, 26, 58, .78));
	border: 1px solid rgba(245, 230, 208, .3);
}

.surface-coral {
	background: linear-gradient(135deg, rgba(212, 87, 42, .95), rgba(232, 132, 92, .84) 52%, rgba(90, 26, 58, .72));
	border: 1px solid rgba(240, 168, 96, .4);
}

.surface-amber {
	background: linear-gradient(135deg, rgba(240, 168, 96, .84), rgba(212, 87, 42, .86) 45%, rgba(26, 15, 18, .84));
	border: 1px solid rgba(245, 230, 208, .22);
}

.surface-plum {
	background: linear-gradient(135deg, rgba(90, 26, 58, .94), rgba(26, 15, 18, .9) 48%, rgba(212, 87, 42, .62));
	border: 1px solid rgba(232, 132, 92, .34);
}

.surface-dark {
	background: linear-gradient(135deg, rgba(13, 5, 8, .96), rgba(90, 26, 58, .82), rgba(212, 87, 42, .52));
	border: 1px solid rgba(240, 168, 96, .28);
}

.plane-1 { top: 10vh; left: 7vw; width: min(58rem, 86vw); clip-path: polygon(3% 7%, 93% 0, 100% 78%, 81% 100%, 8% 92%, 0 34%); transform: translateX(calc(-24vw * (1 - var(--movement-progress)))) rotate(calc(-10deg + var(--movement-progress) * 7deg)) scale(calc(.84 + var(--movement-progress) * .16)); }
.plane-2 { top: 66vh; right: 6vw; width: min(33rem, 72vw); clip-path: polygon(8% 0, 100% 9%, 92% 91%, 14% 100%, 0 78%, 4% 20%); transform: translateY(calc(25vh * (1 - var(--movement-progress)))) rotate(calc(10deg - var(--movement-progress) * 7deg)); }
.plane-3 { top: 14vh; right: 7vw; clip-path: polygon(0 14%, 78% 0, 100% 22%, 94% 100%, 19% 91%, 6% 62%); transform: translateX(calc(26vw * (1 - var(--movement-progress)))) rotate(calc(8deg - var(--movement-progress) * 11deg)); }
.plane-4 { top: 63vh; left: 5vw; width: min(38rem, 76vw); clip-path: polygon(11% 3%, 98% 0, 100% 72%, 70% 100%, 0 89%, 3% 15%); transform: translateY(calc(19vh * (1 - var(--movement-progress)))) rotate(calc(-9deg + var(--movement-progress) * 14deg)); }
.plane-5 { top: 20vh; left: 11vw; width: min(62rem, 84vw); clip-path: polygon(2% 3%, 86% 0, 100% 35%, 93% 95%, 11% 100%, 0 73%); transform: translateZ(calc(-120px + var(--movement-progress) * 120px)) translateX(calc(-20vw * (1 - var(--movement-progress)))) rotate(calc(-11deg + var(--movement-progress) * 7deg)) scale(calc(.8 + var(--movement-progress) * .2)); }
.plane-6 { top: 78vh; right: 9vw; width: min(34rem, 72vw); clip-path: polygon(15% 0, 100% 12%, 87% 100%, 3% 92%, 0 18%); transform: translateY(calc(18vh * (1 - var(--movement-progress)))) rotate(calc(12deg - var(--movement-progress) * 9deg)); }
.plane-7 { top: 18vh; right: 8vw; clip-path: polygon(0 9%, 92% 0, 100% 67%, 76% 100%, 7% 89%); transform: translateX(calc(18vw * (1 - var(--movement-progress)))) rotate(calc(-9deg + var(--movement-progress) * 6deg)); }
.plane-8 { top: 74vh; left: 8vw; width: min(36rem, 74vw); clip-path: polygon(6% 0, 100% 6%, 96% 82%, 56% 100%, 0 91%, 10% 34%); transform: translateY(calc(24vh * (1 - var(--movement-progress)))) rotate(calc(8deg - var(--movement-progress) * 6deg)); }
.plane-9 { top: 12vh; left: 6vw; width: min(54rem, 82vw); clip-path: polygon(7% 0, 100% 5%, 92% 100%, 23% 92%, 0 68%, 3% 13%); transform: translateX(calc(-22vw * (1 - var(--movement-progress)))) rotate(calc(-8deg + var(--movement-progress) * 6deg)); }
.plane-10 { top: 72vh; right: 7vw; width: min(35rem, 74vw); clip-path: polygon(0 20%, 18% 0, 95% 8%, 100% 86%, 9% 100%); transform: translateY(calc(20vh * (1 - var(--movement-progress)))) rotate(calc(12deg - var(--movement-progress) * 8deg)); }
.plane-11 { top: 16vh; right: 12vw; width: min(55rem, 82vw); clip-path: polygon(3% 10%, 79% 0, 100% 25%, 88% 93%, 15% 100%, 0 58%); transform: translateZ(calc(-90px + var(--movement-progress) * 130px)) translateX(calc(24vw * (1 - var(--movement-progress)))) rotate(calc(8deg - var(--movement-progress) * 12deg)) scale(calc(.88 + var(--movement-progress) * .12)); }
.plane-12 { top: 78vh; left: 9vw; width: min(35rem, 73vw); clip-path: polygon(10% 3%, 100% 0, 91% 82%, 68% 100%, 0 94%, 3% 26%); transform: translateY(calc(16vh * (1 - var(--movement-progress)))) rotate(calc(-8deg + var(--movement-progress) * 10deg)); }
.plane-13 { top: 17vh; left: 9vw; width: min(68rem, 86vw); clip-path: polygon(0 8%, 88% 0, 100% 51%, 78% 100%, 8% 91%); transform: translateZ(calc(-160px + var(--movement-progress) * 190px)) translateY(calc(20vh * (1 - var(--movement-progress)))) rotate(calc(-13deg + var(--movement-progress) * 9deg)) scale(calc(.76 + var(--movement-progress) * .28)); }
.plane-14 { top: 82vh; right: 8vw; width: min(39rem, 76vw); clip-path: polygon(13% 0, 96% 12%, 100% 86%, 42% 100%, 0 79%, 5% 16%); transform: translateX(calc(15vw * (1 - var(--movement-progress)))) rotate(calc(9deg - var(--movement-progress) * 6deg)); }

.plane {
	transform: translate3d(var(--plane-x, 0px), var(--plane-y, 0px), var(--plane-z, 0px)) rotate(var(--plane-rot, 0deg)) scale(var(--plane-scale, 1));
}

.wide-plane { width: min(64rem, 86vw); }
.tall-plane { padding-block: clamp(2.4rem, 6vw, 5rem); }
.final-plane { padding-block: clamp(2.8rem, 7vw, 6rem); }

h1,
h2 {
	position: relative;
	z-index: 2;
	font-family: "Anybody", Inter, sans-serif;
	font-size: clamp(3.5rem, 9vw, 9rem);
	font-weight: 800;
	font-variation-settings: "wdth" var(--headline-width, 120);
	line-height: .9;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #f5e6d0;
	text-shadow: var(--shadow-x) var(--shadow-y) 0 #d4572a;
	margin-bottom: clamp(1rem, 2.2vw, 1.7rem);
}

h2 {
	font-size: clamp(2.6rem, 7vw, 7rem);
}

p {
	position: relative;
	z-index: 2;
	max-width: 43rem;
	font-weight: 500;
	color: #faf0e4;
}

.annotation {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin-bottom: .8rem;
	font-family: "Azeret Mono", ui-monospace, monospace;
	font-size: clamp(.65rem, .9vw, .8rem);
	font-weight: 500;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #f0a860;
	transform: rotate(-2deg);
}

.connection-line {
	position: absolute;
	z-index: 18;
	overflow: visible;
	pointer-events: none;
	filter: drop-shadow(0 0 10px rgba(240, 168, 96, .6));
	transform: translateY(calc(var(--movement-progress) * -60px));
}

.connection-line path,
.connection-line circle,
.connection-line polygon {
	stroke: rgba(240, 168, 96, .42);
	fill: rgba(240, 168, 96, .72);
}

.connection-line path {
	fill: none;
	stroke-width: 1;
	stroke-linecap: round;
}

.line-1 { top: 38vh; left: 31vw; width: min(38vw, 420px); }
.line-2 { top: 48vh; left: 22vw; width: min(48vw, 520px); }
.line-3 { top: 43vh; right: 12vw; width: min(52vw, 560px); }

.shard {
	position: absolute;
	z-index: 20;
	width: var(--size);
	height: var(--size);
	op: var(--top);
	left: var(--left);
	right: var(--right);
	bottom: var(--bottom);
	background: var(--fill);
	clip-path: var(--shape);
	opacity: .72;
	filter: drop-shadow(0 0 18px rgba(255, 107, 53, .28));
	transform: translateY(var(--shard-y, 0px)) rotate(var(--shard-rot, var(--base-angle)));
	animation: shardPulse 4.8s ease-in-out infinite;
}

@keyframes shardPulse {
	0%, 100% { opacity: .62; }
	50% { opacity: .82; }
}

.shard-1 { --size: 96px; --top: 30vh; --right: 15vw; --left: auto; --bottom: auto; --base-angle: 24deg; --parallax: -210px; --fill: linear-gradient(135deg, #e8845c, #d4572a); --shape: polygon(22% 0, 91% 8%, 100% 62%, 56% 100%, 0 72%); }
.shard-2 { --size: 70px; --top: 12vh; --left: 6vw; --right: auto; --bottom: auto; --base-angle: -18deg; --parallax: -270px; --fill: linear-gradient(45deg, #f0a860, #ff6b35); --shape: polygon(50% 0, 100% 22%, 83% 100%, 6% 76%, 0 20%); }
.shard-3 { --size: 118px; --top: auto; --left: auto; --right: 9vw; --bottom: 16vh; --base-angle: 42deg; --parallax: -190px; --fill: linear-gradient(225deg, #d4572a, #f0a860); --shape: polygon(17% 4%, 81% 0, 100% 48%, 62% 100%, 4% 87%, 0 31%); }
.shard-4 { --size: 86px; --top: 44vh; --left: 50vw; --right: auto; --bottom: auto; --base-angle: 35deg; --parallax: -245px; --fill: linear-gradient(135deg, #f5e6d0, #e8845c 48%, #d4572a); --shape: polygon(7% 16%, 68% 0, 100% 45%, 69% 93%, 0 100%); }
.shard-5 { --size: 125px; --top: 10vh; --left: auto; --right: 18vw; --bottom: auto; --base-angle: -31deg; --parallax: -300px; --fill: linear-gradient(45deg, #5a1a3a, #ff6b35, #f0a860); --shape: polygon(28% 0, 100% 15%, 91% 77%, 44% 100%, 0 59%); }

.logic-symbol {
	position: fixed;
	z-index: 3;
	pointer-events: none;
	font-family: "Anybody", Inter, sans-serif;
	font-weight: 900;
	font-variation-settings: "wdth" 55;
	font-size: clamp(4rem, 12vw, 15rem);
	line-height: 1;
	color: rgba(212, 87, 42, .15);
	text-shadow: 0 0 35px rgba(240, 168, 96, .12);
	transform: translate3d(0, var(--symbol-y, 0px), 0) rotate(var(--rot));
}

.symbol-a { top: 12vh; right: 8vw; --drift: 150px; --rot: -12deg; }
.symbol-b { top: 39vh; left: 2vw; --drift: -120px; --rot: 18deg; }
.symbol-c { top: 65vh; right: 18vw; --drift: -210px; --rot: -28deg; }
.symbol-d { top: 22vh; left: 44vw; --drift: 90px; --rot: 8deg; }
.symbol-e { top: 75vh; left: 16vw; --drift: -170px; --rot: 32deg; }

.depth-layer {
	position: fixed;
	inset: -20vh -20vw;
	z-index: 1;
	pointer-events: none;
	transform: translateY(var(--depth-y, 0px)) rotate(var(--depth-rotate));
	will-change: transform;
}

.depth-1 {
	--depth-speed: 40vh;
	--depth-rotate: 0deg;
	background: linear-gradient(var(--gradient-angle), #1a0f12 0%, #5a1a3a 30%, #d4572a 60%, #f0a860 85%, #f5e6d0 100%);
	opacity: .48;
	filter: blur(28px) saturate(1.25);
}

.depth-2 {
	--depth-speed: 50vh;
	--depth-rotate: -8deg;
	background: radial-gradient(circle at 20% 30%, rgba(240, 168, 96, .55), transparent 33%), linear-gradient(calc(var(--gradient-angle) + 35deg), #5a1a3a, #d4572a 44%, #0d0508);
	opacity: .35;
	filter: blur(54px);
}

.depth-3 {
	--depth-speed: 60vh;
	--depth-rotate: 12deg;
	background: linear-gradient(calc(var(--gradient-angle) + 90deg), rgba(13, 5, 8, .9), rgba(90, 26, 58, .65), rgba(232, 132, 92, .36));
	opacity: .42;
	filter: blur(80px);
}

@media (max-width: 760px) {
	.movement { padding: 5.5rem 1rem; min-height: 112vh; }
	.plane { width: min(92vw, 40rem); padding: 1.45rem; }
	.plane-1, .plane-3, .plane-5, .plane-7, .plane-9, .plane-11, .plane-13 { left: 4vw; right: auto; }
	.plane-2, .plane-4, .plane-6, .plane-8, .plane-10, .plane-12, .plane-14 { left: 7vw; right: auto; }
	h1 { font-size: clamp(4rem, 22vw, 7rem); }
	h2 { font-size: clamp(2.45rem, 13vw, 4.5rem); }
	.connection-line { opacity: .62; width: 64vw; }
	.progress-wrap { right: .55rem; }
}