.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-inline: 0;
	padding-block: var(--space-10) var(--space-12);
}

.hero::before {
	content: '';
	position: absolute;
	inset: -12%;
	z-index: -3;
	pointer-events: none;
	background:
		radial-gradient(at 18% 22%, rgba(249, 161, 46, 0.38) 0, transparent 52%),
		radial-gradient(at 82% 8%, rgba(236, 72, 153, 0.28) 0, transparent 50%),
		radial-gradient(at 8% 78%, rgba(6, 182, 212, 0.26) 0, transparent 50%),
		radial-gradient(at 78% 74%, rgba(245, 158, 11, 0.2) 0, transparent 50%);
}

.hero::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	z-index: -2;
	height: 45%;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent, var(--surface-ground));
}

.hero__mark {
	position: relative;
	display: grid;
	place-items: center;
	margin-top: var(--space-4);
}

.hero__mark::before {
	content: '';
	position: absolute;
	width: 62%;
	aspect-ratio: 1;
	border-radius: var(--radius-full);
	background: radial-gradient(
		circle,
		rgba(249, 161, 46, 0.45) 0%,
		transparent 70%
	);
	pointer-events: none;
}

.hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	text-align: center;
}

.hero__issue {
	color: var(--primary);
}

.hero__headline {
	font-size: clamp(2.75rem, 9vw, 8.25rem);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.04em;
	line-height: 0.95;
	text-wrap: balance;
}

.hero__accent {
	font-style: italic;
	font-weight: var(--font-weight-medium);
	color: var(--primary);
}

.hero__stop {
	color: var(--text-subtle);
	font-weight: var(--font-weight-normal);
}

.hero__lede {
	max-width: 40rem;
	font-size: var(--font-size-lg);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

.hero__glyph {
	position: relative;
	width: clamp(110px, 22vw, 220px);
	height: auto;
	filter: drop-shadow(0 6px 24px rgba(249, 161, 46, 0.35));
}

.lifecycle {
	padding-block: var(--space-10);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.lifecycle__grid {
	display: grid;
	gap: var(--space-8);
}

.lifecycle__act {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.lifecycle__head {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
}

.lifecycle__numeral {
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-semibold);
	font-style: italic;
	line-height: 1;
	letter-spacing: -0.02em;
}

.lifecycle__numeral--before {
	color: var(--act-before);
}

.lifecycle__numeral--during {
	color: var(--act-during);
}

.lifecycle__numeral--after {
	color: var(--act-after);
}

.lifecycle__title {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.02em;
}

.act-section {
	padding-inline: 0;
	padding-block: var(--space-12);
}

.act-section--inverse {
	position: relative;
	overflow: hidden;
	background: var(--p-surface-900);
}

.act__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-8);
}

.act__numeral {
	font-size: clamp(4.5rem, 16vw, 12.5rem);
	font-weight: var(--font-weight-semibold);
	font-style: italic;
	line-height: 0.8;
	letter-spacing: -0.04em;
}

.act__numeral--before {
	color: var(--act-before);
}

.act__numeral--during {
	color: var(--act-during);
}

.act__numeral--after {
	color: var(--act-after);
}

.act__eyebrow--before {
	color: var(--act-before);
}

.act__eyebrow--during {
	color: var(--act-during);
}

.act__eyebrow--after {
	color: var(--act-after);
}

.act__title {
	font-size: clamp(1.875rem, 5vw, 3.5rem);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.03em;
	line-height: var(--line-height-tight);
	margin-block: var(--space-2);
}

.act__lede {
	max-width: 45rem;
	font-size: var(--font-size-base);
}

.bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

.bento__cell {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	border-radius: var(--radius-3xl);
	border: 1px solid var(--border);
	background: var(--surface);
	overflow: hidden;
}

.bento__cell--glass {
	background: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
	-webkit-backdrop-filter: blur(var(--glass-blur))
		saturate(var(--glass-saturation));
	border-color: var(--glass-border);
}

.bento__cell--inverse {
	background: var(--p-surface-800);
	border-color: var(--p-surface-700);
}

