@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');

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

:root {
	--background-color-light: hsla(230, 80%, 98%, 1);
	--toggle-light: hsla(230, 25%, 10%, 1);
	--line-light: hsla(230, 35%, 92.5%, 1);
	--dot-light: hsla(230, 25%, 75%, 1);
	--text-top-light: hsla(240, 25%, 10%, 1);
	--text-bottom-light: hsla(240, 25%, 25%, 1);
	--text-circle-light: hsla(240, 25%, 25%, 1);
	--hover-light: #0d6efd;

	--background-color-dark: hsla(230, 55%, 4%, 1);
	--toggle-dark: hsla(230, 25%, 75%, 1);
	--line-dark: hsla(230, 25%, 15%, .75);
	--dot-dark: hsla(230, 25%, 90%, 1);
	--text-top-dark: hsla(240, 60%, 90%, 1);
	--text-bottom-dark: hsla(240, 60%, 95%, 1);
	--text-circle-dark: hsla(240, 60%, 95%, .15);
	--hover-dark: var(--text-circle-dark);

	color-scheme: light;

	--x: 50%;
	--y: 50%;
}

html {
	--background-color: var(--background-color-light);
	--toggle-color: var(--toggle-light);
	--line-color: var(--line-light);
	--dot-color: var(--dot-light);
	--text-color-top: var(--text-top-light);
	--text-color-bottom: var(--text-bottom-light);
	--text-color-circle: var(--text-circle-light);
	--hover-color: var(--hover-light);
}

.arrow {
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 0.875rem;
	position: fixed;
	left: 50%;
	top: 50%;
	opacity: 0.7;
	rotate: 10deg;
	transition: opacity 0.26s ease-out;
	pointer-events: none;
	line-height: 1.5;
	translate: 150% 120px;
	z-index: 10;
}

.arrow span {
	white-space: nowrap;
}

.arrow svg {
	top: calc(100% + 10px);
	position: absolute;
	translate: -50% 0;
	left: 0;
	width: 40px;
	height: 40px;
}

.arrow.hidden {
	opacity: 0;
}

html.dark {
	color-scheme: dark;

	--background-color: var(--background-color-dark);
	--toggle-color: var(--toggle-dark);
	--line-color: var(--line-dark);
	--dot-color: var(--dot-dark);
	--text-color-top: var(--text-top-dark);
	--text-color-bottom: var(--text-bottom-dark);
	--text-color-circle: var(--text-circle-dark);
	--hover-color: var(--hover-dark);
}

body {
	min-height: 100dvh;
	font-family: "Instrument Sans", sans-serif;
	transition: background-color 0.3s ease, color 0.3s ease;
	background-color: var(--background-color);
}

.flower {
	width: 100%;
	height: 300vh;
	position: relative;
}

.image-sequence-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	z-index: 0;
}

.hero-content {
	position: sticky;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	text-align: left;
	padding: 0 4rem;
	max-width: 1200px;
	margin: 0 auto;
}

h1 {
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	font-variation-settings: "wdth" 95;
	font-size: clamp(32px, 6vw, 68px);
	line-height: 1.05;
	margin: 0;
	text-align: left;
}

