@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;600&display=swap");

@font-face {
	font-family: "Editorial";
	font-weight: 400;
	font-style: normal;
	src: url("https://solitario.studio/fonts/PPEditorialNew-Regular.eot");
	src:
		url("https://solitario.studio/fonts/PPEditorialNew-Regular.eot?#iefix") format("embedded-opentype"),
		url("https://solitario.studio/fonts/PPEditorialNew-Regular.woff2") format("woff2"),
		url("https://solitario.studio/fonts/PPEditorialNew-Regular.woff") format("woff"),
		url("https://solitario.studio/fonts/PPEditorialNew-Regular.otf") format("opentype"),
		url("https://solitario.studio/fonts/PPEditorialNew-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Mori";
	font-weight: 400;
	font-style: normal;
	src: url("https://solitario.studio/fonts/PPMori-Regular.eot");
	src:
		url("https://solitario.studio/fonts/PPMori-Regular.eot?#iefix") format("embedded-opentype"),
		url("https://solitario.studio/fonts/PPMori-Regular.woff2") format("woff2"),
		url("https://solitario.studio/fonts/PPMori-Regular.woff") format("woff"),
		url("https://solitario.studio/fonts/PPMori-Regular.otf") format("opentype"),
		url("https://solitario.studio/fonts/PPMori-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Mori";
	font-weight: 600;
	font-style: normal;
	src: url("https://solitario.studio/fonts/PPMori-SemiBold.eot");
	src:
		url("https://solitario.studio/fonts/PPMori-SemiBold.eot?#iefix") format("embedded-opentype"),
		url("https://solitario.studio/fonts/PPMori-SemiBold.woff2") format("woff2"),
		url("https://solitario.studio/fonts/PPMori-SemiBold.woff") format("woff"),
		url("https://solitario.studio/fonts/PPMori-SemiBold.otf") format("opentype"),
		url("https://solitario.studio/fonts/PPMori-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "Mori";
	font-weight: 800;
	font-style: normal;
	src: url("https://solitario.studio/fonts/PPMori-ExtraBold.eot");
	src:
		url("https://solitario.studio/fonts/PPMori-ExtraBold.eot?#iefix") format("embedded-opentype"),
		url("https://solitario.studio/fonts/PPMori-ExtraBold.woff2") format("woff2"),
		url("https://solitario.studio/fonts/PPMori-ExtraBold.woff") format("woff"),
		url("https://solitario.studio/fonts/PPMori-ExtraBold.otf") format("opentype"),
		url("https://solitario.studio/fonts/PPMori-ExtraBold.ttf") format("truetype");
}

@font-face {
	font-family: "Mori";
	font-weight: 400;
	font-style: italic;
	src: url("https://solitario.studio/fonts/PPMori-RegularItalic.eot");
	src:
		url("https://solitario.studio/fonts/PPMori-RegularItalic.eot?#iefix") format("embedded-opentype"),
		url("https://solitario.studio/fonts/PPMori-RegularItalic.woff2") format("woff2"),
		url("https://solitario.studio/fonts/PPMori-RegularItalic.woff") format("woff"),
		url("https://solitario.studio/fonts/PPMori-RegularItalic.otf") format("opentype"),
		url("https://solitario.studio/fonts/PPMori-RegularItalic.ttf") format("truetype");
}

@font-face {
	font-family: "Mori";
	font-weight: 600;
	font-style: italic;
	src: url("https://solitario.studio/fonts/PPMori-SemiBoldItalic.eot");
	src:
		url("https://solitario.studio/fonts/PPMori-SemiBoldItalic.eot?#iefix") format("embedded-opentype"),
		url("https://solitario.studio/fonts/PPMori-SemiBoldItalic.woff2") format("woff2"),
		url("https://solitario.studio/fonts/PPMori-SemiBoldItalic.woff") format("woff"),
		url("https://solitario.studio/fonts/PPMori-SemiBoldItalic.otf") format("opentype"),
		url("https://solitario.studio/fonts/PPMori-SemiBoldItalic.ttf") format("truetype");
}

@font-face {
	font-family: "Mori";
	font-weight: 800;
	font-style: italic;
	src: url("https://solitario.studio/fonts/PPMori-ExtraBoldItalic.eot");
	src:
		url("https://solitario.studio/fonts/PPMori-ExtraBoldItalic.eot?#iefix") format("embedded-opentype"),
		url("https://solitario.studio/fonts/PPMori-ExtraBoldItalic.woff2") format("woff2"),
		url("https://solitario.studio/fonts/PPMori-ExtraBoldItalic.woff") format("woff"),
		url("https://solitario.studio/fonts/PPMori-ExtraBoldItalic.otf") format("opentype"),
		url("https://solitario.studio/fonts/PPMori-ExtraBoldItalic.ttf") format("truetype");
}
:root {
	--color1: oklch(0.13 0.03 202.43);
	--color2: 38, 60, 79;
	--color3: #fff;
	--color4: #263c4f;
	--color5: #263c4f;
	--color6: #fff;
	--color7: #e57a7a;
	--color8: #263c4f;
	--color9: #263c4f;
	--color11: radial-gradient(50% 50% at 50% 50%, #484848 0%, #000 100%);

	--linewidth: 2px;
	--card-height: 48vh;
	--card-height: 48svh;
	--card-radius: 0.1;
	--duration: 0.15s;
}

::-webkit-scrollbar {
	width: 0.2rem;
	background: transparent;
}

::-webkit-scrollbar-track {
	background: #000;
}

::-webkit-scrollbar-thumb {
	background: var(--color3);
	border-radius: 10rem;
}

/* @media (prefers-color-scheme: dark) {
	:root {
		--color1: #263c4f;
		--color2: 255, 240, 219;
	}
	body::before {
		content: "";
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}
} */

.fill-color1 {
	fill: var(--color1);
}

.fill-color2 {
	fill: rgb(var(--color2));
}

.fill-color3 {
	fill: var(--color3);
}

.fill-color4 {
	fill: var(--color4);
}

.fill-color5 {
	fill: var(--color5);
}

.fill-color6 {
	fill: var(--color6);
}

.fill-color7 {
	fill: var(--color7);
}

.fill-color8 {
	fill: var(--color8);
}

.stroke-color1 {
	stroke: var(--color1);
}

.stroke-color2 {
	stroke: rgb(var(--color2));
}

.stroke-color3 {
	stroke: var(--color3);
}

.stroke-color4 {
	stroke: var(--color4);
}

.stroke-color5 {
	stroke: var(--color5);
}

.stroke-color6 {
	stroke: var(--color6);
}

.stroke-color7 {
	stroke: var(--color7);
}

.stroke-color8 {
	stroke: var(--color8);
}

* {
	box-sizing: border-box;
}

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

html {
	font-size: 62.5%;
}

html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
}

body {
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: var(--color1);
	color: rgb(var(--color2));
	font-family:
		"Mori",
		"Instrument Sans",
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		"Open Sans",
		"Helvetica Neue",
		sans-serif;
	font-size: clamp(1.4rem, 2vw, 1.8rem);
	line-height: 1.75;
	font-weight: 400;
	transition: calc(var(--duration) * 2) ease-out;
	transition-property: background-color, color;
	/* will-change: background-color, color; */
}

::selection {
	background-color: rgba(var(--color2), 0.99);
	color: var(--color1);
	text-shadow: none !important;
}

body:not(.state-open) {
	overflow: hidden;
}

button {
	appearance: none;
	font-size: inherit;
	font-weight: inherit;
	cursor: pointer;
	border: none;
	background-color: inherit;
	color: inherit;
	font-weight: inherit;
	font-size: inherit;
}

strong,
.fw-bold {
	font-weight: 600;
}

.text-center {
	text-align: center;
}

.text-end {
	text-align: end;
}

p {
	margin: 0;
	padding: 0;
}

p + p {
	margin-top: 1.2em;
}

.d-sheet {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.d-block {
	display: block;
}

.d-none {
	display: none !important;
}

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

a {
	color: inherit;
	text-decoration: none;
	transition:
		opacity calc(var(--duration) * 2) ease-out,
		translate calc(var(--duration) * 4) cubic-bezier(0.19, 1, 0.22, 1),
		rotate calc(var(--duration) * 4) cubic-bezier(0.19, 1, 0.22, 1),
		scale calc(var(--duration) * 4) cubic-bezier(0.19, 1, 0.22, 1);
}

:is(#main_header, #main_footer) :is(a, button) {
	transition: color var(--duration) ease-out;
}

body.state-open :is(#main_header, #main_footer) :is(a, button) {
	pointer-events: auto !important;
}

#cyber-2023,#living-memories,#elige-innovar,#freshmen-fair,#chiles-fish{
	background: radial-gradient(50% 50% at 50% 50%, #484848 0%, #000 100%) !important;
}

/* #cards_in {
			transition: calc(var(--duration) * 2) ease-out;
			transition-property: transform;
		} */

html.lenis {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-scrolling iframe {
	pointer-events: none;
}

.fonty {
	font-family: "Editorial", serif;
	font-weight: 400;
	letter-spacing: -0.07em;
	line-height: 1.5;
}

#wrapper {
	overflow: hidden;
	position: relative;
	align-items: center;
	justify-content: center;
	text-align: center;
	pointer-events: none;
}

.faux_slide {
	height: 100vh;
	height: 100lvh;
}

/* .faux_slide:nth-child(odd) {
			background-color: rgba(255, 255, 255, .1);
		} */

#cards {
	position: fixed;
	z-index: 20;
	width: 100vw;
	left: 50%;
	top: 50vh;
	top: 50lvh;
	height: var(--card-height);
	translate: -50% -50%;
	pointer-events: none;
	transition:
		top calc(var(--duration) * 2) ease-in-out,
		opacity var(--duration) ease-out,
		translate calc(var(--duration) * 6) cubic-bezier(0.19, 1, 0.22, 1);
}

#cards_in {
	width: 450vmax;
	height: 450vmax;
	position: absolute;
	left: 50%;
	top: 0;
}

.card_holder {
	height: 50%;
	position: absolute;
	left: 50%;
	top: 0;
	translate: -50% 0;
	transform-origin: 50% 100%;
}

.card_holder:first-child {
	z-index: 0 !important;
}

body.no-360:not(.state-open) .card_holder:last-child {
	opacity: 0;
}

body.state-opening .card_holder {
	transition: calc(var(--duration) * 4) cubic-bezier(0.7, 0, 0.84, 0);
}

.card_holder_in {
	height: var(--card-height);
	display: flex;
	justify-content: center;
	align-items: center;
}

body.state-open .card_holder_in {
	transition:
		opacity calc(var(--duration) * 2) ease-out,
		translate calc(var(--duration) * 6) cubic-bezier(0.19, 1, 0.22, 1),
		scale calc(var(--duration) * 6) cubic-bezier(0.19, 1, 0.22, 1);
}

.card_holder_inn {
	position: relative;
	transition: opacity calc(var(--duration) * 2) ease-out;
}

.card_holder.active .card_holder_inn {
	/* opacity: 0.65; */
	opacity: 1;
}

body.details .card_holder.active .card_holder_inn {
	/* opacity: 0.35; */
	opacity: 1;
}

.card {
	height: var(--card-height);
	position: relative;
	z-index: 2;
	aspect-ratio: 9 / 13;
}

.card_in {
	transition:
		transform calc(var(--duration) * 4) cubic-bezier(0.19, 1, 0.22, 1),
		box-shadow calc(var(--duration) * 2);
	height: var(--card-height);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	overflow: hidden !important;
	border-radius: calc(var(--card-height) * var(--card-radius));
	background-color: var(--color1);
	color: var(--color1);
	aspect-ratio: 9 / 13;
	transform: translate3d(0, 0, 0);
}

body:not(.vertical):not(.state-open) #cards .card_in {
	box-shadow: 0 2vw 6vw rgba(0, 0, 0, 0.075);
}

.card_holder:not(.active) .card_in {
	transform: none !important;
}

.card_holder.hor .card,
.card_holder.hor .card_in {
	height: calc(var(--card-height) / 13 * 9);
	aspect-ratio: 13 / 9;
}

.card + .card {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

.card_in::after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	background-color: black;
	transition: opacity calc(var(--duration) * 2) ease-out;
	z-index: 2;
	opacity: 0;
}

.card:first-child .card_in::after {
	opacity: 0.3;
}

.card:last-child .card_in::after {
	opacity: 0.45;
}

.card_holder:not(.active) .card:first-child .card_in::after {
	opacity: 0;
}

.card_holder:not(.active) .card {
	translate: none !important;
	rotate: none !important;
}

.card :is(img, video) {
	z-index: 1;
}

/* .card_holder.active .card {
			translate: -25% -10%;
			rotate: -5deg;
		}

		.card_holder.active .card+.card {
			translate: 25% 10%;
			rotate: 12deg;
		} */

#stage {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	height: 100lvh;
	z-index: 20;
}

