@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/gabarito/v9/QGYwz_0dZAGKJJ4t3FFkc3Q8AkNP9Pj248K0Fg.ttf) format('truetype');
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/gabarito/v9/QGYwz_0dZAGKJJ4t3FFkc3Q8AkNP9Pj20cK0Fg.ttf) format('truetype');
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/gabarito/v9/QGYwz_0dZAGKJJ4t3FFkc3Q8AkNP9Pj2PcW0Fg.ttf) format('truetype');
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/gabarito/v9/QGYwz_0dZAGKJJ4t3FFkc3Q8AkNP9Pj2BMW0Fg.ttf) format('truetype');
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/gabarito/v9/QGYwz_0dZAGKJJ4t3FFkc3Q8AkNP9Pj2Y8W0Fg.ttf) format('truetype');
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/gabarito/v9/QGYwz_0dZAGKJJ4t3FFkc3Q8AkNP9Pj2SsW0Fg.ttf) format('truetype');
}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-autoToggle{transition-behavior:allow-discrete;transition-duration:1ms;transition-property:overflow}
:root {
	--color-blue: #3eabde;
	--color-yellow: #ffd724;
	--color-light-yellow: #fff1b0;
	--color-white: #ffffff;
	--color-light-purple: #ae73b1;
	--color-purple: #38023b;
	--color-green: #237f60;
}
.Gallery {
	padding: 6.25rem 0;
	display: flex;
	flex-direction: column;
	gap: 6.25rem;
}
.Gallery h2 {
	text-align: center;
}
.Gallery ul {
	padding: 0 6.25rem;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 12.5rem;
	gap: 3.125rem;
}
.Gallery li {
	font-size: 0;
	line-height: 0;
}
.Gallery li[data-orientation="portrait"] {
	grid-column: span 2;
	grid-row: span 3;
}
.Gallery li[data-orientation="landscape"] {
	grid-column: span 3;
	grid-row: span 2;
}
.Gallery img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: scale(calc(var(--progress)*0.5 + 1));
}
.GalleryItemImage {
	contain: paint;
	border-radius: 10px;
}
@media (max-width: 1024px) {
	.Gallery {
		padding: 3.125rem 0;
		gap: 3.125rem;
	}

	.Gallery ul {
		padding: 0 3.125rem;
		grid-template-columns: auto;
		grid-auto-rows: auto;
		gap: 1.5625rem;
	}

	.Gallery li:not(:has(img)) {
		display: none;
	}

	.Gallery li[data-orientation="portrait"] {
		grid-column: span 1;
		grid-row: span 1;
	}

	.Gallery li[data-orientation="landscape"] {
		grid-column: span 1;
		grid-row: span 1;
	}

	.Gallery img {
		transform: scale(calc(var(--progress)*0.25 + 1));
	}
}
.List {
	--delay: 0.25s;
	--height: 11.25rem;
	padding: 6.25rem 0;
	display: flex;
	flex-direction: column;
	gap: 6.25rem;
}
.List h2 {
	text-align: center;
}
.List ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 1;
}
.List li {
	box-sizing: border-box;
	width: 100%;
	font-size: 9.375rem;
	font-weight: bold;
	text-align: center;
	cursor: default;
	position: relative;
	opacity: 1;
	transition:
		z-index 0s 0.5s,
		opacity 0.25s;
}
.ListContent {
	position: relative;
}
ul.ListContentMedia {
	position: absolute;
	inset: 0;
	pointer-events: none;

	.ListItemContent {
		visibility: hidden;
	}
}
.ListMedia {
	position: absolute;
	inset: 0;
	margin: auto;
	opacity: 0;
	transform: scale(0.9);
	transition: all 0.25s;
	pointer-events: none;

	.Media {
		max-width: 23.4375rem;
		height: 75vh;
		position: absolute;
		inset: 0;
		margin: auto;
	}

	img,
	video {
		object-fit: contain;
		border-radius: 10px;
	}
}
.ListItemContent {
	width: 100%;
	height: var(--height);
	display: flex;
	place-items: center;
	position: relative;
	transform-style: preserve-3d;
	transition: all 0.5s;
}
.ListItemText {
	display: block;
	width: 100%;
	padding: 0 6.25rem;
	pointer-events: none;
	white-space: nowrap;
}
span.ListItemTextLoop {
	display: flex;
	width: 200vw;
	animation: list-item-text-loop infinite 10s linear;
}
.ListItemContent > span:nth-child(1) {
	transform: translateZ(calc(var(--height)*0.5));
	transition: opacity 0.25s;
}
.ListItemContent > span:nth-child(2) {
	background-color: var(--highlight-color);
	position: absolute;
	inset: 0;
	transform: rotateX(90deg) translateZ(calc(var(--height)*0.5));
	overflow: hidden;
	padding: 0;
}
:not(.lenis-scrolling) .List .ListItemVisible {
	z-index: 1;
	transition: z-index 0s 0s;

	.ListItemContent {
		transform: rotateX(-90deg);
		transition: all 0.5s var(--delay);
	}

	.ListMedia {
		opacity: 1;
		transform: scale(1);
		transition: all 0.25s calc(var(--delay)*2);
	}
}
.List:has(.ListItemVisible) {
	.ListItemContent > span:nth-child(1) {
		opacity: 0.25;
	}
}
.ListItemVisible .ListItemTextLoop {
	display: flex;
	width: 200vw;
	animation: list-item-text-loop infinite 10s linear;
}
@keyframes list-item-text-loop {
	0% {
		transform: translateX(-0vw);
	}
	100% {
		transform: translateX(-100vw);
	}
}
@media (max-width: 1024px) {
	.List {
		--height: 7.5rem;
		padding: 3.125rem 0;
		gap: 3.125rem;
	}

	.List ul {
		width: 100vw;
		gap: 3.125rem;
		flex-direction: row;
	}

	.ListContent {
		display: flex;
		flex-direction: column-reverse;
		gap: 3.125rem;
	}

	ul.ListContentMedia {
		position: static;
		pointer-events: unset;
		padding: 0 50vw;
		gap: 5vw;
		overflow: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: auto;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		.ListItemContent {
			display: none;
		}

		li {
			width: auto;
			flex: 0 0 auto;
			scroll-snap-align: center;
		}
	}

	ul.ListContentText {
		overflow: hidden;
		gap: 0;

		li {
			font-size: 6.25rem;
			flex: 0 0 100vw;
		}
	}

	.ListMedia {
		opacity: 1;
		position: static;
		transform: unset;
		pointer-events: unset;

		.Media {
			max-width: unset;
			max-height: unset;
			width: 70vw;
			height: auto;
			max-height: 65vh;
			position: static;
			transform: unset;
			display: flex;
			justify-content: center;
			border-radius: 10px;
			overflow: hidden;
		}
	}

	.List .ListItemVisible .ListItemContent {
		z-index: 1;
	}

	.List:has(.ListItemVisible) {
		.ListOverlay {
			opacity: 0.5;
		}

		.ListItemContent > span:nth-child(1) {
			opacity: 1;
		}
	}
}
.Text {
	padding: 6.25rem;
	font-size: 3.75rem;
	font-weight: bold;
	display: flex;
	flex-direction: column;
	gap: 6.25rem;
}
.Text .highlight {
	color: var(--title-color);
}
.TextTitle {
	text-align: center;
}
.Separator + .Text {
	padding-top: 0;
}
.Text:has(+ .Separator) {
	padding-bottom: 0;
}
@media (max-width: 1024px) {
	.Text {
		padding: 3.125rem;
		gap: 3.125rem;
		font-size: 5rem;
	}
}
.Blank {
	height: 15.625rem;
}
.Link {
	background-color: var(--color-green);
	border-radius: 1.5rem;
	font-weight: bold;
	font-size: 1.5rem;
	padding: 0.625rem 1.25rem;
	color: var(--color-white);
	text-decoration: none;
	position: fixed;
	bottom: 2.5rem;
	right: 2.5rem;
	z-index: 10;
}
@media (max-width: 1024px) {
	.Link {
		bottom: 0;
		right: 0;
		left: 0;
		border-radius: 0;
		font-size: 5rem;
		padding: 2.5rem 2.5rem;
		text-align: center;
	}
}
.Media {
	display: flex;
	place-items: center;
}
.Media :is(img, video) {
	max-width: 100%;
	max-height: 100%;
}
.Pointer {
	position: fixed;
}
.Hero {
	padding: 0 6.25rem;
	font-size: 3.75rem;
	font-weight: bold;
	display: flex;
	gap: 6.25rem;
	min-height: 75vh;
	flex-direction: column-reverse;

	h2 {
		text-transform: uppercase;
		line-height: 90%;
	}

	h3 {
		font-size: 3.75rem;
	}

	h4 {
		font-size: 1.875rem;
		color: var(--subtitle-color);
	}

	.Sun {
		width: 100%;
		display: flex;
		justify-content: end;
	}
}
@media (max-width: 1024px) {
	.Hero {
		min-height: 65vh;
		padding: 0 3.125rem;
		gap: 3.125rem;

		h3 {
			font-size: 5rem;
		}

		h2 {
			font-size: 10rem;
		}

		h4 {
			font-size: 3.75rem;
			color: var(--subtitle-color);
		}
	}
}
.Separator {
	--height: 300px;
	width: 100%;
	height: calc(var(--height) - 1px);
	overflow: hidden;
	font-size: 0;
	line-height: 0;

	canvas {
		display: block;
	}
}
@media (max-width: 1024px) {
	.Separator {
		--height: 150px;
	}
}
* {
	box-sizing: border-box;
}
html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}
html,
body {
	margin: 0;
	padding: 0;
	scroll-padding-top: 120px;
	scroll-behavior: smooth;
	text-rendering: auto;
	overflow-wrap: break-word;
	font-family: "Gabarito", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 1.11111vw;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
h2 {
	font-size: 10.625rem;
	color: var(--title-color);
}
section {
	color: var(--fg-color);
	background-color: var(--bg-color);
}
section[data-theme="blue"] {
	--fg-color: var(--color-white);
	--bg-color: var(--color-blue);
	--title-color: var(--color-yellow);
	--subtitle-color: var(--color-purple);
	--highlight-color: var(--color-purple);
}
section[data-theme="yellow"] {
	--fg-color: var(--color-purple);
	--bg-color: var(--color-yellow);
	--title-color: var(--color-light-yellow);
	--subtitle-color: var(--color-purple);
	--highlight-color: var(--color-white);
}
section[data-theme="purple"] {
	--fg-color: var(--color-yellow);
	--bg-color: var(--color-purple);
	--title-color: var(--color-light-purple);
	--subtitle-color: var(--color-blue);
	--highlight-color: var(--color-blue);
}
@media (max-width: 1024px) {
	html,
	body {
		font-size: 1.5625vw;
	}
}