*,
*::before,
*::after,
html {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
	appearance: none;
	text-decoration: none;
	scroll-behavior: smooth;
	perspective: 1000px;
}

/*////////////////// controls for pages */
body:has(.start) {
	header {
		ul {
			background-color: #33333318;
		}
	}

	overflow: hidden;
	.table {
		inset-inline: 4%;
		inset-block: -5%;
		/* outline: solid palegoldenrod; */
	}

	.table:hover .mainGrid {
		translate: none;
		translate: 0 9%;
	}

	.mainGrid {
		transform: rotateY(0deg) rotateX(50deg) scale(0.8);
	}

	&:has(.mid_2) .mainGrid > div:not(:nth-of-type(5)) {
		opacity: 0.5;
		pointer-events: none;
	}

	.mid_2 {
		.item {
			display: none;
		}
		.start-btn {
			outline: none;
			mix-blend-mode: difference;
			a {
				color: white;
				mix-blend-mode: difference;
			}
		}

		&:hover .start-btn {
			transform: scale(2.5) rotateX(-5deg);
			width: 25cqw;
			height: auto;
			a {
				box-shadow: 0 0 10px 10px rgb(191, 194, 218);
				/* border-radius: 40px; */
			}
		}
	}

	.menu {
		pointer-events: none;
		transform-origin: center;
		transform: rotate(90deg) !important;
		inset-block: unset;
		/* right:unset;
		left: -2%; */
		inset-inline: 0%;
		top: -68%;
		z-index: 100 !important;
		width: 100%;
		height: 100%;
	}

	.menu .aside_1 {
		transform: rotatey(-180deg) scale(0.98);
		transform-origin: right;
	}

	&:has(.table:hover) .aside_1 {
		transform: rotatey(-180deg);
		opacity: 0.8;
	}

	.menu .aside_2 {
		/* height: 100%; */
		width: 59%;
		ul,
		h2 {
			display: none;
		}
	}

	.menu .aside_2::after {
		content: "The book of potions";
		top: 48%;
		/* background-color: #fff; */
		display: flex;
		justify-content: center;
		height: fit-content;
		width: 100%;
		transform: rotate(-90deg) scale(3.5);
		font-size: 100%;
	}
}

header {
	color: white;
	position: sticky;
	top: 0;
	inset-inline: 0;
	display: grid;
	place-content: center;
	height: 4%;
}

header ul {
	background-color: #333;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 100%;
	padding-top: 0.5%;
	padding-inline-start: 2%;
}

header li {
	font-size: clamp(1rem, 30%, 3rem);
	/* width: 100%; */
	flex: 1;
	:hover {
		background-color: #d4d4d488;
	}
}

header li a {
	color: white;
	mix-blend-mode: multiply;
}

/* ///////////////main content  */
body:has(.pageOne) {
	.mainGrid
		> div:nth-of-type(-n + 2):not(:nth-of-type(6)):not(:nth-of-type(5)) {
		opacity: 0.1;
		pointer-events: none;
	}
}
body:has(.pageTwo)
	.mainGrid
	> div:nth-of-type(-n + 2):not(:nth-of-type(6)):not(:nth-of-type(5)) {
	opacity: 0.1;
	pointer-events: none;
}

body:has(.pageThree)
	.mainGrid
	> div:nth-of-type(-n + 1):nth-of-type(8):not(:nth-of-type(6)):not(
		:nth-of-type(5)
	) {
	opacity: 0.1;
	pointer-events: none;
}

body:has(.pageFour)
	.mainGrid
	> div:nth-of-type(-n + 2):not(:nth-of-type(3)):not(:nth-of-type(5)) {
	opacity: 0.1;
	pointer-events: none;
}

body {
	scrollbar-gutter: stable;
	/* position: relative; */
	/* width: 100%;
	height: 100%; */
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	overflow: hidden;
}

header {
	display: flex;
	position: absolute;
	top: 0;
	width: 100%;
	background-color: rgba(240, 255, 255, 0.43);
	z-index: 1;
}

main {
	/* display: flex; */
	position: relative;
	background-color: palegoldenrod;
	height: 100dvh;
	width: 100dvw;
	background-image: url("/assests/download.png");
	background-position: center;
	background-size: cover;
}

/*//////////////// tabel of mixing */