body.state-loading #stage {
	visibility: hidden;
}

#titles {
	color: var(--color3);
	text-align: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	height: 100lvh;
	z-index: 40;
	pointer-events: none;
	/* transition: translate calc(var(--duration) * 4) cubic-bezier(0.19, 1, 0.22, 1), scale calc(var(--duration) * 4) cubic-bezier(0.19, 1, 0.22, 1); */
	transition:
		translate calc(var(--duration) * 6) cubic-bezier(0.19, 1, 0.22, 1),
		scale calc(var(--duration) * 6) cubic-bezier(0.19, 1, 0.22, 1);
}

.title {
	position: absolute;
	left: 50%;
	top: 50vh;
	top: 50lvh;
	transition: top calc(var(--duration) * 2) ease-in-out;
	translate: -50% -50%;
}

.title_in {
	flex: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: fit-content;
	font-size: 22vw;
	padding: 0 2vw;
	margin: 0 auto;
	margin-top: -0.25em;
	text-shadow: 0 0.075em 0.1em rgba(0, 0, 0, 0.35);
}

body:not(.check-ready) .title .ready {
	display: none;
}

body.check-ready .title .ready {
	background-color: green;
	font-size: 50%;
	text-shadow: none;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -70%;
	scale: 0.5;
	opacity: 0;
	line-height: 1.6em;
	text-align: center;
	text-indent: -0.07em;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50vw;
	border: var(--linewidth) solid;
	transition:
		opacity var(--duration) ease-out,
		scale var(--duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.check-ready .title.active .ready {
	opacity: 1;
	scale: 1;
	transition-delay: calc(var(--duration) * 4);
}

body.check-ready .title .ready.no {
	background-color: rgb(197, 0, 0);
}

#descriptions {
	color: var(--color4);
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	height: 100lvh; /* re-paint vh */
	z-index: 30;
	pointer-events: none;
	transition:
		translate calc(var(--duration) * 6) cubic-bezier(0.19, 1, 0.22, 1),
		scale calc(var(--duration) * 6) cubic-bezier(0.19, 1, 0.22, 1);
}

#descriptions .description {
	position: absolute;
	inset: 0;
	transition: opacity calc(var(--duration) * 2) ease-out;
	opacity: 0;
	overflow-y: scroll;
}

