/* ============================================================
   Z — zzz.site
   Original brand palette: mid-purple drenches (#54256f),
   lilac sections (#bd97e2 / #dcbaff), deep ink text (#1d0b2d),
   light neutral base (#f3f3f3).
   ============================================================ */

:root {
	--ink: #220a38;
	--ink-2: #1d0b2d;
	--purple: #54256f;
	--lilac: #c398ec;
	--lilac-bright: #c398ec;
	--lilac-soft: #dcbaff;
	--lilac-tint: #f2eafb;
	--bg: #faf8fd;
	--ink-soft: #43305a;
	--gray: #f3f3f3;
	--white: #fff;
	--text-accent: #8c54ac;
	--ease-out: cubic-bezier(.22, 1, .36, 1);
}

@font-face {
	font-family: celestiaregular;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/celestia-bf67506e2229d8b-webfont.woff2) format("woff2"), url(../fonts/celestia-bf67506e2229d8b-webfont.woff) format("woff");
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--bg);
	color: var(--ink);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -.01em;
	margin: 0;
}

h1, h2, h3, p {
	margin-block-start: 0;
}

h1, h2, h3 {
	line-height: 1.15;
	text-wrap: balance;
}

::selection {
	background: var(--lilac);
	color: var(--ink-2);
}

:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: 3px solid var(--purple);
	outline-offset: 3px;
	border-radius: 4px;
}

.main-content {
	display: flex;
	flex-direction: column;
}

