@layer base, phone, threedee;

@layer threedee {
	.phone {
		perspective: 100vh;
	}
	
	.phone, .phone * {
		transform-style: preserve-3d;
		transition: transform 0.5s ease;
	}
	
	.phone:hover {
		overflow: visible;
		transform: translate(0, 10vh) rotateY(30deg) rotateX(40deg);
			box-shadow: -1vh 1vh 5vh rgb(0 0 0 / 0.25);
		
		.app {
			transform: translate3d(4vh, -4vh, 5vh);
		}
		.chrome {
			box-shadow: -1vh 1vh 5vh rgb(0 0 0 / 0.25);
		}

		.backdrop {
			transform: translate3d(4vh, -4vh, 5vh);
			box-shadow: -1vh 1vh 5vh rgb(0 0 0 / 0.25);
		}

		.popover, .contextmenu {
			transform: translate3d(6vh, -6vh, 0vh);
			box-shadow: -1vh 1vh 5vh rgb(0 0 0 / 0.25);
		}
	}
	
	.phone:hover:not(:has(:hover)),
	.chrome:hover:not(:has(:hover)),
	.backdrop:hover:not(:has(:hover)),
	.popover:hover,
	.contextmenu:hover {
		outline: 2px solid gold;
	}
}

@layer phone {
	.phone {
		height: 80vh;
		aspect-ratio: 1170 / 2532;

		border: 1vh solid;
		border-radius: 3vh;
		overflow: clip;

		&::before {
			content: "";
			position: absolute;
			height: 4vh;
			width: 20vh;
			left: 50%;
			translate: -50% 0;
			border-radius: 0 0 2vh 2vh;
			background: black;
			z-index: 2;
		}
	}

	.phone, .app {
		display: grid;

		> * {
			grid-area: 1 / 1;
		}
	}
	
	.app {
		background: #ccc;
	}

	.chrome {
		background: url(./details.png) no-repeat 50% 50% / cover;
	}

	.backdrop {
		background: rgb(0 0 0 / 0.5);
		backdrop-filter: blur(10px);

		display: grid;
		place-content: center;
		align-content: center;
		gap: 2vh;
		padding: 5%;
	}

	.popover {
		border-radius: 2vh;
		overflow: clip;

		img {
			width: 100%;
			height: auto;
			display: block;
		}
	}

	.contextmenu {
		background: rgb(255 255 255 / 0.8);
		width: fit-content;
		border-radius: 2vh;

		justify-self: end;

		ul {
			list-style: none;
			margin: 0;
			padding: 0;

			li {
				padding: 0.75em 1.25em;

				&:has(hr) {
					padding: 0;
					border-top: 1px solid;
				}
			}

			hr {
				display: none;
			}
		}
	}
}

@layer base {
	html, body {
		height: 100%;
		width: 100%;
	}

	html {
		font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		font-size: 1.75vh;
	}

	body {
		display: grid;
		place-content: center;
	}
}