/* #descriptions .description,
#about .about_in {
	display: flex;
	justify-content: center;
}

#about .about_in {
	align-items: center;
} */

#descriptions .description.active {
	opacity: 1;
	pointer-events: auto;
}

#descriptions .description_in,
#about .about_inn,
#all .all_inn {
	margin-block: 2.4em 4em;
	font-size: 1.15em;
}

#descriptions .description_in,
.bi-hand-index-thumb-fill {
	color: #f7f7f7;
	transition: color calc(var(--duration) * 2) ease-out;
}

#descriptions .description.active :is(.ttl, .description_in, .meta),
#descriptions .description.active .links :is(a, button) {
	pointer-events: auto !important;
}

#descriptions .bah {
	position: relative;
	padding: 10vh max(2rem, 4vw);
	padding: 10lvh max(2rem, 4vw);
	min-height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	/* text-shadow: 0 0.075em 0.1em rgba(0, 0, 0, 0.25); */
}

#descriptions .bahh {
	position: relative;
	z-index: 20;
}

#descriptions .description .bah > i {
	display: block;
	position: absolute;
	inset: 0;
}

#descriptions .description.active .bah > i {
	pointer-events: auto !important;
}

#descriptions .credits {
	margin-top: 2em;
	padding-top: calc(1em + var(--linewidth));
	display: grid;
	align-items: baseline;
	column-gap: 1.5em;
	row-gap: 0.75em;
	grid-template-columns: repeat(2, 1fr);
	position: relative;
	align-items: start;
}

#descriptions .credits::after {
	content: "";
	display: block;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	height: var(--linewidth);
	background-color: currentColor;
	transform-origin: 0 50%;
	transition: transform calc(var(--duration) * 4) calc(var(--duration) * 2) cubic-bezier(0.87, 0, 0.13, 1);
}

#descriptions .description:not(.active) .credits::after {
	transform: scaleX(0);
}

#descriptions .credits::before {
	content: attr(data-title);
	grid-column: 1 / -1;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.9em;
	transition: opacity var(--duration) calc(var(--duration) * 2) ease-out;
}

#descriptions .description:not(.active) .credits::before {
	opacity: 0;
}