.sr {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

video::-webkit-media-controls {
	display: none !important;
}

/* ---------- page-load wipe ---------- */

.loading {
	animation: reveal 1.4s cubic-bezier(.77, 0, .175, 1) forwards;
	background: var(--ink-2);
	inset: 0;
	pointer-events: none;
	position: fixed;
	transform-origin: 0 0;
	z-index: 2000;
}

@keyframes reveal {
	0% { transform: scaleY(1); }
	to { transform: scaleY(0); }
}

/* ---------- header / explore menu ---------- */

.site__header {
	align-items: center;
	background: linear-gradient(rgba(29, 11, 45, .4), transparent);
	display: flex;
	padding: 24px 24px 48px;
	pointer-events: none;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
}

.site__header .explore {
	margin-left: auto;
	pointer-events: auto;
}

.site__header .explore .explore__launcher {
	align-items: center;
	aspect-ratio: 1;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: rgba(84, 37, 111, .55);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 999px;
	color: var(--white);
	cursor: pointer;
	display: flex;
	justify-content: center;
	padding: 0;
	transition: background .25s var(--ease-out), transform .25s var(--ease-out);
	width: 48px;
}

.site__header .explore .explore__launcher:hover {
	background: var(--purple);
	transform: scale(1.06);
}

.site__header .explore .explore__launcher svg {
	width: 22px;
}

.site__header .explore .explore__dialog {
	animation: menu-close .3s forwards;
	background: var(--purple);
	border: 0;
	color: var(--white);
	height: 100%;
	inset: 0;
	margin: 0;
	max-height: 100%;
	max-width: 100%;
	overflow: auto;
	padding: 0;
	position: fixed;
	text-align: center;
	width: 100%;
}

.site__header .explore .explore__dialog[open] {
	align-items: center;
	animation: menu-open .35s var(--ease-out) forwards;
	display: flex;
	justify-content: center;
}

.site__header .explore .explore__dialog ul {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 18px;
	justify-content: center;
	list-style: none;
	margin: 0;
	margin-inline: 30px;
	padding: 40px 0;
}

.site__header .explore .explore__dialog[open] ul > * {
	animation: menu-item .5s var(--ease-out) backwards;
}

.site__header .explore .explore__dialog[open] ul > :nth-child(1) { animation-delay: .06s; }
.site__header .explore .explore__dialog[open] ul > :nth-child(2) { animation-delay: .1s; }
.site__header .explore .explore__dialog[open] ul > :nth-child(3) { animation-delay: .14s; }
.site__header .explore .explore__dialog[open] ul > :nth-child(4) { animation-delay: .18s; }
.site__header .explore .explore__dialog[open] ul > :nth-child(5) { animation-delay: .22s; }
.site__header .explore .explore__dialog[open] ul > :nth-child(6) { animation-delay: .26s; }
.site__header .explore .explore__dialog[open] ul > :nth-child(7) { animation-delay: .3s; }
.site__header .explore .explore__dialog[open] ul > :nth-child(8) { animation-delay: .34s; }
.site__header .explore .explore__dialog[open] ul > :nth-child(9) { animation-delay: .38s; }
.site__header .explore .explore__dialog[open] ul > :nth-child(10) { animation-delay: .42s; }
.site__header .explore .explore__dialog[open] ul > :nth-child(11) { animation-delay: .46s; }
.site__header .explore .explore__dialog[open] ul > :nth-child(12) { animation-delay: .5s; }
.site__header .explore .explore__dialog[open] ul > :nth-child(13) { animation-delay: .54s; }
.site__header .explore .explore__dialog[open] ul > :nth-child(14) { animation-delay: .58s; }
.site__header .explore .explore__dialog[open] ul > :nth-child(15) { animation-delay: .62s; }

@keyframes menu-item {
	from { opacity: 0; translate: 0 16px; }
	to { opacity: 1; translate: 0 0; }
}

.site__header .explore .explore__dialog hr {
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
	margin: 6px 0;
	width: min(320px, 70vw);
}

.site__header .explore .explore__dialog a {
	color: var(--white);
	font-family: celestiaregular, system-ui, sans-serif;
	font-size: clamp(22px, 3.2vw, 30px);
	line-height: 1.25;
	text-decoration: none;
	text-wrap: balance;
	transition: color .2s;
}

.site__header .explore .explore__dialog a:hover {
	color: var(--lilac-soft);
}

.site__header .explore .explore__close {
	align-items: center;
	aspect-ratio: 1;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 999px;
	color: var(--white);
	cursor: pointer;
	display: flex;
	justify-content: center;
	padding: 0;
	position: fixed;
	right: 24px;
	top: 24px;
	transition: background .2s;
	width: 48px;
}

.site__header .explore .explore__close:hover {
	background: var(--ink-2);
}

.site__header .explore .explore__close svg {
	width: 22px;
}

@keyframes menu-open {
	0% { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@keyframes menu-close {
	0% { opacity: 1; }
	to { opacity: 0; }
}

/* ---------- hero ---------- */

.hero {
	align-items: center;
	background: var(--purple);
	color: var(--white);
	display: flex;
	height: 100vh;
	height: 100svh;
	justify-content: center;
	overflow: clip;
	position: relative;
	width: 100%;
}

.hero .hero__video {
	filter: grayscale(1) contrast(200%);
	height: 100%;
	inset: 0;
	mix-blend-mode: screen;
	object-fit: cover;
	opacity: .5;
	position: absolute;
	width: 100%;
}

.hero::after {
	background: linear-gradient(transparent 60%, rgba(84, 37, 111, .75));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.hero .hero__inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px;
	position: relative;
	text-align: center;
	z-index: 1;
}

/* breathing lilac aura behind the logo */
.hero .hero__inner::before {
	animation: glow-pulse 6s ease-in-out infinite alternate;
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(195, 152, 236, .4), transparent 68%);
	border-radius: 50%;
	content: "";
	filter: blur(40px);
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 0;
	translate: -50% -12%;
	width: min(64vw, 460px);
	z-index: -1;
}

@keyframes glow-pulse {
	from { opacity: .55; scale: 1; }
	to { opacity: 1; scale: 1.18; }
}

.hero .hero__inner .hero__logo {
	animation: hero-rise 1s var(--ease-out) .5s backwards, logo-float 7s ease-in-out 3s infinite;
	aspect-ratio: 1;
	filter: drop-shadow(0 24px 60px rgba(29, 11, 45, .45));
	margin-bottom: 36px;
	max-width: 340px;
	width: 52vw;
}

.hero .hero__inner .hero__subtitle {
	animation: hero-rise 1s var(--ease-out) .7s backwards;
	font-family: celestiaregular, system-ui, sans-serif;
	font-size: clamp(26px, 5vw, 48px);
	line-height: 1.2;
	margin-bottom: 0;
	text-wrap: balance;
}

.hero .hero__inner .hero__info {
	animation: hero-rise 1s var(--ease-out) .9s backwards;
	background: var(--lilac-bright);
	border: 0;
	border-radius: 999px;
	color: var(--ink);
	font-size: clamp(15px, 2vw, 18px);
	font-weight: 700;
	margin-top: 2.2em;
	padding: 16px 42px;
	text-decoration: none;
	transition: background .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
	width: fit-content;
}

.hero .hero__inner .hero__info:hover {
	background: var(--white);
	box-shadow: 0 12px 32px rgba(29, 11, 45, .35);
	transform: translateY(-2px);
}

.hero .hero__inner .hero__scrolldown {
	animation: hero-rise 1s var(--ease-out) 1.1s backwards;
	color: rgba(255, 255, 255, .8);
	font-size: .95rem;
	letter-spacing: .02em;
	margin-top: 4.5em;
	text-decoration: none;
	transition: color .2s;
}

.hero .hero__inner .hero__scrolldown:hover {
	color: var(--white);
}

.hero .hero__inner .hero__scrolldown span::after {
	animation: nudge 1.8s ease-in-out infinite;
	content: "↓";
	display: inline-block;
	margin-left: .5em;
}

@keyframes hero-rise {
	0% { opacity: 0; transform: translateY(26px); }
	to { opacity: 1; transform: none; }
}

@keyframes logo-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes nudge {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}

/* ---------- buttons ---------- */

.buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 36px;
}

.buttons-after {
	margin-top: 36px;
}

.button {
	background: var(--purple);
	border: 0;
	border-radius: 999px;
	color: var(--white);
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -.01em;
	padding: 15px 36px;
	text-align: center;
	text-decoration: none;
	transition: background .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
	width: fit-content;
}

.button:hover {
	background: var(--ink-2);
	box-shadow: 0 10px 26px rgba(29, 11, 45, .3);
	transform: translateY(-2px);
}

.button:active {
	transform: translateY(0) scale(.98);
}

/* ---------- sections: shared ---------- */

.sections {
	display: flex;
	flex-direction: column;
}

.section {
	/* clip (not hidden): overflow:hidden would make each section a scroll
	   container and hijack every descendant view() timeline */
	overflow: clip;
	padding-block: clamp(64px, 9vw, 120px);
	position: relative;
	scroll-margin-block-start: 12px;
	width: 100%;
}

.section .section__inner {
	margin-inline: auto;
	max-width: 760px;
	padding-inline: 24px;
	position: relative;
	width: 100%;
	z-index: 1;
}

.section .section__title {
	color: var(--ink);
	font-family: celestiaregular, system-ui, sans-serif;
	font-size: clamp(2.5rem, 6vw, 4.75rem);
	letter-spacing: -.01em;
	line-height: 1.05;
	margin-bottom: .35em;
}

.section .section__subtitle {
	color: var(--purple);
	font-family: celestiaregular, system-ui, sans-serif;
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	line-height: 1.3;
	margin-bottom: 1.2em;
	margin-top: 0;
}

.section .section__inner p {
	color: var(--ink-soft);
	font-size: clamp(1.0625rem, 1.4vw, 1.125rem);
	line-height: 1.65;
	margin-bottom: 1.1em;
	max-width: 62ch;
	text-wrap: pretty;
}

.section .section__inner p a {
	color: var(--purple);
	font-weight: 600;
	text-decoration-color: var(--text-accent);
	text-underline-offset: 3px;
	transition: color .2s;
}

.section .section__inner p a:hover {
	color: var(--ink-2);
}

.section .section__inner blockquote {
	color: var(--purple);
	font-family: celestiaregular, system-ui, sans-serif;
	margin: 2em 0 0;
	max-width: 30em;
}

.section .section__inner blockquote p {
	color: inherit;
	font-family: inherit;
	font-size: clamp(1.25rem, 2.2vw, 1.55rem);
	line-height: 1.45;
}

.list {
	color: var(--ink-soft);
	font-size: clamp(1.0625rem, 1.4vw, 1.125rem);
	line-height: 1.6;
	margin: 1.4em 0;
	max-width: 60ch;
	padding-left: 1.3em;
	text-align: left;
}

.list li {
	margin-bottom: .7em;
	padding-left: .3em;
}

.list li::marker {
	color: var(--purple);
}

/* ---------- floating bubble decor (statement sections) ---------- */

#intro::before, #comingsoon::before, #links::before {
	animation: bubbles-drift 26s ease-in-out infinite alternate;
	will-change: transform;
	background:
		radial-gradient(circle 70px at 10% 22%, rgba(255, 255, 255, .16) 98%, transparent),
		radial-gradient(circle 110px at 88% 12%, rgba(255, 255, 255, .1) 98%, transparent),
		radial-gradient(circle 55px at 78% 82%, rgba(255, 255, 255, .14) 98%, transparent),
		radial-gradient(circle 85px at 16% 88%, rgba(255, 255, 255, .09) 98%, transparent);
	content: "";
	inset: -120px 0;
	pointer-events: none;
	position: absolute;
}