.bento__cell--primary {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-contrast);
}

.bento__cell--soft {
	background: var(--primary-soft);
	border-color: var(--primary-soft);
}

.bento__label {
	color: var(--primary);
}

.bento__cell--primary .bento__label {
	color: color-mix(in srgb, var(--primary-contrast) 70%, transparent);
}

.bento__title {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.02em;
	line-height: var(--line-height-snug);
	color: inherit;
}

.bento__body {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.bento__cell--primary .bento__body {
	color: color-mix(in srgb, var(--primary-contrast) 78%, transparent);
}

.season-timeline {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
	margin-top: auto;
	padding: var(--space-3);
	border-radius: var(--radius-2xl);
	border: 1px solid var(--border);
	background: var(--surface-2);
}

.season-timeline__month {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-3);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: var(--surface);
}

.season-timeline__month--current {
	border-color: var(--primary);
	background: var(--primary-soft);
}

.season-timeline__label {
	font-weight: var(--font-weight-bold);
	color: var(--text-muted);
}

.season-timeline__month--current .season-timeline__label {
	color: var(--primary);
}

.season-timeline__dots {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

.season-timeline__caption {
	margin-top: var(--space-2);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-tight);
	color: var(--text-muted);
}

.approval-list,
.triage-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: 0;
	margin: 0;
	list-style: none;
}

.approval-list__row,
.triage-list__row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-xs);
}

.approval-list__who {
	font-weight: var(--font-weight-medium);
}

.approval-list__what {
	color: var(--text-muted);
}

.approval-list__when {
	margin-inline-start: auto;
	color: var(--text-muted);
}

.approval-list__tick {
	padding: 2px 6px;
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--act-after) 18%, transparent);
	color: var(--act-after);
	font-weight: var(--font-weight-bold);
}

.triage-list__handle {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.triage-list__tag {
	padding: 2px 6px;
	border-radius: var(--radius-full);
	background: var(--surface-2);
	font-weight: var(--font-weight-semibold);
}

.triage-list__tag--press {
	color: color-mix(in srgb, var(--c-twitter) 65%, #fff);
}

.triage-list__tag--support {
	color: color-mix(in srgb, var(--c-google) 60%, #fff);
}

.triage-list__tag--fan {
	color: color-mix(in srgb, var(--c-instagram) 55%, #fff);
}

.progress-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.progress-row__label {
	width: 5rem;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
}

.progress-row__track {
	flex: 1;
	height: 6px;
	border-radius: var(--radius-full);
	border: 1px solid var(--border);
	background: var(--surface);
	overflow: hidden;
}

.progress-row__fill {
	height: 100%;
	border-radius: var(--radius-full);
	background: var(--progress-color);
}

.progress-row__value {
	width: 2.25rem;
	text-align: right;
}

.live-console {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: auto;
	padding: var(--space-3);
	border-radius: var(--radius-2xl);
	border: 1px solid var(--glass-border);
	background: rgba(0, 0, 0, 0.28);
	font-family: ui-monospace, Menlo, monospace;
}

.live-console__line {
	display: flex;
	gap: var(--space-2-5);
	font-size: 0.7rem;
}

.live-console__time {
	color: var(--text-muted);
	flex-shrink: 0;
}

.live-console__message {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--line-color);
}

.reel-strip {
	display: flex;
	gap: var(--space-1-5);
	margin-top: auto;
}

.reel-strip__reel {
	position: relative;
	flex: 1;
	aspect-ratio: 9 / 16;
	max-width: 3rem;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--p-300) 0%, var(--p-700) 100%);
}

.reel-strip__count {
	position: absolute;
	inset-block-start: 3px;
	inset-inline-end: 3px;
	padding: 1px 3px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 0.5rem;
}

.report-chip {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: auto;
	padding: var(--space-3);
	border-radius: var(--radius-xl);
	background: rgba(255, 255, 255, 0.06);
}

.report-chip__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2.5rem;
	border-radius: var(--radius-default);
	background: var(--primary);
	color: var(--primary-contrast);
	font-size: 0.55rem;
	font-weight: var(--font-weight-bold);
	flex-shrink: 0;
}

