/* Defs */
@property --angle-1 {
	syntax: "<angle>";
	inherits: false;
	initial-value: -75deg;
}

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

:root {
	--global--size: clamp(2rem, 4vw, 5rem);
	--anim--hover-time: 400ms;
	--anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
	--base-color: 53 53 53;
	--highlight-color: 23 255 31;
	--c: rgba(23, 255, 31, 1);
}
html, body {
    height: 100vh;
    /* height: 100dvh; */
    margin: 0;
    padding: 0;
	box-sizing: border-box;
	overscroll-behavior: none;

    /* Растягиваем контент под вырезы */
    /* padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom); */
}
/* Base Styles */
body {
	font-size: var(--global--size);
	font-family: "Inter", sans-serif;
	background: linear-gradient(rgb(var(--base-color) / 0.1), rgb(var(--base-color) / 0.1)), rgba(215, 215, 215, 1);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
}
.fullscreen-wrap {
    position: fixed;
    top: calc(-1 * env(safe-area-inset-top));
    left: 0;
    right: 0;
    bottom: 0;
	/* background: linear-gradient(rgb(var(--base-color) / 0.1), rgb(var(--base-color) / 0.1)), rgba(215, 215, 215, 1); */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
/* ========== BUTTON ========== */

/* Button Wrap Container */
.button-wrap {
	position: relative;
	z-index: 3;
	border-radius: 999vw;
	background: transparent;
	pointer-events: none;
	transition: all var(--anim--hover-time) var(--anim--hover-ease);
	
	/* Button Shadow Container */
	& .button-shadow {
		--shadow-cuttoff-fix: 2em;
		position: absolute;
		width: calc(100% + var(--shadow-cuttoff-fix));
		height: calc(100% + var(--shadow-cuttoff-fix));
		top: calc(0% - var(--shadow-cuttoff-fix) / 2);
		left: calc(0% - var(--shadow-cuttoff-fix) / 2);
		filter: blur(clamp(2px, 0.125em, 12px));
		-webkit-filter: blur(clamp(2px, 0.125em, 12px));
		-moz-filter: blur(clamp(2px, 0.125em, 12px));
		-ms-filter: blur(clamp(2px, 0.125em, 12px));
		overflow: visible;
		pointer-events: none;
		&::after {
			content: "";
			position: absolute;
			z-index: 0;
			inset: 0;
			border-radius: 999vw;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
			width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
			height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
			top: calc(var(--shadow-cuttoff-fix) - 0.5em);
			left: calc(var(--shadow-cuttoff-fix) - 0.875em);
			padding: 0.125em;
			box-sizing: border-box;
			mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
			mask-composite: exclude;
			transition: all var(--anim--hover-time) var(--anim--hover-ease);
			overflow: visible;
			opacity: 1;
		}
	}

	/* Shadow */
	& button {
		/* Basic Styling */
		--border-width: clamp(1px, 0.0625em, 4px);
		all: unset;
		cursor: pointer;
		position: relative;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		pointer-events: auto;
		z-index: 3;
		background: linear-gradient(-75deg,
				rgba(255, 255, 255, 0.05),
				rgba(255, 255, 255, 0.2),
				rgba(255, 255, 255, 0.05));
		border-radius: 999vw;
		box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
			inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
			0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
			0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
			0 0 0 0 rgba(255, 255, 255, 1);
		/* backdrop-filter: blur(clamp(1px, 0.125em, 4px)); */
		/* -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px)); */
		/* -moz-backdrop-filter: blur(clamp(1px, 0.125em, 4px)); */
		/* -ms-backdrop-filter: blur(clamp(1px, 0.125em, 4px)); */
		transition: all var(--anim--hover-time) var(--anim--hover-ease);
		/* Prevent double-tap-to-zoom on modern browsers while preserving pinch-to-zoom */
		touch-action: manipulation;
		-ms-touch-action: manipulation;
		
		&::after {
			content: "";
			position: absolute;
			z-index: 1;
			inset: 0;
			border-radius: 999vw;
			width: calc(100% + var(--border-width));
			height: calc(100% + var(--border-width));
			top: calc(0% - var(--border-width) / 2);
			left: calc(0% - var(--border-width) / 2);
			padding: var(--border-width);
			box-sizing: border-box;
			background: conic-gradient(from var(--angle-1) at 50% 50%,
					rgba(0, 0, 0, 0.5),
					rgba(0, 0, 0, 0) 5% 40%,
					rgba(0, 0, 0, 0.5) 50%,
					rgba(0, 0, 0, 0) 60% 95%,
					rgba(0, 0, 0, 0.5)),
				linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
			mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
			mask-composite: exclude;
			transition: all var(--anim--hover-time) var(--anim--hover-ease),
				--angle-1 500ms ease;
			box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5);
		}
		& span {
			position: relative;
			display: flex;
			flex-direction: column;
			gap: 1rem;
			user-select: none;
			text-align: center;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			font-family: sans-serif;
			letter-spacing: 0.2rem;
			font-weight: 700;
			text-transform: uppercase;
			font-size: min(25vh, 25vw);
			/* font-size: max(4.5vh, 4.5vw); */
			color: rgba(50, 50, 50, 1);
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			text-shadow: .025em .2em .05em rgba(0, 0, 0, 0.1);
			transition: all var(--anim--hover-time) var(--anim--hover-ease);
			/* padding: 1.5em; */
			/* padding-block: 0.875em; */
			width: min(70vw, 70vh);
			aspect-ratio: 1;
			justify-content: center;
			align-items: center;
			pointer-events: none;

			&::after {
				content: "";
				display: block;
				position: absolute;
				z-index: 1;
				width: calc(100% - var(--border-width));
				/* Prevent overlapping border */
				height: calc(100% - var(--border-width));
				top: calc(0% + var(--border-width) / 2);
				left: calc(0% + var(--border-width) / 2);
				box-sizing: border-box;
				border-radius: 999vw;
				overflow: clip;
				background: linear-gradient(var(--angle-2),
						rgba(255, 255, 255, 0) 0%,
						rgba(255, 255, 255, 0.5) 40% 50%,
						rgba(255, 255, 255, 0) 55%);
				z-index: 3;
				mix-blend-mode: screen;
				pointer-events: none;
				background-size: 200% 200%;
				background-position: 0% 50%;
				background-repeat: no-repeat;
				transition: background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease),
					--angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease);
			}
			/* & em {
				font-style: normal;
				text-transform: none;
				font-weight: 400;
				font-size: 1rem;
				max-width: 60%;
				text-align: center;
				letter-spacing: 0;
			} */
		}
		&.pressed {
			&::after {
				--angle-1: -75deg;
			}
			& span {
				&::afler {
					background-position: 50% 15%;
					--angle-2: -15deg;

				}
			}
		}
		&.active {
			transform: scale(0.975);
			-webkit-backdrop-filter: blur(0.01em);
			-moz-backdrop-filter: blur(0.01em);
			-ms-backdrop-filter: blur(0.01em);
			backdrop-filter: blur(0.01em);
			box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
				inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
				0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
				0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5),
				0 0 0 0 rgba(255, 255, 255, 1);
			background: linear-gradient(-75deg,
					rgb(var(--highlight-color) / 0.15),
					rgb(var(--highlight-color) / 0.45),
					rgb(var(--highlight-color) / 0.15));
			&::after {
				--angle-1: -75deg;
			}
			& span {
				color: rgba(255, 255, 255, 1);
				letter-spacing: 0;
				text-shadow: 0.025em 0.06em 0.025em rgba(0, 0, 0, 0.12);
				&::after {
					background-position: 25% 50%;
					background: linear-gradient(var(--angle-2),
						rgba(255, 255, 255, 0) 0%,
						rgba(255, 255, 255, 0.3) 40% 50%,
						rgba(255, 255, 255, 0) 55%);
				}
			}
		}
	}
	@media (hover: none) and (pointer: coarse) {
		& button span::after,
		& button.pressed span::after {
			--angle-2: -45deg;
		}
		& button::after,
		& button:hover::after,
		& button.pressed::after {
			--angle-1: -75deg;
		}
	}
	&:has(button.active) .button-shadow {
		filter: blur(clamp(2px, 0.0625em, 6px));
		-webkit-filter: blur(clamp(2px, 0.0625em, 6px));
		-moz-filter: blur(clamp(2px, 0.0625em, 6px));
		-ms-filter: blur(clamp(2px, 0.0625em, 6px));
		transition: filter var(--anim--hover-time) var(--anim--hover-ease);
		&::after {
			top: calc(var(--shadow-cuttoff-fix) - 0.875em);
			opacity: 1;
		}
	}
	&:has(button.pressed) {
		transform: rotate3d(1, 0, 0, 25deg);
		& button {
			box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
				inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
				0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),
				0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
				0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),
				0 0.25em 0 0 rgba(255, 255, 255, 0.75),
				inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
			&span {
				text-shadow: .025em .06em .05em rgba(0, 0, 0, 0.12);
			}
		}
		& .button-shadow {
			filter: blur(clamp(2px, 0.125em, 12px));
			-webkit-filter: blur(clamp(2px, 0.125em, 12px));
			-moz-filter: blur(clamp(2px, 0.125em, 12px));
			-ms-filter: blur(clamp(2px, 0.125em, 12px));
			&::after {
				top: calc(var(--shadow-cuttoff-fix) - 0.5em);
				opacity: 0.75;
			}
		}
	}
}
.btn {
	position: absolute;
	z-index: 10;
	width: 3.5rem;
	height: 3.5rem;
	display:flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	opacity: .4;
	& > svg {
		position: relative;
		width: 80%;
		height: 80%;
		z-index: 10;
	}
	&.tl {
		top: 2rem;
		left: 2rem;
	}
	&.tr {
		top: 2rem;
		right: 2rem;
	}
	&.bl {
		bottom: 2rem;
		left: 2rem;
	}
	&.br {
		bottom: 2rem;
		right: 2rem;
	}
	&:before {
		content: "";
		position: absolute;
		inset: 0;
		width:0;
		height: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		/* background: rgba(255, 255, 255, .25); */
		z-index: 9;
	}
	&.active {
		opacity: 1;
	}
	&.active:before {
		width: 100%;
		height: 100%;
	}
}
.popup {
	position: fixed;
	z-index: 20;
	left: 2rem;
	right: 2rem;
	padding: 2rem;
	background: rgba(255, 255, 255, .25);
	border-radius: 1rem;
	backdrop-filter: blur(.4rem);
	-webkit-backdrop-filter: blur(.4rem);
	-moz-backdrop-filter: blur(.4rem);
	-ms-backdrop-filter: blur(.4rem);

	display: flex;
	flex-direction: column;
	&.tl{
		top: 6rem;
	}
	&.tr{
		top: 6rem;
	}
	&.bl{
		bottom: 6rem;
	}
	&.br{
		bottom: 6rem;
	}
}