#descriptions .credits li {
	display: inline-block;
	vertical-align: baseline;
	font-size: 0.9em;
}

#descriptions .credits .word {
	margin-top: 0;
	display: block;
}

#about .words a,
#descriptions .words a {
	text-decoration: underline;
	/* text-decoration-style: wavy; */
	text-underline-offset: 0.15em;
	/* text-decoration-thickness: var(--linewidth); */
	text-decoration-thickness: 1px;
}

#about,
#all {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh; /* re-paint vh */
	z-index: 500;
	pointer-events: none;
	transition:
		translate calc(var(--duration) * 6) cubic-bezier(0.19, 1, 0.22, 1),
		scale calc(var(--duration) * 6) cubic-bezier(0.19, 1, 0.22, 1);
}

:is(#about, #all) hr {
	border: none;
	display: block;
	margin: 0 auto;
	margin-bottom: 6rem;
	max-width: 40ch;
	height: 1px;
	background-color: currentColor;
	opacity: 0.5;
	transition: transform calc(var(--duration) * 8) cubic-bezier(0.87, 0, 0.13, 1);
}

:is(#about, #all):not(.active) hr {
	transition:
		transform calc(var(--duration) * 8) cubic-bezier(0.87, 0, 0.13, 1),
		opacity calc(var(--duration) * 2) ease-out;
	transition-delay: 0s !important;
	transform: scaleX(0);
	opacity: 0;
}

body:not(.about) #about,
body:not(.all) #all {
	display: none !important;
}

#about .about_in,
#all .all_in {
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	transition: opacity calc(var(--duration) * 2) ease-out;
	height: 100%;
	overflow-y: scroll;
	pointer-events: auto;
}

#about.active,
#all.active {
	opacity: 1;
}

#about.active :is(a, button),
#all.active :is(a, button) {
	pointer-events: auto !important;
}

#about .bah,
#all .bah {
	width: 100%;
	position: relative;
	padding: 10vh 2rem;
	padding: 10lvh 2rem;
	min-height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

#about .bahh,
#all .bahh {
	pointer-events: auto;
	position: relative;
	z-index: 20;
	width: 100%;
	max-width: 75ch;
	margin-inline: auto;
}

#all .bahh {
	max-width: 144rem;
}

#about .bah > i,
#all .bah > i {
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: auto !important;
}

#about .about_inn > * + * {
	margin-top: 2em;
}

#about .about_inn h3,
#all .all_inn h3 {
	margin-top: 3em;
	font-size: inherit;
}

#about .about_inn .clients li,
#about .about_inn h3 span,
#all .all_inn h3 span {
	font-size: 2.5em;
	line-height: 1.1;
}

/* #about .about_inn .clients li + li {
	margin-top: 0.25em;
} */

#about .words .fonty .word {
	margin-top: 0;
}

:is(#titles, #splash) .words {
	padding-top: 0.6em !important;
}

.words .d-flex {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 0.15em;
}

.words .word,
.words .word * {
	display: inline-block;
	vertical-align: baseline;
}

.words .word {
	overflow: hidden;
	padding: 0 0.1em;
	margin: 0 -0.1em;
	margin-top: -0.6em;
}

.words .word span {
	transition: translate calc(var(--duration) * 6) cubic-bezier(0.19, 1, 0.22, 1);
	translate: 0 200%;
}

.words_holder.active .word span {
	translate: none;
}

.words_holder:not(.active) .word span {
	transition: translate calc(var(--duration) * 3) cubic-bezier(0.11, 0, 0.5, 0);
	transition-delay: 0s !important;
}

/* #titles .words {
			flex-wrap: nowrap;
		} */

.title .meta {
	width: 100%;
	margin-top: -1vmax;
	position: absolute;
	left: 0;
	top: 100%;
}

:is(.client, .meta, .title_in) {
	transition: opacity var(--duration) ease-out;
}

#titles .desc {
	margin: 0 auto;
	padding: 0 2vw;
	max-width: 75ch;
	display: flex;
	display: none;
	justify-content: center;
	align-items: center;
	text-align: center;
	opacity: 0;
	translate: 0 1em;
	text-shadow: 0 0.075em 0.1em rgba(0, 0, 0, 0.25);
	transition:
		opacity calc(var(--duration) * 2) ease-out,
		translate calc(var(--duration) * 4) cubic-bezier(0.19, 1, 0.22, 1);
}

#titles .desc p {
	margin: 0;
}

#titles .desc p + p {
	margin-top: 1.5em;
}

.links {
	display: flex;
	justify-content: center;
	font-size: 1.15em;
	gap: 1.5em;
	align-items: center;
	opacity: 0;
	transition: opacity calc(var(--duration) * 2) ease-out;
}

.links :is(a, button) {
	display: block;
	white-space: nowrap;
	padding: 0.75em 1em;
	text-align: center;
	border-radius: 0.4em;
	border-radius: 50rem;
	border: var(--linewidth) solid var(--color3);
	color: var(--color3);
	background: #000;
	pointer-events: none !important;
	text-shadow: none;
	transition:
		background-color var(--duration) ease-out,
		color var(--duration) ease-out,
		border-color var(--duration) ease-out,
		opacity var(--duration) ease-out,
		scale calc(var(--duration) * 2) cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow var(--duration) ease-out;
	backface-visibility: hidden;
}

.links :is(a, button).go {
	background-color: var(--color3);
	color: var(--color7);
	border-color: var(--color3);
	/* box-shadow: 0.3rem 0.3rem 0 var(--color4); */
}

.title .links {
	padding-top: 0.5em;
}

.title.active .desc {
	opacity: 1;
	translate: none;
	transition-delay: calc(var(--duration) * 2);
	pointer-events: auto;
}

.title.active .links,
.description.active .links,
#about.active .links {
	opacity: 1;
	transition-delay: calc(var(--duration) * 4);
}