.report-chip__file {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--text);
	overflow-wrap: anywhere;
}

.report-chip__meta {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.best-post {
	display: flex;
	gap: var(--space-3);
	margin-top: auto;
}

.best-post__thumb {
	width: 3.75rem;
	aspect-ratio: 9 / 16;
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--p-300), var(--p-700));
	flex-shrink: 0;
}

.best-post__head {
	display: flex;
	align-items: center;
	gap: var(--space-1-5);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
}

.best-post__value {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	color: var(--text);
	line-height: 1.1;
}

.stats {
	padding-inline: 0;
	padding-block: var(--space-12);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.stats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-8);
}

.stats__value {
	font-size: clamp(2rem, 6vw, 3.5rem);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.03em;
	color: var(--text);
	line-height: 1.1;
}

.stats__label {
	font-size: var(--font-size-sm);
}

.testimonials {
	padding-block: var(--space-16);
}

.testimonials__eyebrow {
	color: var(--primary);
	margin-bottom: var(--space-6);
}

.testimonials__grid {
	display: grid;
	gap: var(--space-5);
}

.testimonial {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0;
	border-radius: var(--radius-3xl);
}

.testimonial__mark {
	font-family: Georgia, serif;
	font-size: var(--font-size-5xl);
	font-weight: var(--font-weight-bold);
	line-height: 0.5;
	color: var(--primary);
}

.testimonial__quote {
	margin: 0;
	font-size: var(--font-size-base);
	line-height: var(--line-height-snug);
	color: var(--text);
}

.testimonial__author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: auto;
}

.testimonial__name {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--text);
}

.testimonial__role {
	font-size: var(--font-size-xs);
}

.pricing {
	display: grid;
	gap: var(--space-8);
	padding-block: var(--space-8) var(--space-16);
}

.pricing__title {
	font-size: clamp(1.875rem, 5vw, 3.5rem);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.03em;
	line-height: var(--line-height-tight);
	margin-block: var(--space-4) var(--space-3);
}

.pricing__lede {
	max-width: 32rem;
	font-size: var(--font-size-base);
}

.pricing__plan {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	border-radius: var(--radius-3xl);
}

.pricing__price {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
}

.pricing__amount {
	font-size: clamp(2.5rem, 8vw, 4rem);
	font-weight: var(--font-weight-bold);
	letter-spacing: -0.03em;
	color: var(--text);
}

.pricing__unit {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.pricing__features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2-5);
	padding: 0;
	margin: 0;
	list-style: none;
}

