@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

.arcfont {
	font-family: "Dela Gothic One", sans-serif;
	font-weight: 200;
	font-style: normal;
}

*,
*:after,
*:before {
	box-sizing: border-box;
}

@property --expanded {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

@property --active {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

:root {
	--item: 80px;
	--accent: hsla(0, 0%, 7%, 0.95);
	--gap: 0.75rem;
	--transition: 0.25s;
	--elastic: linear(0 0%, 0.0012 14.95%, 0.0089 22.36%,
			0.0297 28.43%, 0.0668 33.43%,
			0.0979 36.08%, 0.1363 38.55%,
			0.2373 43.07%, 0.3675 47.01%,
			0.5984 52.15%, 0.7121 55.23%,
			0.8192 59.21%, 0.898 63.62%,
			0.9297 66.23%, 0.9546 69.06%,
			0.9733 72.17%, 0.9864 75.67%,
			0.9982 83.73%, 1 100%);
}

html {
	color-scheme: dark only;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

html:not(:focus-within) {
	scroll-behavior: smooth;
}

body {
	display: flex;
	flex-direction: column;
	place-items: center;
	min-height: 100vh;
	padding: 1rem;
	font-family: "Manrope", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

main section {
	min-height: 100vh;
	display: grid;
	place-items: center;
	align-content: center;
	text-align: center;
}

body::before {
	--line: color-mix(in lch, canvasText 25%, transparent);
	--size: 60px;
	content: '';
	height: 100vh;
	width: 100vw;
	position: fixed;
	background:
		linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 0 0 / var(--size) var(--size),
		linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0 0 / var(--size) var(--size);
	mask: linear-gradient(-15deg, transparent 30%, rgb(0, 0, 0));
	-webkit-mask: linear-gradient(-10deg, transparent 50%, rgb(0, 0, 0));
	top: 0;
	left: 0;
	z-index: -1;
}


.follow-link {
	border: 2px solid canvasText;
	border-radius: 100px;
	display: flex;
	gap: 0 1rem;
	padding: 0.5rem 1rem;
	white-space: nowrap;
	color: canvasText;
	text-decoration: none;
	align-items: center;
	font-weight: 400;
	font-size: 1.25rem;
	transition: 0.5s;
}

.follow-link:is(:hover, :focus-visible) {
	background: #0000008d;
	transform: scale(0.9);
	transition: 0.5s;
}


.follow-link img {
	height: 50px;
	width: 50px;
	border-radius: 50%;
}

#follow p {
	font-size: 20px;
}

#follow p span {
	font-family: "Dela Gothic One", sans-serif;
	font-weight: 200;
	font-style: normal;
}

h2 {
	font-family: "Manrope", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-size: clamp(1.5rem, 3vw + 1rem, 6rem);
}

h2 span {
	font-family: "Dela Gothic One", sans-serif;
	font-weight: 200;
	font-style: normal;
}

header {
	min-height: 50vh;
	display: grid;
	place-items: center;
	align-content: center;
	text-align: center;
}

nav {
	position: sticky;
	top: 1rem;
	display: flex;
	border-radius: 100px;
	overflow: hidden;
	background: canvasText;
	opacity: 0.95;
	color: canvas;
	font-size: 14px;
	height: 48px;
	padding-left: 0rem;
	z-index: 10000;
}

.nav__content {
	display: grid;
}

nav li {
	width: var(--item);
	text-align: center;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: var(--expanded);
	transition: opacity var(--transition) calc(0.75s + (var(--i) * 0.05s));
}

nav li:nth-of-type(1) {
	--i: 0;
}

nav li:nth-of-type(2) {
	--i: 1;
}

nav li:nth-of-type(3) {
	--i: 2;
}

nav li a {
	color: canvas;
	width: 100%;
	height: 100%;
	text-decoration: none;
	display: grid;
	place-items: center;
	white-space: nowrap;
}

footer {
	padding: 2rem;
}

footer span {
	font-family: "Dela Gothic One", sans-serif;
	font-weight: 200;
	font-style: normal;
}

[href="#"] {
	width: 48px;
	display: grid;
	place-items: center;
	color: var(--accent);
}

[href="#"] svg {
	width: 24px;
}

.bear-link,
.bear-link img {
	color: canvasText;
	position: fixed;
	top: 0.65rem;
	left: 1rem;
	width: 70px;
	height: 70px;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	opacity: 1;
	border-radius: 50%;
}

:where(.x-link, .bear-link):is(:hover, :focus-visible) {
	opacity: 0.5;
}

.bear-link svg {
	width: 75%;
}

@media(max-width: 768px) {
	.bear-link {
		display: none;
	}
}

.cook {
	border-radius: 100px;
	display: flex;
	gap: 0 0.5rem;
	align-items: center;
	background: canvasText;
	color: var(--accent);
	border: 0;
	padding: 0 var(--gap);
	white-space: nowrap;
	z-index: 2;
	cursor: pointer;
	position: relative;
	font-weight: 600;
}

.cook::before {
	content: "";
	position: absolute;
	right: 100%;
	width: 48px;
	aspect-ratio: 1;
	scale: calc(1 - var(--expanded)) 1;
	transition: scale var(--transition);
	transform-origin: 100% 50%;
}

.cook:is(:hover, :focus-visible) {
	--intent: 1;
}

.cook svg {
	width: 16px;
	min-width: 16px;
	stroke-width: 3px;
	rotate: calc(var(--intent, 0) * -50deg);
	transition: rotate var(--transition);
}

.cook span span {
	display: none;
}

@media(min-width: 768px) {
	.cook span span {
		display: inline-block;
	}
}

main {
	min-height: 200vh;
	width: 70ch;
	margin: 0 auto;
	margin-top: 6rem;
	max-width: 100%;
}

h1 {
	font-family: "Dela Gothic One", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: clamp(3rem, 4vw + 1rem, 8rem);
	font-weight: 500;
	text-align: center;
	display: flex;
	flex-direction: column;
	line-height: 0.9;
	margin-top: 100px;
	color: #cfd2cf
}

h1 span:first-of-type {
	font-size: 50px;
	margin-right: 530px;
}

h1 span {
	font-size: 270px;
}

h1 span img {
	width: 800px;
	height: 800px;
	margin: -350px 0 -350px 0
}

h1 span:last-of-type {
	font-size: 50px;
	margin-top: 90px;
	margin-left: 540px;
}

.content {
	list-style-type: none;
	display: flex;
	height: 100%;
	gap: 0 var(--gap);
	align-items: center;
	padding: 0 1rem;
	margin: 0;
}

@supports(animation-timeline: scroll()) {
	:root {
		timeline-scope: --header, --product, --price, --follow;
	}

	header {
		view-timeline-name: --header;
	}

	nav {
		animation: expand both steps(1, end);
		animation-timeline: --header;
		animation-range: exit;
	}

	li a {
		opacity: calc(0.5 + (var(--active)));
		position: relative;
		transition: opacity var(--transition);
	}

	li:is(:hover, :focus-visible) a {
		opacity: 1;
	}

	#arc {
		view-timeline: --product;
	}

	#episodes {
		view-timeline: --price;
	}

	#contact {
		view-timeline: --follow;
	}

	nav li {
		animation: activate both steps(1);
	}

	li:has([href="#arc"]) {
		animation-timeline: --product;
		animation-range: entry -100% exit 100%;
	}

	li:has([href="#episodes"]) {
		animation-timeline: --price;
	}

	li:has([href="#contact"]) {
		animation-timeline: --follow;
	}

	@keyframes activate {
		50% {
			--active: 1;
		}
	}

	a span {
		position: relative;
	}


	.nav__content {
		grid-template-columns: auto calc(var(--expanded) * (3 * var(--item))) auto;
		transition: grid-template-columns 1s var(--elastic);
	}

	.cook {
		padding-left: calc(var(--expanded) * var(--gap));
		transition: padding 1s var(--elastic);
	}

	@keyframes expand {
		to {
			--expanded: 1;
		}
	}
}