body:not(.details) .title.active :is(a, button),
body.details #descriptions .description.active :is(a, button),
body.about #about .about_inn,
body.all #all .all_inn,
body.details #descriptions .description.active .bah > * {
	pointer-events: auto !important;
}

#main_header,
#main_footer {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	padding: 1.5rem;
	z-index: 9998;
	pointer-events: none;
	line-height: 1.5;
}

#main_footer {
	top: auto;
	bottom: 0;
}

:is(#main_header, #main_footer) > .in {
	display: flex;
	justify-content: center;
	align-items: center;
}

.side {
	flex: 1;
}

.side:last-child {
	text-align: end;
}

@keyframes loading {
	0%,
	25% {
		opacity: 0;
	}

	100% {
		opacity: 0.85;
	}
}

#logo {
	display: block;
	width: 5em;
	transition: opacity calc(var(--duration) * 4) ease-out;
}

body.loading #logo {
	/* translate: -98px 443px;
	scale: 1.8; */
	animation: loading calc(var(--duration) * 4) alternate infinite ease-in-out;
}

#logo g {
	transition: translate calc(var(--duration) * 13) cubic-bezier(0.19, 1, 0.22, 1);
}

body:not(.state-intro) #logo g.sol {
	translate: 20% 0;
}

body:not(.state-intro) #logo g.rio {
	translate: -20% 0;
}

#logo path {
	fill: rgb(var(--color2));
}

#main_nav ul {
	display: flex;
	justify-content: end;
	align-items: baseline;
}

#main_nav ul > li + li {
	margin-inline-start: 2.5em;
}

#langs {
	display: flex;
	justify-content: end;
	align-items: baseline;
}

#langs a + a {
	margin-inline-start: 1.2em;
}

body.lang-es #langs .lang-en,
body.lang-en #langs .lang-es {
	opacity: 0.5;
}

#main_nav :is(a, button) {
	display: block;
	padding: 1em 0;
	position: relative;
}

#main_nav :is(a, button) svg {
	display: block;
	position: absolute;
	width: calc(100% + 0.8em);
	height: 90%;
	left: -0.4em;
	top: 5%;
	rotate: 4deg;
	stroke-dasharray: 32.4em;
	stroke-dashoffset: 32.4em;
	pointer-events: none;
}

#main_nav :is(a, button).all-toggle svg {
	rotate: 175deg;
}

/* #main_nav :is(a, button):hover svg, */
body.about-active #main_nav :is(a, button).about-toggle svg,
body.all-active #main_nav :is(a, button).all-toggle svg,
#main_nav :is(a, button) svg.in {
	transition: stroke-dashoffset calc(var(--duration) * 8) cubic-bezier(0.19, 1, 0.22, 1);
	stroke-dashoffset: 0;
}

body:not(.about-active) #main_nav :is(a, button).about-toggle svg.in.out,
body.about-active.about-out #main_nav :is(a, button).about-toggle svg,
body:not(.all-active) #main_nav :is(a, button).all-toggle svg.in.out,
body.all-active.all-out #main_nav :is(a, button).all-toggle svg {
	stroke-dashoffset: -32.4em;
	transition-duration: calc(var(--duration) * 8);
}

#main_nav :is(a, button) svg path {
	stroke-width: 1px;
}

svg {
	display: block;
}

svg,
svg * {
	transition: calc(var(--duration) * 2) ease-out;
	transition-property: fill, stroke, opacity;
}

.client {
	position: absolute;
	width: 80vw;
	left: 50%;
	bottom: 100%;
	translate: -50% -3em;
	text-shadow: 0 0.075em 0.1em rgba(0, 0, 0, 0.25);
}

.mask > * {
	display: block;
}

.mask > * > * {
	display: block;
	overflow: hidden;
}

.mask > * > * > * {
	display: block;
	transition: translate calc(var(--duration) * 8) cubic-bezier(0.19, 1, 0.22, 1);
}

body:not(.state-intro) .mask > * > * > *,
.title:not(.active) .mask > * > * > * {
	translate: 0 -150%;
}

body:not(.state-intro) #main_footer .mask > * > * > *,
body:not(.all--visible) #all .mask > * > * > * {
	translate: 0 150%;
}

.has--smile {
	pointer-events: auto !important;
}

#social {
	font-size: 1.5em;
	line-height: 1;
	display: flex;
	justify-content: end;
	text-align: center;
}

#social li + li {
	margin-left: 0.5em;
	color: rgb(255, 240, 239);
}

#social a {
	color: rgb(var(--color2));
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background-color: var(--color1);
	border: var(--linewidth) solid rgb(var(--color2));
	transition:
		background-color var(--duration) ease-out,
		color var(--duration) ease-out,
		border-color var(--duration) ease-out,
		opacity calc(var(--duration) * 2) ease-out,
		translate calc(var(--duration) * 4) cubic-bezier(0.19, 1, 0.22, 1),
		rotate calc(var(--duration) * 4) cubic-bezier(0.19, 1, 0.22, 1),
		scale calc(var(--duration) * 4) cubic-bezier(0.19, 1, 0.22, 1);
}

#social svg {
	width: 70%;
}

#splash {
	position: fixed;
	z-index: 10;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	font-size: 15vw;
	padding: 0 2rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity var(--duration) ease-out;
}

body.splash-fade #splash {
	opacity: 0;
}

#splash .words {
	pointer-events: none !important;
}

#splash .words .d-flex {
	white-space: initial;
}