.table {
	position: absolute;
	top: 8%;
	right: 50%;
	left: -16%;
	bottom: 8%;
	z-index: 0;
	/* background-color: peachpuff; */
	/* background-color:rgba(0, 0, 0, 0.874); */
	/* transform: scale3d(1 ,1 , 1); */
	/* perspective: 1000px; */

	padding: 1rem;
	color: white;
	transition: 1s;
	gap: 1rem;

	display: grid;
	grid-template-columns:
		[side-start]
		1fr
		[mid-start]
		1fr
		[mid-end]
		1fr
		[side-end];

	grid-template-rows:
		[side-start]
		1fr
		[mid-start]
		1fr
		[mid-end]
		1fr
		[side-end];

	@starting-style {
		inset-inline: 4%;
		inset-block: 0;
		color: white;
	}

	&:hover,
	&:focus-within {
		left: 0;
		right: 40%;
		perspective: 1800px;
		z-index: 3;
	}

	&:hover .mainGrid {
		translate: 4% 0;
	}

	&:has(:hover) section.menu {
		transform: rotateY(-25deg) rotateX(65deg) scale(0.6);
	}
}

/* //////////////////////// top row  */
.table {
	&:has(.top_1:is(:hover, :focus-within)) {
		/* background-color:#21C979; */
		grid-template-columns: 2.5fr 1fr 1fr;
		grid-template-rows: 2.5fr 1fr 1fr;
	}
	:is(:hover, :focus-within) &:has(.top_2:is(:hover, :focus-within)) {
		/* background-color:blue; */
		grid-template-columns: 1fr 2.5fr 1fr;
		grid-template-rows: 2.5fr 1fr 1fr;
	}
	&:has(.top_3:is(:hover, :focus-within)) {
		/* background-color:#EDA48D; */
		grid-template-columns: 1fr 1fr 2.5fr;
		grid-template-rows: 2.5fr 1fr 1fr;
	}
}

/* ////////////////// mid row */
.table {
	&:has(.mid_1:is(:hover, :focus-within)) {
		/* background-color:green; */
		grid-template-columns: 2.5fr 1fr 1fr;
		grid-template-rows: 1fr 2.5fr 1fr;
	}
	&:has(.mid_2:is(:hover, :focus-within)) {
		/* background-color:blue; */
		grid-template-columns: 1fr 5fr 1fr;
		grid-template-rows: 1fr 5fr 1fr;
	}
	&:has(.mid_3:is(:hover, :focus-within)) {
		/* background-color:yellow; */
		grid-template-columns: 1fr 1fr 2.5fr;
		grid-template-rows: 1fr 2.5fr 1fr;
	}
}
/* //////////////// lower row */
.table {
	&:has(.down_1:is(:hover, :focus-within)) {
		/* background-color:green; */
		grid-template-columns: 2.5fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 2.5fr;
	}
	&:has(.down_2:is(:hover, :focus-within)) {
		/* background-color:blue; */
		grid-template-columns: 1fr 2.5fr 1fr;
		grid-template-rows: 1fr 1fr 8fr;
	}
	&:has(.down_3:is(:hover, :focus-within)) {
		grid-template-columns: 1fr 1fr 2.5fr;
		grid-template-rows: 1fr 1fr 2.5fr;
	}
}

.mid_2 {
	position: relative;

	/* background-image: url(/public/assests/b8d6e6308676378220fb181bb48a15ae.gif); */
	background-image: url("/assests/bed2591f723244f07bc4bf382f97103c.gif");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	border-radius: 40%;
}

.mainGrid {
	/* position: absolute; */
	/* inset: 6dvh; */
	grid-column: 1/-1;
	grid-row: 1/-1;
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	z-index: 0;
	transition: 1s ease-in-out 0.1s;
	border-radius: 100px;

	transform: rotateY(20deg) rotateX(30deg) scale(0.8);

	@starting-style {
		transform: rotateY(0deg) rotateX(10deg) scale(1);
		transform: rotateY(0deg) rotateX(50deg) scale(1);
	}

	&:hover,
	&:focus-within {
		transform: rotateY(5deg) rotateX(30deg) scale(1);
		transform: rotateY(0deg) rotateX(0deg) scale(1);
		z-index: 3;

		> div:nth-of-type(n) label img {
			opacity: 1;
		}
	}
	/* background image */
	> img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		/* z-index: -1; */
		pointer-events: none;
		/* outline: solid red; */
		mix-blend-mode: overlay;
		opacity: 0.2;
		scale: 1.01;
		/* animation: slow-rotate 30s infinite; */
	}
}