/* second bubble layer, drifting counter to the first for depth */
#intro::after, #comingsoon::after, #links::after {
	animation: bubbles-drift 34s ease-in-out infinite alternate-reverse;
	background:
		radial-gradient(circle 38px at 30% 32%, rgba(255, 255, 255, .1) 98%, transparent),
		radial-gradient(circle 92px at 62% 72%, rgba(255, 255, 255, .07) 98%, transparent),
		radial-gradient(circle 26px at 92% 42%, rgba(255, 255, 255, .12) 98%, transparent),
		radial-gradient(circle 55px at 6% 65%, rgba(255, 255, 255, .08) 98%, transparent);
	content: "";
	inset: -140px 0;
	pointer-events: none;
	position: absolute;
}

@keyframes bubbles-drift {
	0% { translate: 0 0; }
	to { translate: 0 60px; }
}

/* ---------- statement sections (centered) ---------- */

#intro, #comingsoon, #links {
	text-align: center;
}

#intro .section__inner p,
#comingsoon .section__inner p,
#links .section__inner p {
	margin-inline: auto;
}

#intro .buttons, #comingsoon .buttons, #links .buttons {
	justify-content: center;
}

/* intro: lilac drench */

#intro {
	background: var(--lilac);
}

#intro .section__subtitle {
	color: var(--ink);
	font-size: clamp(1.4rem, 2.8vw, 2rem);
	line-height: 1.35;
	margin-inline: auto;
	max-width: 26em;
}