body.lang-es #splash .words .d-flex:nth-child(1) .word:nth-child(3),
body.lang-es #splash .words .d-flex:nth-child(2) .word:last-child,
body.lang-es #splash .words .d-flex:nth-child(3) .word:nth-child(2),
body.lang-es #splash .words .d-flex:nth-child(3) .word:nth-child(4),
body.lang-en #splash .words .d-flex:nth-child(1) .word:nth-child(2),
body.lang-en #splash .words .d-flex:nth-child(2) .word:nth-child(4),
body.lang-en #splash .words .d-flex:nth-child(2) .word:nth-child(5),
body.lang-en #splash .words .d-flex:nth-child(3) .word:nth-child(2) {
	color: var(--color7);
}

/* #splash .words .d-flex:nth-child(2) .word:nth-child(3) {
			padding-inline-start: 1em;
		} */

#cursor {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 450;
	transition: opacity calc(var(--duration) * 2) ease-out;
	opacity: 0;
	width: 130vmin;
}

body.blurred #cursor {
	opacity: 0 !important;
}

#cursor > div {
	display: block;
	width: 100%;
	position: relative;
	transition:
		opacity 0s ease-out,
		width 0s cubic-bezier(0.19, 1, 0.22, 1);
	opacity: 0;
}

#cursor i {
	transition:
		scale calc(var(--duration) * 2) cubic-bezier(0.34, 1.56, 0.64, 1),
		background-color var(--duration) ease-out,
		opacity var(--duration) ease-out;
	position: relative;
	display: block;
	width: 100%;
}

@keyframes turn {
	0% {
		rotate: 0deg;
	}

	100% {
		rotate: 360deg;
	}
}

body.about #cursor i svg {
	animation: turn calc(var(--duration) * 30) forwards infinite linear;
}

body.about #cursor > div {
	opacity: 0.1;
	transition-duration: calc(var(--duration) * 2), calc(var(--duration) * 6);
}

body.about #cursor i svg {
	animation-duration: calc(var(--duration) * 200);
}

#cursor .svg {
	display: none;
}

@keyframes handy {
	0%,
	84% {
		rotate: 90deg;
	}

	100% {
		rotate: 450deg;
	}
}

.bi-hand-index-thumb-fill {
	animation: handy calc(var(--duration) * 25) forwards infinite cubic-bezier(0.34, 1.56, 0.64, 1);
	display: inline-block;
	font-size: 1.15em;
	rotate: 90deg;
	transition:
		rotate 0s cubic-bezier(0.34, 1.56, 0.64, 1),
		color var(--duration) ease-out;
}

body:is(.details, .about, .all) {
	overflow: hidden !important;
}

body.about #stage,
body.about #stage *,
body.all #stage,
body.all #stage * {
	pointer-events: none !important;
}

body.details .card_holder:not(.active) .card_holder_in {
	opacity: 0;
}

body.details .card_holder.active .card_holder_in {
	scale: 0.7 !important;
	opacity: 0.1;
}

body:not(.details):not(.home) .card_holder:not(.active) .card_holder_inn {
	transition-duration: 0s;
	transition-delay: calc(var(--duration) * 2);
}

body.details .card_holder:not(.active) .card_holder_inn {
	visibility: hidden;
	opacity: 0;
}

body.details #titles {
	scale: 0.5;
}

body.details #titles :is(.client, .meta) {
	opacity: 0;
}

body.details #titles :is(.client, .meta) * {
	pointer-events: none !important;
}

body.desktop.cursor--hover:not(.about) #cursor i {
	scale: 1.2;
}

body.desktop.cursor--pressed:not(.about) #cursor i {
	scale: 0.8;
}

body.desktop #cursor .svg {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	scale: 0.2;
	opacity: 0;
	transition:
		background-color var(--duration) ease-out,
		color var(--duration) ease-out,
		border-color var(--duration) ease-out,
		opacity var(--duration) ease-out,
		scale calc(var(--duration) * 3) cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow var(--duration) ease-out;
}

body.desktop #cursor .smile {
	width: 80%;
}

body.desktop #cursor .back {
	width: 60%;
}

body.desktop.cursor--smile:not(.about) #cursor .smile,
body.desktop.cursor--back:not(.about) #cursor .back {
	opacity: 1;
	scale: 1;
}

body.desktop.cursor--smile.cursor--pressed #cursor .smile,
body.desktop.cursor--back.cursor--pressed #cursor .back {
	scale: 0.9;
}

body.desktop #cursor .smile svg {
	rotate: 13deg;
}

@keyframes pirate {
	0% {
		rotate: 13deg;
	}

	100% {
		rotate: -13deg;
	}
}

body.desktop.cursor--smile:not(.about) #cursor .smile svg {
	animation: pirate calc(var(--duration) * 2) alternate infinite ease-in-out;
}

body.desktop #cursor .svg svg :is(path, line) {
	stroke-width: 2px;
}

body.desktop #cursor .smile svg {
	width: 100%;
}

#all .case {
	text-align: end;
	font-size: 0.85em;
}

#all .case > span > span > span {
	display: inline-flex !important;
	width: auto;
	justify-content: end;
	align-items: center;
	gap: 0.15em;
	background-color: var(--color1);
	border: 1px solid rgb(var(--color2));
	border-radius: 50vw;
	padding: 0.25em 0.6em;
	position: relative;
	overflow: hidden;
	transition: color var(--duration) ease-out;
}

#all .case div {
	position: relative;
	z-index: 5;
	display: flex !important;
	align-items: center;
}

#all .case > span > span > span.ver {
	background-color: rgb(var(--color2));
	color: var(--color1);
}

#all .main {
	flex: 1;
	font-size: 250%;
	line-height: 1.1;
	transition: translate calc(var(--duration) * 6) cubic-bezier(0.19, 1, 0.22, 1);
}

#all .desc {
	transition: opacity var(--duration) ease-out;
}

#all:not(.active) .desc {
	opacity: 0;
}

#all ul {
	margin-top: 2.4em;
}

#all a {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 2em;
	justify-content: space-between;
}

#all a > b {
	display: none;
}