.mainGrid div:nth-of-type(n) {
	display: grid;
	place-items: center;
	font-size: 3rem;
	outline: solid lightslategrey;

	/* position:absolute;
	  inset: 20dvw; */
	/*   box-shadow: 0px 0px 50px 5px black; */

	/*   width:100%; */
	/*   grid-column: mid; */
}

.mainGrid fieldset {
	position: relative;
	filter: blur(5px);
	transition: 0.5s ease-out;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
}

.mainGrid:is(:hover, :focus-within) fieldset {
	filter: blur(0px);
}

.mainGrid div:nth-of-type(n) label {
	position: sticky;
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	place-content: center;
	/* justify-items: center;
	align-content: center; */
	/* outline: solid blue; */
	width: clamp(2rem, 50%, 4rem);
	/* height: max-content; */
}

.mainGrid div:nth-of-type(n) label:has(input:checked) {
	background-color: var(--ingredient_color);
}

.mainGrid div:nth-of-type(n) label img {
	aspect-ratio: 1;
	width: clamp(2rem, 90%, 4rem);
	/* width: 100%; */
	opacity: 0.1;
}

/* .mainGrid > div:nth-of-type(-n + 8):not(:nth-of-type(6)):not(:nth-of-type(5)) {
	opacity: .1;
	pointer-events: none;
	
} */

/* /////////////////////////////////////cauldron */
.mid_2 {
	position: relative;
}

.mid_2 .item {
	/* outline:solid red; */
	position: absolute;
	top: 45%;
	left: 48%;
	width: 50px;
	height: 50px;
	outline: none !important;
	transform: translateX(-100px);
	/* for text */
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 30px;
	color: #fff;
	animation: arc-move-anim 14s linear infinite;
	/* use */
	.fast-rotate & {
		animation-duration: 0.6s;
	}
}

.i1 {
	--animation-p: -100px;
	--animation-m: translateX(var(--animation-p));
	--animation-t: 1turn;
	--animation-te: calc(var(--animation-t) * -1);
}
.i2 {
	--animation-p: 100px;
	--animation-m: translateX(var(--animation-p));
	--animation-t: 1turn;
	--animation-te: calc(var(--animation-t) * -1);
}
.i3 {
	--animation-p: -100px;
	--animation-m: translateY(var(--animation-p));
	--animation-t: 360deg;
	--animation-te: calc(var(--animation-t) * -1);
}
.i4 {
	--animation-p: 100px;
	--animation-m: translateY(var(--animation-p));
	--animation-t: 360deg;
	--animation-te: calc(var(--animation-t) * -1);
}

.mid_2 div:has(button) {
	width: clamp(1rem, 50%, 7rem);
	height: clamp(1rem, 50%, 7rem);
	border-radius: 50%;
	outline: none !important;

	button {
		color: #fff;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		font-size: clamp(1rem, 50%, 7rem);
		background-color: transparent;
		border: none;
		backdrop-filter: blur(10px);
		pointer-events: fill;
		cursor: pointer;
		transition: 1.2s ease-in-out;
		&:hover {
			background-color: #ffffff96;
			color: #333;
		}
	}
}

/* //////////////////////// - Sidebar */

.menu {
	/* outline: solid rgb(94, 255, 0); */
	position: absolute;
	width: min-content;
	height: 100%;
	inset-block: 2dvh;
	right: 5%;
	display: grid;
	grid-auto-flow: column;
	gap: 2%;
	scale: 0.9;
	transition: 0.5s;
	transition-property: transform;
	/* transform-style:preserve-3d; */
}

aside {
	background-color: rgb(116, 181, 119);
	/* outline: solid red; */
	transition: 0.9s cubic-bezier(0.6, -0.28, 0.35, 0.57);
	transition-property: opacity, transform;
	transform-origin: right;

	height: clamp(52rem, 100%, 90dvh);
	width: 25rem;
	/* backdrop-filter: blur(20px); */
	background-image: url("/assests/6d8e9a750b08665e11dc11e8e8bdec29.jpg");
}

/* //////////// sidebar ingridients list  */

.aside_1 {
	position: relative;
	z-index: 0;
	transition: 1.3s;
}