#episodes {
	margin: -30px;
	padding: 0;
	width: 100%;
}

@media(max-width: 768px) {
	h1 span img {
		width: 400px;
		height: 400px;
		margin: -150px 0 -150px 0
	}

	h1 span:first-of-type {
		font-size: 30px;
		margin-right: 50vw;
		margin-bottom: -80px;
	}

	h1 span:last-of-type {
		font-size: 50px;
		margin-top: 35px;
		margin-left: 20vw;
	}


	nav li {
		display: none;
		width: max-content;
	}

	nav {
		width: 50%;
	}

	.nav__content {
		display: inline-flex;
		gap: 0;
	}

	button span {
		font-size: 16px;
	}

	button.cook {
		margin-left: -30px;
	}

	#episodes {
		margin: -3%;
	}

}




#arc p {
	margin-top: -20px;
	font-size: 30px;
}

.band {
	width: 100%;
	max-width: 2040px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-gap: 20px;
}

@media (min-width: 30em) {
	.band {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 60em) {
	.band {
		grid-template-columns: repeat(2, 1fr);
	}
}

.card {
	background: #cfd2cf30;
	text-decoration: none;
	color: #ffffff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	min-height: 100%;
	position: relative;
	top: 0;
	transition: all 0.1s ease-in;
	border-radius: 25px;
	opacity: 0.9;
}

.card:hover {
	top: -2px;
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}

.card article {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	place-items: center;
}

.card h1 {
	font-size: 15px;
	margin: 0;
	color: #ffffff;
}

.card p {
	flex: 1;
	line-height: 1.4;
}

.card span {
	font-size: 12px;
	font-weight: bold;
	color: #fffbfb;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 2em 0 0 0;
}

.card .thumb {
	padding-bottom: 70%;
	opacity: 1;
	background-size: cover;
	background-position: center center;
	border-radius: 25px 25px 0 0;
	mask-image: linear-gradient(left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)))
}