#intro .section__inner p {
	color: #3a1a58;
	font-weight: 600;
}

/* coming soon: purple drench */

#comingsoon {
	background: var(--purple);
}

#comingsoon .section__title {
	color: var(--lilac-bright);
}

#comingsoon .section__inner p {
	color: var(--lilac-soft);
}

/* links: lilac finale before the purple footer */

#links {
	background: var(--lilac);
}

#links .buttons {
	margin-top: 28px;
}

/* ---------- split sections (image + text) ---------- */

#zoom, #zest, #zone, #aboutus {
	align-items: stretch;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-block: 0;
}

#zoom .section__inner, #zest .section__inner, #zone .section__inner, #aboutus .section__inner {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-inline: 0;
	max-width: 760px;
	padding: clamp(56px, 8vw, 110px) clamp(28px, 6vw, 96px);
	text-align: left;
}

/* on wide screens the text column sits next to the image,
   not stranded at the screen edge */
#zoom .section__inner, #zone .section__inner, #aboutus .section__inner {
	margin-right: auto;
}

#zest .section__inner {
	margin-left: auto;
}

#zoom, #zone {
	background: var(--white);
}

#zest, #aboutus {
	background: var(--lilac-tint);
}

#zoom .section__image, #zest .section__image, #zone .section__image, #aboutus .section__image {
	min-height: 100%;
	overflow: clip;
	position: relative;
}

#zoom .section__image img, #zoom .section__image video,
#zest .section__image img,
#zone .section__image img {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	scale: 1.15;
	width: 100%;
	will-change: translate;
}

/* hover: media gently zooms and a shine sweeps across the frame */
@media (hover: hover) {
	#zoom .section__image img, #zoom .section__image video,
	#zest .section__image img,
	#zone .section__image img,
	.aboutus-image {
		transition: transform .8s var(--ease-out);
	}

	#zoom:hover .section__image img, #zoom:hover .section__image video,
	#zest:hover .section__image img,
	#zone:hover .section__image img,
	#aboutus:hover .aboutus-image {
		transform: scale(1.04);
	}

	#zoom .section__image::after, #zest .section__image::after, #zone .section__image::after, #aboutus .section__image::after {
		background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .16) 50%, transparent 58%);
		content: "";
		inset: 0;
		pointer-events: none;
		position: absolute;
		transform: translateX(-130%);
		transition: transform 1s var(--ease-out);
		z-index: 1;
	}

	#zoom:hover .section__image::after, #zest:hover .section__image::after, #zone:hover .section__image::after, #aboutus:hover .section__image::after {
		transform: translateX(130%);
	}
}