.aside_1 > ul {
	position: relative;
	display: flex;
	flex-direction: column;
	/* gap:1%; */
	overflow-y: scroll;
	overflow-x: auto;
	height: 96%;
	scrollbar-width: none;
	-webkit-scrollbar-width: none;

	&:hover {
		scrollbar-width: thin;
	}

	/* scroll-snap-type: mandatory; */
	/* background-color: #EDA48D; */
}

.aside_1 li {
	position: relative;
	padding-block: 8%;
	padding-inline: 3%;
	height: 220px;
	/* outline: 1px solid; */

	&:hover {
		/* translate: -100px 0; */
		background-color: rgba(118, 118, 118, 0.329);
	}
}

.aside_1 img {
	/* display: none; */
	position: relative;

	/* filter: brightness(70%); */
	object-fit: fill;
	object-position: center;
	max-height: 100%;
	max-width: fit-content;
	aspect-ratio: 1/1;
	/* scale: 2; */
}

/* //////// css item select for aside 1  */
/* body:has(.aside_1 ul > li:nth-last-of-type(n)[data-value="0"]:is(:hover, :focus-within))  .mainGrid  label[data-value="0"]{
	position: relative;
	background-color: palegoldenrod;
	box-shadow: 1px 1px 77px 90px rgba(238, 232, 170, 0.511);
	animation: float 3s .5s;
}  */
/* body:has(.aside_1 ul > li:nth-last-of-type(n)[data-value="1"]:hover)  .mainGrid  label[data-value="1"]{
	background-color: powderblue;
	box-shadow: 1px 1px 77px 90px rgba(176, 224, 230, 0.377);
	animation: float 3s .5s;
}  */
/* body:has(.aside_1 ul > li:nth-last-of-type(n)[data-value="2"]:hover)  .mainGrid  label[data-value="2"]{
	background-color: palevioletred;
	box-shadow: 1px 1px 77px 90px rgba(216, 112, 147, 0.534);
	animation: float 3s .5s;
}  */

/* //////////// sidebar potions list  */

.aside_2 {
	position: relative;
	z-index: 0;
}

.aside_2::after {
	content: "";
	position: absolute;
}

.aside_2 > ul {
	position: relative;
	display: grid;
	grid-auto-flow: row;
	grid-auto-rows: 32%;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 96%;
	scrollbar-width: none;
	-webkit-scrollbar-width: none;
}

.aside_2 li {
	position: relative;
	width: 100%;
	max-height: fit-content;
	object-position: center;
	object-fit: cover;
	container-name: list;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-top: 0.1px solid;
	padding-inline: 3%;

	:nth-child(n) {
		/* outline: solid plum; */
	}
}

.aside_2 li h2 {
	width: fit-content;
	margin-block: 1%;
}

.aside_2 li img {
	width: 43cqw;
	height: 50%;
	/* transform:translateZ(300px)rotate3d(0,0,30deg) rotateX(50deg); */
	transform-origin: bottom;
	transition: 0.5s ease-out;
	transition-property: transform, filter;
	z-index: 3;
	object-fit: cover;
	object-position: center;
}

/* item select for aside 2 */ /* can be used to find where ingridients for the potion are */

/* body:has(.aside_2 ul > li:nth-of-type(1):is(:hover, :focus-within))  .mainGrid  label:is([data-value="19"],[data-value="11"]){
	position: relative;
	box-shadow: 1px 1px 77px 90px rgba(238, 232, 170, 0.153);
	border-radius: 50%;		
	height: fit-content;
	animation: float-1 1s .5s;
}  */

/* page logic */
.page {
	perspective: 1800px;

	&:has(.table:hover) .aside_1 {
		transform: rotatey(-45deg);
		background-color: rgba(216, 112, 147, 0.312);
		opacity: 0.8;
		z-index: 0;
	}

	&:has(.mainGrid:is(:hover, :focus-within)) .aside_1 {
		/* opacity: 0; */
		transform: rotatey(-180deg) scale(0.98);
		z-index: 0;
		background-color: palevioletred;
	}

	&:has(.mainGrid:hover) .menu {
		transform: rotateY(-30deg) rotateX(10deg) scale(0.9);
		z-index: 0;

		/* .aside_1::after,.aside_2::after{
			content: "";
			background-color: #EDA48D;
			inset: 0;
			z-index: -1;
			filter: blur(.9px);
		} */

		.aside_2 img {
			transform: rotateY(-31deg) rotateX(-6deg) rotateZ(22deg) scale(1.1)
				skew(24deg, -15deg);
			filter: drop-shadow(5mm 4mm 2mm rgba(69, 66, 66, 0.419));
			z-index: 3;
			animation: float 6s ease-in-out 2s infinite;
		}
	}
}