#all li + li a > b {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform-origin: 0 50%;
	opacity: 0.5;
	transition: transform calc(var(--duration) * 8) cubic-bezier(0.87, 0, 0.13, 1);
}

#all:not(.active) li + li a > b {
	transition:
		transform calc(var(--duration) * 8) cubic-bezier(0.87, 0, 0.13, 1),
		opacity calc(var(--duration) * 2) ease-out;
	transition-delay: 0s !important;
	transform: scaleX(0);
	opacity: 0;
}

#all .words .word {
	margin: 0;
	margin-top: 0;
	padding: 0;
}

#all .words .word,
#all .words .word * {
	display: block;
}

#all-thumbs {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: min(20vw, 25rem);
	pointer-events: none;
	transition: opacity calc(var(--duration) * 2) ease-out;
}

body:not(.cursor--all) #all-thumbs {
	opacity: 0;
}

#all-thumbs .thumb {
	position: relative;
	z-index: 1;
	transition:
		opacity calc(var(--duration) * 2) ease-out,
		scale calc(var(--duration) * 2) cubic-bezier(0.34, 1.56, 0.64, 1);
}

#all-thumbs .thumb:not(.active) {
	z-index: 0;
	opacity: 0;
	scale: 0.5;
}

#all-thumbs .thumb:nth-child(n + 2) {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

#all-thumbs :is(.card, .card_in) {
	height: auto;
}

#all-thumbs img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	inset: 0;
}

#all-thumbs .card_in::after {
	content: none;
}

#social .s-awwwards {
	display: none !important;
}

#fwa {
	position: fixed;
	left: 0;
	top: 0;
	width: 13rem;
	z-index: 99999;
}

#fwa img {
	display: block;
	width: 100%;
}

@media all and (orientation: landscape), all and (aspect-ratio: 1) {
	:root {
		--card-height: 60vh;
		--card-height: 60svh;
	}

	body {
		/* font-size: clamp(1.4rem, 0.86vw, 1.6rem); */
		font-size: 1.4rem;
	}

	@media all and (min-width: 1921px) {
		body {
			font-size: max(1.4rem, 0.86vw);
		}
	}

	.d-landscape-none {
		display: none !important;
	}

	#cursor > div {
		width: max(15rem, 10vw);
		opacity: 1;
	}

	body.about #cursor > div {
		width: 100%;
		opacity: 0.1;
	}

	body.all.cursor--all #cursor i {
		opacity: 0;
	}

	#cursor i svg {
		animation: turn calc(var(--duration) * 30) forwards infinite linear;
	}

	#logo {
		width: 7em;
	}

	#main_header,
	#main_footer {
		padding: 2rem 3rem;
	}

	#main_header > .in {
		align-items: flex-start;
	}

	#main_nav :is(a, button) {
		padding: 1em 0;
	}

	#main_nav ul > li + li {
		margin-inline-start: 3em;
	}

	#main_nav :is(a, button).about-toggle {
		padding-inline-end: 0;
	}

	#main_nav :is(a, button) svg {
		width: calc(100% + 1.6em);
		left: -0.8em;
	}

	#main_footer > .in {
		align-items: end;
	}

	#main_footer > .in > .side:first-child {
		margin-bottom: 1.25em;
	}

	#main_footer > .in > .side:first-child .mask {
		display: inline-block;
	}

	#main_footer .has--smile {
		--spread: 6em;
		cursor: default;
		padding: var(--spread);
		translate: calc(var(--spread) * -1) var(--spread);
	}

	body:not(.state-intro) #main_footer .side:last-child .mask > * > * > * {
		translate: 0 -150%;
	}

	.clients {
		display: flex;
		flex-wrap: wrap;
		column-gap: 2em;
		row-gap: 0.5em;
		justify-content: center;
		text-align: center;
		max-width: 60ch;
		margin-inline: auto;
	}

	#descriptions .description_in,
	#about .about_inn,
	#all .all_inn {
		font-size: 1.35em;
	}

	#descriptions .description_in.big {
		font-size: 1.6em;
		line-height: 1.5;
	}

	#descriptions .credits {
		margin-top: 1.8em;
		padding-top: 0.9em;
		grid-template-columns: repeat(2, 1fr);
	}

	#descriptions .credits::before {
		font-size: 0.5em;
		opacity: 0.75;
	}

	#descriptions .credits li {
		font-size: 0.7em;
	}

	.links {
		font-size: 1.35em;
	}

	.title_in {
		font-size: 12vw;
		font-size: calc(9vw + 5vh);
	}

	#descriptions .description,
	#about .about_in,
	#all .all_in {
		align-items: center;
	}

	#splash {
		font-size: 9vw;
	}

	.turn {
		height: 1.5em;
		position: relative;
		white-space: nowrap;
	}

	.turn > * {
		display: block;
		position: absolute;
		left: 0;
		bottom: calc(100% - 0.5em);
		transform-origin: 0 100%;
		rotate: 90deg;
	}

	.turn > * > * {
		display: block;
		rotate: 180deg;
		backface-visibility: hidden;
	}

	.turn.b > * {
		left: auto;
		right: 0;
		bottom: auto;
		top: calc(100% - 0.5em);
		transform-origin: 100% 0%;
	}

	.turn.b > * > * {
		rotate: 0deg;
	}

	.turn.b #social a {
		rotate: -90deg;
	}

	/* #splash .words .d-flex {
				white-space: nowrap;
			} */

	.words .d-flex {
		flex-wrap: nowrap;
	}

	#descriptions .bah {
		padding-inline-start: 50%;
	}

	#about .bah {
		text-align: center;
	}

	body.details #titles {
		translate: -25vw 0;
		scale: 0.7;
	}

	body.details #cards {
		translate: calc(-50% - 25vw) -50%;
	}

	body.details .card_holder.active .card_holder_in {
		scale: 0.8 !important;
		opacity: 0.5;
	}

	#all .words .main .word {
		padding: calc(0.15em + 1px) 0.5em 0.1em 0;
	}

	#all .year {
		flex: 1;
		order: 2;
	}

	#all .main {
		font-size: 450%;
		flex: 4;
		order: 1;
	}

	#all .case {
		flex: 1;
		order: 3;
	}

	#all .case > span > span > span::after {
		content: "";
		display: block;
		position: absolute;
		inset: 0;
		background-color: var(--color7);
		z-index: 0;
		border-radius: 50vw;
		translate: 0 110%;
		transition: translate calc(var(--duration) * 4) cubic-bezier(0.19, 1, 0.22, 1);
	}
}