/* about us: rotating background slideshow fills its half */

#aboutus .section__image img {
	display: none;
}

.aboutus-image {
	background-position: 50%;
	background-size: cover;
	inset: 0;
	position: absolute;
	scale: 1.15;
	will-change: translate;
}

/* ---------- prose sections ---------- */

#fitness {
	background: var(--bg);
}

#activities {
	background: var(--lilac-tint);
}

#parties {
	background: var(--white);
}

#faqs {
	background: var(--bg);
}

/* parties menu image */

#parties .section__image--full {
	margin: 48px auto 0;
	max-width: min(920px, calc(100% - 48px));
	width: 100%;
}

#parties .section__image--full img {
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(34, 10, 56, .14);
	display: block;
	height: auto;
	width: 100%;
}

#parties .section__inner + .section__image--full + .section__inner {
	margin-top: 32px;
	text-align: center;
}

#parties .section__inner + .section__image--full + .section__inner p {
	margin-inline: auto;
}

/* schedule embed */

.goteamup-wrapper {
	background: var(--white);
	border-radius: 20px;
	box-shadow: 0 16px 44px rgba(34, 10, 56, .1);
	margin-top: 32px;
	padding: 12px;
	width: 100%;
}

.goteamup-wrapper[hidden] {
	display: none;
}

/* ---------- FAQ accordion ---------- */

#faqs .section__inner details {
	border-bottom: 1px solid rgba(34, 10, 56, .16);
}

#faqs .section__inner details:first-of-type {
	border-top: 1px solid rgba(34, 10, 56, .16);
	margin-top: 24px;
}

#faqs .section__inner summary {
	align-items: baseline;
	color: var(--ink);
	cursor: pointer;
	display: flex;
	font-size: clamp(1.1rem, 1.8vw, 1.25rem);
	font-weight: 600;
	gap: 16px;
	justify-content: space-between;
	line-height: 1.4;
	list-style: none;
	padding: 20px 4px;
	transition: color .2s;
}

#faqs .section__inner summary::-webkit-details-marker {
	display: none;
}

#faqs .section__inner summary::after {
	color: var(--text-accent);
	content: "+";
	flex-shrink: 0;
	font-family: celestiaregular, system-ui, sans-serif;
	font-size: 1.5em;
	line-height: 1;
	transition: transform .3s var(--ease-out);
}

#faqs .section__inner details[open] summary {
	color: var(--purple);
}

#faqs .section__inner details[open] summary::after {
	transform: rotate(45deg);
}

#faqs .section__inner summary:hover {
	color: var(--purple);
}

#faqs .section__inner details > p,
#faqs .section__inner details > div {
	padding: 0 4px 22px;
}

#faqs .section__inner details p {
	color: #3a2a4d;
	margin-bottom: .5em;
}

#faqs .section__inner details ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#faqs .section__inner details ul p {
	margin-bottom: .35em;
}

/* smooth FAQ expand (progressive enhancement) */

@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}

	#faqs details::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size .4s var(--ease-out), content-visibility .4s allow-discrete;
	}

	#faqs details[open]::details-content {
		block-size: auto;
	}
}

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

.footer {
	background: var(--purple);
	color: var(--white);
	font-size: 1rem;
	padding: clamp(56px, 7vw, 88px) 0 40px;
}

.footer__inner {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 900px;
	padding: 0 24px;
}

.footer__brand {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	font-family: celestiaregular, system-ui, sans-serif;
}

.footer__logo {
	margin-bottom: .4em;
}

.footer__logo svg {
	width: 56px;
}

.footer__site {
	color: var(--lilac-soft);
	font-size: 1.15rem;
	letter-spacing: .01em;
}

.footer__info {
	font-size: 1rem;
	line-height: 1.8;
}

.footer__info p {
	margin: 0;
}