.page:has(.menu:is(:hover, :focus-within)) .table {
	z-index: 0;
	filter: blur(1px);
}

/* anmitions and toggle classes */

.check::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* background-color: rgba(0, 128, 0, 0.358); */
	outline: 2px;
	outline-offset: 0px;
	animation: check 2s ease forwards;
}

.menu-flip {
	/* animation: flip 2s forwards 10ms; */
	transition: 0.7s ease-in-out;
	@starting-style {
		pointer-events: none;
		transform: translateY(-300px) translateX(-50%) rotate(90deg);
		inset-block: unset;
		right: unset;
		top: -42%;
		left: 32%;
		z-index: 100;
	}

	.aside_1 {
		@starting-style {
			transform: rotatey(-180deg) scale(0.98);
			z-index: 0;
		}
	}
}

.itemSelect {
	background-color: powderblue;
	box-shadow: 1px 1px 77px 90px rgba(176, 224, 230, 0.377);
	/* animation: float 1s .5s; */
	transition: 0.5s;
	z-index: 0;
	/* scale: .4; */
}

.fast-rotate {
	background-color: aqua;
}
@keyframes check {
	0% {
		outline: solid transparent;
	}

	50% {
		outline: solid yellowgreen;
		outline-offset: 5px;
	}
	100% {
		outline: yellowgreen;
		outline-offset: -9px;
	}
}

@keyframes flip {
	to {
		transform: rotate(-90deg);
	}
}

@keyframes float {
	0% {
		transform: translateY(0px) rotateY(-31deg) rotateX(-5deg) rotateZ(22deg)
			scale(1.1) skew(24deg, -15deg);
	}
	15%,
	60%,
	85% {
		transform: translateY(3px) rotateY(-33deg) rotateX(-6deg) rotateZ(22deg)
			scale(1.1) skew(24deg, -15deg);
	}
	25%,
	75% {
		transform: translateY(-13px) rotateY(-35deg) rotateX(-7deg) rotateZ(22deg)
			scale(1.1) skew(24deg, -15deg);
	}

	50% {
		transform: translateY(-10px) rotateY(-31deg) rotateX(-6deg) rotateZ(22deg)
			scale(1.1) skew(24deg, -15deg);
	}
	100% {
		transform: translateY(0px) rotateY(-31deg) rotateX(-5deg) rotateZ(22deg)
			scale(1.1) skew(24deg, -15deg);
	}
}

@keyframes float-1 {
	0% {
		transform: translateY(0px) rotateY(-31deg) rotateZ(22deg) scale(1.1)
			skew(24deg, -15deg);
	}
	15%,
	60%,
	85% {
		transform: translateY(3px) rotateY(-33deg) rotateZ(22deg) scale(1.1)
			skew(24deg, 15deg);
	}
	25%,
	75% {
		transform: translateY(-13px) rotateY(-35deg) rotateZ(22deg) scale(1.1)
			skew(24deg, 15deg);
	}

	50% {
		transform: translateY(-10px) rotateY(-31deg) rotateZ(22deg) scale(1.1)
			skew(24deg, 15deg);
	}
	100% {
		transform: translateY(0px) rotateY(-31deg) rotateZ(22deg) scale(1.1)
			skew(24deg, -15deg);
	}
}

/* slow rotate */
@keyframes slow-rotate {
	from {
		transform: rotateZ(0deg);
	}
	to {
		transform: rotateZ(360deg);
	}
}

/* arc moving  */

@keyframes arc {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(180deg);
	}
}

/* cauldron stirring  */

@keyframes arc-move-anim {
	0% {
		transform: rotate(0deg) var(--animation-m) rotate(0deg);
	}

	/* 50%{
		transform: rotate(0deg) var(--animation-m) rotate(0deg);
	} */

	100% {
		transform: rotate(var(--animation-t)) var(--animation-m)
			rotate(var(--animation-te));
	}
}