h1 span {
	background-image: linear-gradient(180deg, var(--text-color-top) 0%, var(--text-color-bottom) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

h1 strong {
	display: inline-block;
	color: transparent;
	background-image: url('https://assets.codepen.io/165585/circle-bg_1.svg');
	background-color: var(--text-color-circle);
	background-size: 400px;
	background-position: 50% 80%;
	background-blend-mode: overlay;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: 0.015em;
}

@keyframes reveal-in {
	from {
		clip-path: circle(0% at var(--x) var(--y));
	}
	to {
		clip-path: circle(150% at var(--x) var(--y));
	}
}

@keyframes reveal-out {
	from {
		clip-path: circle(150% at var(--x) var(--y));
	}
	to {
		clip-path: circle(0% at var(--x) var(--y));
	}
}

::view-transition-new(root) {
	animation: reveal-in 0.5s ease-in-out forwards;
	z-index: 1;
	mix-blend-mode: normal;
}

::view-transition-old(root) {
	animation: reveal-out 0.5s ease-in-out forwards;
	animation-delay: .5s;
	z-index: 0;
	mix-blend-mode: normal;
}

::view-transition-image-pair(root) {
	isolation: isolate;
}

.team-name {
	position: fixed;
	top: 1.5rem;
	left: 2rem;
	z-index: 10;
}

.team-name h2 {
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	font-variation-settings: "wdth" 95;
	font-size: 24px;
	line-height: 1.05;
	margin: 0;
}

.team-name h2 span {
	background-image: linear-gradient(180deg, var(--text-color-top) 0%, var(--text-color-bottom) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.team-name h2 strong {
	display: inline-block;
	color: transparent;
	background-image: url('https://assets.codepen.io/165585/circle-bg_1.svg');
	background-color: var(--text-color-circle);
	background-size: 200px;
	background-position: 50% 80%;
	background-blend-mode: overlay;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: 0.015em;
}

.top-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	padding: 1rem 2rem;
	z-index: 10;
}

.nav-left,
.nav-right {
	display: flex;
	gap: 1rem;
}

.top-nav a,
.nav-btn {
	--w: 3px;
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
	text-decoration: none;
	color: var(--text-color-top);
	will-change: transform;
	transform: translateZ(0);
}

.top-nav a:before,
.nav-btn:before {
	content: "";
	display: block;
	position: absolute;
	inset: 0 -50%;
	background: var(--hover-color);
	pointer-events: none;
	opacity: 0;
	will-change: clip-path, opacity, filter;
	transform: translateZ(0);
}

.top-nav a span,
.nav-btn span {
	grid-row: 1;
}

.top-nav a span.l,
.nav-btn span.l {
	grid-column: 1 / 1;
	z-index: 1;
}

.top-nav a span.r,
.nav-btn span.r {
	grid-column: 2 / 2;
	z-index: 1;
}

.top-nav a span:where(.l, .r):hover,
.nav-btn span:where(.l, .r):hover {
	grid-column: -1 / 1;
	z-index: 2;
}

.top-nav a span.content,
.nav-btn span.content {
	display: block;
	padding: 0.5em 1em;
	grid-column: -1 / 1;
	z-index: 1;
	font-size: 14px;
}

.top-nav a:after,
.nav-btn:after {
	content: "";
	display: block;
	grid-column: -1 / 1;
	grid-row: 1;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
			var(--text-color-top) var(--w),
			transparent var(--w),
			transparent calc(100% - var(--w)),
			var(--text-color-top) calc(100% - var(--w))
		)
		calc(var(--w) * -1) 0 / calc(var(--w) * 2.5) no-repeat,
	linear-gradient(
			var(--text-color-top) var(--w),
			transparent var(--w),
			transparent calc(100% - var(--w)),
			var(--text-color-top) calc(100% - var(--w))
		)
		calc(var(--w) + 100%) 0 / calc(var(--w) * 2.5) no-repeat;
}

.top-nav a:has(span.l:hover):before,
.nav-btn:has(span.l:hover):before {
	animation: enter-hover-left 100ms ease-out forwards,
		blink 800ms ease-in-out 80ms infinite;
}

.top-nav a:has(span.r:hover):before,
.nav-btn:has(span.r:hover):before {
	animation: enter-hover-right 100ms ease-out forwards,
		blink 800ms ease-in-out 80ms infinite;
}

@keyframes enter-hover-left {
	from {
		opacity: 0.5;
		clip-path: polygon(0 0, 25% 0, 25% 100%, 0 100%);
	}

	25% {
		clip-path: polygon(0 0, 75% 0, 25% 100%, 0 100%);
	}

	50% {
		clip-path: polygon(0 0, 75% 0, 75% 100%, 0 100%);
	}

	75% {
		clip-path: polygon(0 0, 75% 0, 75% 100%, 25% 100%);
	}

	to {
		opacity: 1;
		clip-path: polygon(25% 0, 75% 0, 75% 100%, 25% 100%);
	}
}

@keyframes enter-hover-right {
	from {
		opacity: 0.5;
		clip-path: polygon(75% 0, 100% 0, 100% 100%, 75% 100%);
	}

	25% {
		clip-path: polygon(25% 0, 100% 0, 100% 100%, 75% 100%);
	}

	50% {
		clip-path: polygon(25% 0, 75% 0, 100% 100%, 75% 100%);
	}

	75% {
		clip-path: polygon(25% 0, 75% 0, 75% 100%, 75% 100%);
	}

	to {
		opacity: 1;
		clip-path: polygon(25% 0, 75% 0, 75% 100%, 25% 100%);
	}
}

@keyframes blink {
	from {
		filter: brightness(1.5);
	}

	80%,
	to {
		filter: brightness(1);
	}
}

.toggle {
	cursor: pointer;
	transform: scale(.5);
}

.toggle input {
	display: none;
}

.toggle input + div {
	border-radius: 50%;
	width: 36px;
	height: 36px;
	position: relative;
	box-shadow: inset 16px -16px 0 0 var(--toggle-color);
	transform: scale(1) rotate(-2deg);
	transition: box-shadow .5s ease 0s, transform .4s ease .1s;
}

.toggle input + div:before {
	content: '';
	width: inherit;
	height: inherit;
	border-radius: inherit;
	position: absolute;
	left: 0;
	top: 0;
	background: light-dark(transparent, var(--toggle-color));
	transition: background .3s ease;
}

.toggle input + div:after {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin: -4px 0 0 -4px;
	position: absolute;
	top: 50%;
	left: 50%;
	box-shadow: 0 -23px 0 var(--toggle-color),
		0 23px 0 var(--toggle-color),
		23px 0 0 var(--toggle-color),
		-23px 0 0 var(--toggle-color),
		15px 15px 0 var(--toggle-color),
		-15px 15px 0 var(--toggle-color),
		15px -15px 0 var(--toggle-color),
		-15px -15px 0 var(--toggle-color);
	transform: scale(0);
	transition: all .3s ease;
}

.toggle input:checked + div {
	box-shadow: inset 32px -32px 0 0 var(--background-color);
	transform: scale(.5) rotate(0deg);
	transition: transform .3s ease .1s, box-shadow .2s ease 0s;
}

.toggle input:checked + div:before {
	background: var(--toggle-color);
	transition: background .3s ease .1s;
}

.toggle input:checked + div:after {
	transform: scale(1.5);
	transition: transform .5s ease .15s;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,500&display=swap");

@property --gradient-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@property --gradient-angle-offset {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@property --gradient-percent {
	syntax: "<percentage>";
	initial-value: 5%;
	inherits: false;
}

@property --gradient-shine {
	syntax: "<color>";
	initial-value: white;
	inherits: false;
}

.shiny-cta {
	--shiny-cta-bg: #000000;
	--shiny-cta-bg-subtle: #1a1818;
	--shiny-cta-fg: #ffffff;
	--shiny-cta-highlight: blue;
	--shiny-cta-highlight-subtle: #8484ff;
	--animation: gradient-angle linear infinite;
	--duration: 3s;
	--shadow-size: 2px;
	isolation: isolate;
	position: fixed;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
	cursor: pointer;
	outline-offset: 4px;
	padding: 1.25rem 2.5rem;
	font-family: "Inter", sans-serif;
	font-size: 1.125rem;
	line-height: 1.2;
	border: 1px solid transparent;
	border-radius: 360px;
	color: var(--shiny-cta-fg);
	text-decoration: none;
	display: block;
	background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
		conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent, var(--shiny-cta-highlight) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2), var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4)) border-box;
	box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

.shiny-cta.visible {
	opacity: 1;
	pointer-events: auto;
}

.shiny-cta::before,
.shiny-cta::after,
.shiny-cta span::before {
	content: "";
	pointer-events: none;
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	translate: -50% -50%;
	z-index: -1;
}

.shiny-cta:active {
	translate: 0 1px;
}

.shiny-cta::before {
	--size: calc(100% - var(--shadow-size) * 3);
	--position: 2px;
	--space: calc(var(--position) * 2);
	width: var(--size);
	height: var(--size);
	background: radial-gradient(circle at var(--position) var(--position), white calc(var(--position) / 4), transparent 0) padding-box;
	background-size: var(--space) var(--space);
	background-repeat: space;
	mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
	border-radius: inherit;
	opacity: 0.4;
	z-index: -1;
}

.shiny-cta::after {
	--animation: shimmer linear infinite;
	width: 100%;
	aspect-ratio: 1;
	background: linear-gradient(-50deg, transparent, var(--shiny-cta-highlight), transparent);
	mask-image: radial-gradient(circle at bottom, transparent 40%, black);
	opacity: 0.6;
}

.shiny-cta span {
	z-index: 1;
}

.shiny-cta span::before {
	--size: calc(100% + 1rem);
	width: var(--size);
	height: var(--size);
	box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
	opacity: 0;
}

.shiny-cta {
	--transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
	transition: var(--transition);
	transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine, opacity;
}

.shiny-cta,
.shiny-cta::before,
.shiny-cta::after {
	animation: var(--animation) var(--duration), var(--animation) calc(var(--duration) / 0.4) reverse paused;
	animation-composition: add;
}

.shiny-cta span::before {
	transition: opacity var(--transition);
	animation: calc(var(--duration) * 1.5) breathe linear infinite;
}

.shiny-cta:is(:hover, :focus-visible) {
	--gradient-percent: 20%;
	--gradient-angle-offset: 95deg;
	--gradient-shine: var(--shiny-cta-highlight-subtle);
}

.shiny-cta:is(:hover, :focus-visible),
.shiny-cta:is(:hover, :focus-visible)::before,
.shiny-cta:is(:hover, :focus-visible)::after {
	animation-play-state: running;
}

.shiny-cta:is(:hover, :focus-visible) span::before {
	opacity: 1;
}

@keyframes gradient-angle {
	to {
		--gradient-angle: 360deg;
	}
}

@keyframes shimmer {
	to {
		rotate: 360deg;
	}
}

@keyframes breathe {
	from, to {
		scale: 1;
	}
	50% {
		scale: 1.2;
	}
}

/* Content Panels Animation */
.nav-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.content-panels {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1000;
}

.panel-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 1001;
}

.panel-overlay.active {
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	opacity: 1;
	pointer-events: all;
}

.panel-content {
	background: var(--background-color);
	color: var(--text-color-top);
	padding: 3rem;
	border-radius: 1.5rem;
	max-width: 600px;
	max-height: 80vh;
	overflow-y: auto;
	position: relative;
	transform: scale(0.8) translateY(30px);
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	border: 1px solid var(--line-color);
}

.panel-overlay.active .panel-content {
	transform: scale(1) translateY(0);
}

.panel-content h2 {
	font-size: 2rem;
	margin-bottom: 0.5rem;
	font-weight: 700;
	background: linear-gradient(135deg, var(--text-color-top), var(--text-color-bottom));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.panel-content .tagline {
	font-size: 1rem;
	font-style: italic;
	opacity: 0.8;
	margin-bottom: 1.5rem;
	color: var(--text-color-bottom);
}

.panel-content p {
	line-height: 1.6;
	margin-bottom: 1.5rem;
	color: var(--text-color-bottom);
}

.panel-content h3 {
	font-size: 1.2rem;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	font-weight: 600;
	color: var(--text-color-top);
}

.panel-content ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.panel-content li {
	margin-bottom: 1rem;
	padding-left: 1.5rem;
	position: relative;
	line-height: 1.6;
	color: var(--text-color-bottom);
}

.panel-content li:before {
	content: "▸";
	position: absolute;
	left: 0;
	color: var(--hover-color);
}

.panel-content a {
	color: var(--hover-color);
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.panel-content a:hover {
	opacity: 0.8;
	text-decoration: underline;
}

.close-btn {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	background: none;
	border: none;
	font-size: 2rem;
	cursor: pointer;
	color: var(--text-color-top);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	border-radius: 50%;
	opacity: 0.7;
}

.close-btn:hover {
	opacity: 1;
	background: var(--line-color);
	transform: rotate(90deg);
}

@media (max-width: 768px) {
	.panel-content {
		padding: 2rem;
		max-width: 90vw;
		margin: 1rem;
	}
	
	.panel-content h2 {
		font-size: 1.5rem;
	}
	
	.panel-content h3 {
		font-size: 1rem;
	}
}