.footer__info a {
	color: var(--lilac-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .2s;
}

.footer__info a:hover {
	color: var(--white);
}

/* ---------- scroll-driven animations (modern CSS, no JS) ---------- */

@supports (animation-timeline: view()) {
	/* page scroll progress bar */
	body::after {
		animation: progress-grow linear both;
		animation-timeline: scroll(root);
		background: var(--lilac);
		content: "";
		height: 4px;
		inset: 0 0 auto;
		pointer-events: none;
		position: fixed;
		transform-origin: 0 50%;
		z-index: 1500;
	}

	/* hero peels apart in layers as it scrolls away:
	   content at ~0.3x scroll speed with a fade, video at ~0.18x */
	.hero {
		view-timeline: --hero block;
	}

	.hero .hero__inner {
		animation: hero-content-drift linear both;
		animation-range: exit 0% exit 100%;
		animation-timeline: --hero;
	}

	.hero .hero__video {
		animation: hero-video-drift linear both;
		animation-range: exit 0% exit 100%;
		animation-timeline: --hero;
	}

	/* split-section media drifts inside its frame
	   (scale: 1.15 in the base styles provides the bleed room) */
	#zoom .section__image, #zest .section__image, #zone .section__image, #aboutus .section__image {
		view-timeline: --frame block;
	}

	#zoom .section__image img, #zoom .section__image video,
	#zest .section__image img,
	#zone .section__image img,
	.aboutus-image {
		animation: frame-drift linear both;
		animation-range: cover 0% cover 100%;
		animation-timeline: --frame;
	}

	/* parties menu floats against the scroll (foreground feel) */
	#parties .section__image--full img {
		animation: float-counter linear both;
		animation-range: cover 0% cover 100%;
		animation-timeline: view();
	}

	/* bubble decor moves on a deeper layer; scroll depth runs on
	   transform while the ambient drift keeps running on translate */
	#intro, #comingsoon, #links {
		view-timeline: --statement block;
	}

	#intro::before, #comingsoon::before, #links::before {
		animation: bubbles-drift 26s ease-in-out infinite alternate, bubbles-depth linear both;
		animation-range: normal, cover 0% cover 100%;
		animation-timeline: auto, --statement;
	}
}

@keyframes progress-grow {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes hero-content-drift {
	from { opacity: 1; translate: 0 0; }
	70% { opacity: 0; }
	to { opacity: 0; translate: 0 30vh; }
}

@keyframes hero-video-drift {
	from { translate: 0 0; }
	to { translate: 0 18vh; }
}

@keyframes frame-drift {
	from { translate: 0 -5.5%; }
	to { translate: 0 5.5%; }
}

@keyframes float-counter {
	from { translate: 0 22px; }
	to { translate: 0 -22px; }
}

@keyframes bubbles-depth {
	from { transform: translateY(90px); }
	to { transform: translateY(-90px); }
}

/* ---------- responsive ---------- */

@media screen and (max-width: 900px) {
	#zoom, #zest, #zone, #aboutus {
		grid-template-columns: 1fr;
	}

	#zoom .section__inner, #zest .section__inner, #zone .section__inner, #aboutus .section__inner {
		margin-inline: auto;
		order: 1;
		padding: clamp(48px, 10vw, 72px) 24px;
	}

	#zoom .section__image, #zest .section__image, #zone .section__image, #aboutus .section__image {
		aspect-ratio: 4 / 3;
		min-height: 0;
		order: 2;
	}

	#parties .section__image--full {
		max-width: calc(100% - 40px);
	}
}

@media (max-width: 700px) {
	.footer__inner {
		align-items: center;
		flex-direction: column;
		gap: 24px;
		text-align: center;
	}

	.footer__brand {
		align-items: center;
	}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.loading {
		animation-duration: .01s;
	}

	.hero .hero__inner .hero__logo,
	.hero .hero__inner .hero__subtitle,
	.hero .hero__inner .hero__info,
	.hero .hero__inner .hero__scrolldown,
	.hero .hero__inner .hero__scrolldown span::after,
	#intro::before, #comingsoon::before, #links::before,
	#intro::after, #comingsoon::after, #links::after,
	.section .section__inner,
	body::after,
	.hero .hero__inner,
	.hero .hero__inner::before,
	.hero .hero__video,
	.site__header .explore .explore__dialog[open] ul > *,
	#zoom .section__image img, #zoom .section__image video,
	#zest .section__image img,
	#zone .section__image img,
	.aboutus-image,
	#parties .section__image--full img {
		animation: none;
	}

	#zoom .section__image img, #zoom .section__image video,
	#zest .section__image img,
	#zone .section__image img,
	.aboutus-image {
		scale: none;
	}

	body::after {
		content: none;
	}

	*, *::before, *::after {
		transition-duration: .01s !important;
	}
}