@media (min-width: 60em) {
	.item-1 {
		grid-column: 1/span 2;
	}

	.item-1 h1 {
		font-size: 24px;
	}
}

article .buttons {
	display: inline-flex;
	align-items: right;
	text-align: right;
	gap: 10px;
	text-decoration: none;
	margin-top: 20px;

}

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	cursor: pointer;
	border: none;
	background-color: #00000076;
	position: relative;
	transition: 0.5s;
}

.btn-txt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 50px;
	border-radius: 25px;
	cursor: pointer;
	border: none;
	background-color: #00000076;
	position: relative;
	font-size: 19px;
	text-decoration: none;
	font-weight: bold;
	color: white;
	transition: 0.5s;
}

.btn-txt:hover {
	color: #aaaaaa;
	transform: scale(0.9);
	transition: 0.5s;
}


.icon {
	width: 30px;
	height: 30px;
	transition: 0.2s linear;
}

.icon path {
	fill: white;
	transition: 0.2s linear;
}

.btn:hover {
	transform: scale(0.9);
	transition: 0.5s;
}

.btn:nth-child(1):hover>.icon path {
	fill: rgba(32, 187, 73, 0.788);
}

.btn:nth-child(2):hover>.icon path {
	fill: rgba(187, 32, 32, 0.788);
}

.btn:nth-child(3):hover>.icon path {
	fill: rgba(62, 62, 62, 0.788);
}