@media all and (orientation: portrait) {
	.d-portrait-none {
		display: none !important;
	}

	#fwa {
		left: auto;
		top: auto;
		bottom: 0;
		right: 0;
		width: 11rem;
	}

	#langs {
		font-size: 0.9em;
	}

	#langs a + a {
		margin-inline-start: 1em;
	}
	@keyframes card1 {
		0% {
			translate: 0 0;
		}
		100% {
			translate: -1rem -2rem;
		}
	}
	@keyframes card2 {
		0% {
			translate: 0 0;
		}
		100% {
			translate: 1rem 2rem;
		}
	}
	.card_holder.active .card_in {
		animation: calc(var(--duration) * 30) infinite alternate ease-in-out;
	}
	.card_holder.active .card:first-child .card_in {
		animation-name: card1;
	}
	.card_holder.active .card + .card .card_in {
		animation-name: card2;
		animation-direction: alternate-reverse;
		animation-duration: calc(var(--duration) * 45);
	}

	body.details .card_holder.active .card_holder_inn {
		opacity: 0.35;
	}

	body.details #titles :is(.client, .meta, .title_in) {
		opacity: 0;
	}

	body.details #titles :is(.client, .meta, .title_in) * {
		pointer-events: none !important;
	}
	#descriptions .ttl {
		text-align: center;
		font-size: 4.5em;
		margin-top: 0.5em;
		color: var(--color3);
		text-shadow: 0 0.075em 0.1em rgba(0, 0, 0, 0.35);
	}

	#all a {
		padding: 0.75em 0;
	}

	#all .year {
		width: 100%;
		font-size: 0.75em;
	}

	#all .main {
		margin-bottom: -0.2em;
	}

	#all .case > span > span > span {
		font-size: 0.85em;
	}

	body.vertical {
		width: 100vw;
		height: 100lvh;
		overflow-x: hidden;
	}

	body.vertical #stage {
		position: relative;
		height: auto;
		transform: none !important;
	}

	body.vertical :is(#cards, #titles) {
		position: absolute;
		height: auto;
		transform: none !important;
		translate: none !important;
		scale: none !important;
		rotate: none !important;
		left: 0;
		top: 0;
		overflow: hidden;
		width: 100vw;
	}

	body.vertical :is(#cards_in, #titles_in) {
		position: relative;
		left: 0;
		top: auto;
		width: 100%;
		height: auto;
		transform: none !important;
		translate: none !important;
		scale: none !important;
		rotate: none !important;
	}

	body.vertical :is(.card_holder, .title) {
		height: 100%;
		left: 0;
		top: auto;
		position: relative;
		transform-origin: initial;
		transform: none !important;
		translate: none !important;
		scale: none !important;
		rotate: none !important;
	}

	body.vertical :is(.card_holder_in, .title) {
		height: 100lvh;
	}

	body.vertical .title {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
	}

	body.vertical .title_holder {
		position: relative;
	}

	body.vertical .card_holder.active .card_holder_inn {
		opacity: 0.65;
		perspective: 300vw;
	}

	body.vertical.details .card_holder.active .card_holder_inn {
		opacity: 1;
	}

	body.vertical.details .card_in::after {
		opacity: 0 !important;
	}
}

@media (hover: hover) {
	#logo g {
		transition-duration: calc(var(--duration) * 6);
	}

	body.state-open #logo:hover g.sol {
		translate: 20% 0;
	}

	body.state-open #logo:hover g.rio {
		translate: -20% 0;
	}
	.cta a:hover i {
		rotate: 450deg;
		transition-duration: calc(var(--duration) * 4) !important;
	}

	:is(#main_header, #main_footer) :is(a, button):hover {
		color: var(--color9, rgb(var(--color2)));
	}

	#logo:hover svg path {
		fill: var(--color9, rgb(var(--color2)));
	}

	.links :is(a, button):hover {
		scale: 1.1;
	}

	.links :is(a, button):hover {
		border-color: transparent;
		color: var(--color6);
		background: var(--color11);
	}

	.links :is(a, button).go:hover {
		border-color: var(--color5);
		color: var(--color6);
		background: var(--color5);
		box-shadow: 0 0 0 var(--color5);
	}

	#social a:hover {
		background-color: var(--color9, rgb(var(--color2)));
		color: var(--color1);
		border-color: var(--color9, rgb(var(--color2)));
	}
	:is(#descriptions, #about) .words a:hover {
		text-decoration: none;
	}

	#all a:hover .main {
		translate: 0.5em 0;
	}

	#all a:hover .case > span > span > span {
		color: var(--color1);
	}

	#all a:hover .case > span > span > span::after {
		translate: 0 0;
	}
}

/* Awwwards thumb 4/3 */
@media all and (width: 1600px) and (height: 1200px) {
	body {
		font-size: 1.6rem;
	}
	.bi-hand-index-thumb-fill {
		animation: none;
	}
	/* #main_nav,
	#main_footer,
	#main_header .side {
		display: none;
	} */
	body.state-open .card_holder:not(.active) {
		opacity: 0 !important;
	}
	body:not(.state-open) #cursor,
	body.check-ready .title .ready,
	/* .side, */
	#social .s-awwwards {
		display: none !important;
	}
}