.pricing__feature {
	display: flex;
	gap: var(--space-2);
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

.pricing__check {
	color: var(--primary);
	font-weight: var(--font-weight-bold);
}

.pricing__action {
	justify-content: center;
}

.pricing__footnote {
	text-align: center;
}

.closing {
	position: relative;
	overflow: hidden;
	padding-inline: 0;
	padding-block: var(--space-20);
	background: linear-gradient(135deg, var(--p-500) 0%, var(--p-700) 100%);
	text-align: center;
}

.closing__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

.closing__eyebrow {
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.1em;
}

.closing__title {
	font-size: clamp(2.25rem, 7vw, 5.5rem);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.03em;
	line-height: 1;
	color: #fff;
	text-wrap: balance;
}

.closing__lede {
	max-width: 34rem;
	font-size: var(--font-size-lg);
	color: rgba(255, 255, 255, 0.85);
}

.closing__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.closing__button--solid {
	background: #fff;
	border-color: #fff;
	color: var(--p-800);
}

.closing__button--outline {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

@media (min-width: 768px) {
	.hero {
		padding-block: var(--space-16) var(--space-20);
	}

	.lifecycle {
		padding-block: var(--space-14);
	}

	.lifecycle__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.act-section {
		padding-block: var(--space-20);
	}

	.act__header {
		flex-direction: row;
		align-items: flex-end;
		gap: var(--space-8);
		margin-bottom: var(--space-12);
	}

	.act__intro {
		flex: 1;
		padding-bottom: var(--space-4);
	}

	.stats__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.testimonials__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pricing {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: var(--space-10);
	}

	.season-timeline {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.bento {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-rows: minmax(200px, auto);
	}

	.bento__cell--span-2 {
		grid-column: span 2;
	}

	.bento__cell--span-3 {
		grid-column: span 3;
	}

	.bento__cell--row-2 {
		grid-row: span 2;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hero__issue,
	.hero__headline,
	.hero__lede,
	.hero__actions,
	.hero__glyph {
		animation: clk-rise var(--duration-700) var(--ease-out) both;
	}

	.hero__headline {
		animation-delay: 70ms;
	}

	.hero__lede {
		animation-delay: 150ms;
	}

	.hero__actions {
		animation-delay: 220ms;
	}

	.hero__glyph {
		--reveal-distance: 2.5rem;
		animation-delay: 300ms;
		animation-duration: var(--duration-1000);
	}

	.bento__cell {
		transition: border-color var(--duration-200) var(--ease-out);
	}

	.bento__cell:hover {
		border-color: var(--border-strong);
	}

	@supports (animation-timeline: view()) {
		.lifecycle__act,
		.bento__cell,
		.stats__item,
		.testimonial,
		.pricing__copy,
		.pricing__plan {
			animation: clk-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}

		.act__numeral,
		.act__intro {
			animation: clk-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 28%;
		}
	}
}

.states__eyebrow {
	color: var(--primary);
}

.states__title,
.strip__title {
	max-width: 34rem;
	margin-block: var(--space-3) var(--space-3);
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.02em;
	line-height: var(--line-height-tight);
}

.states__lede,
.strip__lede {
	max-width: 44rem;
	font-size: var(--font-size-base);
}

.states__flow {
	display: grid;
	gap: var(--space-3);
	margin-block: var(--space-8) var(--space-4);
	padding: 0;
	list-style: none;
	counter-reset: state;
}

.states__state {
	position: relative;
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-2xl);
	border: 1px solid var(--border);
	border-inline-start: 3px solid var(--state-color, var(--border-strong));
	background: var(--surface);
}

.states__state--before {
	--state-color: var(--act-before);
}

.states__state--during {
	--state-color: var(--act-during);
}

.states__state--after {
	--state-color: var(--act-after);
}

.states__name {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	color: var(--text);
}

.states__detail {
	margin-top: var(--space-1);
	color: var(--state-color, var(--text-muted));
}

.states__note {
	max-width: 44rem;
	font-size: var(--font-size-sm);
}

.strip__grid {
	display: grid;
	gap: var(--space-4);
	margin-block: var(--space-8) var(--space-5);
}

.strip__card {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	border-radius: var(--radius-2xl);
}

.strip__name {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	color: var(--text);
}

.strip__scope {
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

@media (min-width: 768px) {
	.states__flow {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--space-2);
	}

	.states__state {
		padding: var(--space-4);
	}

	.strip__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.states__state,
		.strip__card {
			animation: clk-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hero__issue {
		--reveal-distance: 1rem;
	}

	.hero__headline {
		--reveal-distance: 2.5rem;
		--reveal-scale: 0.97;
		animation-duration: var(--duration-1000);
	}

	.hero__lede {
		--reveal-distance: 1.75rem;
	}

	.hero__glyph {
		animation: clk-glyph-in var(--duration-1000) var(--ease-out) 320ms both;
	}

	@supports (animation-timeline: view()) {
		.act__numeral {
			--reveal-distance: 3rem;
			--reveal-scale: 0.9;
			animation-range: entry 0% cover 32%;
		}

		.bento__cell:nth-child(3n + 2),
		.strip__card:nth-child(3n + 2),
		.states__state:nth-child(3n + 2) {
			animation-range: entry 5% cover 27%;
		}

		.bento__cell:nth-child(3n + 3),
		.strip__card:nth-child(3n + 3),
		.states__state:nth-child(3n + 3) {
			animation-range: entry 10% cover 32%;
		}

		.states__state:nth-child(4),
		.states__state:nth-child(5) {
			animation-range: entry 14% cover 36%;
		}

		.lifecycle__act:nth-child(2) {
			animation-range: entry 6% cover 28%;
		}

		.lifecycle__act:nth-child(3) {
			animation-range: entry 12% cover 34%;
		}
	}
}

@media (prefers-reduced-motion: no-preference) {
	.hero::before {
		animation: clk-aurora-drift 26s var(--ease-in-out) infinite;
		will-change: transform;
	}

	.hero__mark::before {
		animation: clk-pulse 3.2s var(--ease-out) 1.2s infinite;
	}

	.hero__glyph {
		animation:
			clk-glyph-in var(--duration-1000) var(--ease-out) 320ms both,
			clk-breathe 4s var(--ease-in-out) 1.4s infinite;
	}
}

.visuals {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.visuals__notes {
	position: absolute;
	inset: 0;
	z-index: -4;
}

.visuals__note {
	position: absolute;
	bottom: -6%;
	color: color-mix(in srgb, var(--p-amber-500) 70%, transparent);
	font-family:
		'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols', sans-serif;
	user-select: none;
	opacity: 0;
	will-change: transform, opacity;
}

.visuals__note--1 {
	left: 12%;
	font-size: 28px;
}

.visuals__note--2 {
	left: 38%;
	font-size: 22px;
}

.visuals__note--3 {
	left: 58%;
	font-size: 32px;
}

.visuals__note--4 {
	left: 78%;
	font-size: 20px;
}

.visuals__note--5 {
	left: 25%;
	font-size: 26px;
}

.visuals__equalizer {
	position: absolute;
	inset: auto 0 0;
	z-index: -1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
	height: 96px;
	padding-inline: var(--space-8);
	opacity: 0.5;
	mask-image: linear-gradient(to top, black 0%, black 40%, transparent 100%);
	-webkit-mask-image: linear-gradient(
		to top,
		black 0%,
		black 40%,
		transparent 100%
	);
}

.visuals__bar {
	flex: 1;
	min-width: 3px;
	max-width: 8px;
	border-radius: 4px 4px 0 0;
	background: linear-gradient(to top, var(--p-primary-500), var(--p-pink-500));
	transform: scaleY(0.35);
	transform-origin: bottom;
}

.visuals__bar:nth-child(n + 25) {
	display: none;
}

@keyframes clk-note-rise {
	0% {
		transform: translateY(0) rotate(-6deg);
		opacity: 0;
	}
	10% {
		opacity: 0.55;
	}
	50% {
		transform: translateY(-50vh) translateX(20px) rotate(8deg);
		opacity: 0.45;
	}
	90% {
		opacity: 0.2;
	}
	100% {
		transform: translateY(-110vh) translateX(-15px) rotate(-4deg);
		opacity: 0;
	}
}

@keyframes clk-eq-bounce {
	0%,
	100% {
		transform: scaleY(0.35);
	}
	50% {
		transform: scaleY(1);
	}
}

@media (min-width: 640px) {
	.visuals__bar:nth-child(n + 25) {
		display: revert;
	}

	.visuals__bar:nth-child(n + 41) {
		display: none;
	}
}

@media (min-width: 1024px) {
	.visuals__bar:nth-child(n + 41) {
		display: revert;
	}

	.visuals__bar:nth-child(n + 65) {
		display: none;
	}
}

@media (min-width: 1280px) {
	.visuals__bar:nth-child(n + 65) {
		display: revert;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.visuals__note {
		animation: clk-note-rise linear infinite;
	}

	.visuals__note--1 {
		animation-duration: 14s;
	}

	.visuals__note--2 {
		animation-duration: 18s;
		animation-delay: 2.5s;
	}

	.visuals__note--3 {
		animation-duration: 16s;
		animation-delay: 5s;
	}

	.visuals__note--4 {
		animation-duration: 20s;
		animation-delay: 8s;
	}

	.visuals__note--5 {
		animation-duration: 22s;
		animation-delay: 11s;
	}

	.visuals__bar {
		animation-name: clk-eq-bounce;
		animation-iteration-count: infinite;
		animation-timing-function: var(--ease-in-out);
		will-change: transform;
	}
}