.socialbutton {
	cursor: pointer;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	border: none;
	background: linear-gradient(-120deg, #833ab4db, #fd1d1dd5, #fcb045d5);
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 10px;
	transition: 0.5s;
}

.socialbutton svg {
	color: white;
	width: 30px;
	height: 30px;
	z-index: 9;
}

.socialbutton:nth-child(3) {
	background: linear-gradient(-120deg, #02ff2ccd, #008a12d8);
}

.socialbutton:nth-child(4) {
	background: rgba(0, 0, 0, 0.836);
}

.socialbutton:nth-child(2) {
	background: rgb(255, 33, 33, 0.836);
}

.socialbutton:nth-child(6) {
	background: rgba(128, 128, 128, 0.836);
}

.socialbutton:active {
	transform: scale(0.85);
}

.socialbutton::before {
	content: "";
	position: absolute;
	width: 55px;
	height: 55px;
	background-color: #2121219c;
	border-radius: 50px;
	z-index: -1;
	border: 0px solid rgba(255, 255, 255, 0.411);
	transition: 0s;
}

.socialbutton:hover::before {
	width: 0px;
	height: 0px;
}

.socialbutton:hover {
	transform: scale(0.9);
}




.teambtn {
	position: relative;
	padding: 12px 35px;
	background: #ffffff;
	font-size: 17px;
	font-weight: 500;
	color: #181818;
	border: 3px solid #ffffff;
	border-radius: 50px;
	box-shadow: 0 0 0 #cbcbcb8c;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	margin-top: 5px;

}

.star-1 {
	position: absolute;
	top: 20%;
	left: 20%;
	width: 25px;
	height: auto;
	filter: drop-shadow(0 0 0 #fffdef);
	z-index: -5;
	transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}

.star-2 {
	position: absolute;
	top: 45%;
	left: 45%;
	width: 15px;
	height: auto;
	filter: drop-shadow(0 0 0 #fffdef);
	z-index: -5;
	transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-3 {
	position: absolute;
	top: 40%;
	left: 40%;
	width: 5px;
	height: auto;
	filter: drop-shadow(0 0 0 #fffdef);
	z-index: -5;
	transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-4 {
	position: absolute;
	top: 20%;
	left: 40%;
	width: 8px;
	height: auto;
	filter: drop-shadow(0 0 0 #fffdef);
	z-index: -5;
	transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-5 {
	position: absolute;
	top: 25%;
	left: 45%;
	width: 15px;
	height: auto;
	filter: drop-shadow(0 0 0 #fffdef);
	z-index: -5;
	transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-6 {
	position: absolute;
	top: 5%;
	left: 50%;
	width: 5px;
	height: auto;
	filter: drop-shadow(0 0 0 #fffdef);
	z-index: -5;
	transition: all 0.8s ease;
}

.teambtn:hover {
	background: transparent;
	color: #ffffff;
	box-shadow: 0 0 25px #cdcdcd8c;
}

.teambtn:hover .star-1 {
	position: absolute;
	top: -80%;
	left: -10%;
	width: 25px;
	height: auto;
	filter: drop-shadow(0 0 10px #fffdef);
	z-index: 2;
}

.teambtn:hover .star-2 {
	position: absolute;
	top: -25%;
	left: 10%;
	width: 15px;
	height: auto;
	filter: drop-shadow(0 0 10px #fffdef);
	z-index: 2;
}

.teambtn:hover .star-3 {
	position: absolute;
	top: 55%;
	left: 25%;
	width: 5px;
	height: auto;
	filter: drop-shadow(0 0 10px #fffdef);
	z-index: 2;
}

.teambtn:hover .star-4 {
	position: absolute;
	top: 30%;
	left: 80%;
	width: 8px;
	height: auto;
	filter: drop-shadow(0 0 10px #fffdef);
	z-index: 2;
}

.teambtn:hover .star-5 {
	position: absolute;
	top: 25%;
	left: 115%;
	width: 15px;
	height: auto;
	filter: drop-shadow(0 0 10px #fffdef);
	z-index: 2;
}

.teambtn:hover .star-6 {
	position: absolute;
	top: 5%;
	left: 60%;
	width: 5px;
	height: auto;
	filter: drop-shadow(0 0 10px #fffdef);
	z-index: 2;
}

.fil0 {
	fill: #fffdef;
}

@media(max-width: 768px) {
#arc p {
	margin-top: 15px;
	margin-bottom: 25px;
	font-size: 20px;
}
#arc h2{
	font-size: 30px;
}
}