@import url('fonts/mamelon3.css');

body, html {
	font-family: Mamelon, cursive, sans-serif;
	font-display: swap;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: hidden;
	height: 100vh;
	touch-action: none;
}

body {
	position: relative;
}

html {
	background-color: #fdf9f9;
	background-image: url(img/nanahi-bg-svg.svg);
	background-size: 100vw;

	--radius: 90vh;
	--scale: 0.5;
	--rotation: 0deg;
}

.collabs {
	display: block;
	/* position: absolute; */
	top: 0;
	left: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	perspective: 400vh;
	transform-style: preserve-3d;
}

.collabs > div {
	/* min-width: 40ch; */
	max-width: 100%;
	position: relative;
	overflow: hidden;
	border-radius: 1vh;
	margin: 1vh;
	flex-grow: 0;
	flex-shrink: 0;
	background-color: rgba(255, 255, 255, 0.8);
}

.collabs > div.z3d {
	position: absolute;
	max-width: none;
	backface-visibility: hidden;
}

.collabs > .backface {
	position: absolute;
	max-width: none;
	backface-visibility: hidden;
	display: block;
	background-color: #e6e6e6;
	background-image: url(./img/Confetto.png);
	background-size: 40% auto;
	background-repeat: no-repeat;
	background-position: center;
}

.collabs > div.w1 { width: 10vh; }
.collabs > div.w2 { width: 20vh; }
.collabs > div.w3, .collabs > .music { width: 30vh; }
.collabs > div.w4 { width: 40vh; }
.collabs > div.w5 { width: 50vh; }
.collabs > div.w6 { width: 60vh; }
.collabs > div.w7 { width: 70vh; }
.collabs > div.w8 { width: 80vh; }
.collabs > div.w9 { width: 90vh; }
.collabs > div.w10 { width: 100vh; }

.collabs > div.h1 { height: 10vh; }
.collabs > div.h2 { height: 20vh; }
.collabs > div.h3, .collabs > .music { height: 30vh; }
.collabs > div.h4 { height: 40vh; }
.collabs > div.h5 { height: 50vh; }
.collabs > div.h6 { height: 60vh; }
.collabs > div.h7 { height: 70vh; }
.collabs > div.h8 { height: 80vh; }
.collabs > div.h9 { height: 90vh; }
.collabs > div.h10 { height: 100vh; }

.collabs > div > .author {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.4);
	color: white;
	padding: 0.5vh 1vh;
	font-size: 2rem;
}

.collabs > div > .author:before,
.fullscreen-focus > .author:before {
	display: inline;
	content: "by ";
}

.collabs > div {
	--scale: 1;
}

.collabs > div:hover {
	--scale: 1.05;
}

.fullscreen-focus {
	background-color: white;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	overflow: auto;
	touch-action: manipulation;
}

.fullscreen-focus > .author {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1rem;
	z-index: 10;
	background-color: #fdf9f9;
	color: black;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
	padding: 1rem;
	border-bottom-right-radius: 2rem;
}

.fullscreen-focus > .close {
	position: fixed;
	top: 1em;
	right: 1em;
	width: 2em;
	height: 2em;
	margin: 0;
	padding: 0;
	background-color: #fdf9f9;
	color: black;
	border-radius: 100%;
	z-index: 100;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.fullscreen-focus > .close:before {
	content: "🗙";
	display: block;
	width: 2em;
	height: 2em;
	margin: 0;
	padding: 0;
	line-height: 1.8em;
	text-align: center;
}

.fullscreen-focus.game {
	overflow: hidden;
}

.fullscreen-focus.music audio {
	display: block;
	width: 50%;
	min-width: 300px;
	margin: 50vh auto;
}

.fullscreen-focus.game > .thumbnail { display: none; }
.fullscreen-focus.game > iframe {
	display: block !important;
	width: 100%;
	height: 100%;
}

.fullscreen-focus.image {
	text-align: center;
}

.fullscreen-focus.image > img {
	max-width: 100vw;
	max-height: 100vh;
	margin: auto;
}

.collabs > .image > img,
.collabs > .game > .thumbnail {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.collabs > .game > iframe {
	width: 100%;
	height: 100%;
}

.collabs > .music {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M21,3V15.5A3.5,3.5 0 0,1 17.5,19A3.5,3.5 0 0,1 14,15.5A3.5,3.5 0 0,1 17.5,12C18.04,12 18.55,12.12 19,12.34V6.47L9,8.6V17.5A3.5,3.5 0 0,1 5.5,21A3.5,3.5 0 0,1 2,17.5A3.5,3.5 0 0,1 5.5,14C6.04,14 6.55,14.12 7,14.34V6L21,3Z' /%3E%3C/svg%3E");
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
}

.collabs > .music > audio {
	display: none;
}

body > h1 {
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100vw;
	padding: 1em;
	margin: 0;
	box-sizing: border-box;
}

#loadingscreen .circle {
	border-radius: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#loadingscreen .circle:before {
	display: block;
	content: "";
	width: 100%;
	padding-top: 100%;
}

#loadingscreen .loading {
	text-align: center;
	font-size: 40pt;
	padding: 0;
	margin: 0;
	padding-top: 50vh;
	line-height: 0;
}

#loadingscreen .loading .loading-image {
	margin: auto;
	left: 0;
	right: 0;
	text-align: center;
	position: absolute;
	margin-top: 1em;
	/* transform: translate(-50%, -100%); */
}

#loadingscreen .loading .loading-image img {
	position: absolute;
	height: 25vh;
	transform: translateX(-50%);
}

#loadingscreen .loading .loading-image .i1 {
	animation: img_toggle 2s steps(1) infinite;
}

#loadingscreen .loading .loading-image .i2 {
	animation: img_toggle 2s steps(1) infinite 1s;
}

@keyframes img_toggle {
	0% { opacity: 0; }
	50% { opacity: 1; }
}

#loadingscreen h1 {
	display: none;
}

#loadingscreen.loaded {
	animation: hidefull 0.3s ease-out 6s;
	animation-fill-mode: both;
}

@keyframes hidefull {
	from { opacity: 1; }
	to { opacity: 0; }
}

#loadingscreen.loaded .stripes1,
#loadingscreen.loaded .stripes2,
#loadingscreen.loaded .stripes3 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100vmax;
	height: 100vmax;
	transform-origin: center center;

	background: repeating-linear-gradient(90deg, transparent 0vmax, transparent 1vmax, white 1vmax, white 4vmax);
	animation: stripes1 6s linear;
	animation-fill-mode: both;
	z-index: 20;
}

#loadingscreen.loaded .stripes2 {
	background: repeating-linear-gradient(90deg, #FECCDF 0vmax, #FECCDF 1vmax, transparent 1vmax, transparent 4vmax);
	animation-name: stripes2;
}

#loadingscreen.loaded .stripes3 {
	animation-name: stripes3;
}

#loadingscreen.loaded .loading {
	display: none;
}

#loadingscreen.loaded h1 {
	display: block;
	position: absolute;
	top: 50vh;
	left: 50vw;
	width: 100vw;
	max-width: 10ch;
	transform: translate(-50%, -50%);
	animation: title 6s linear;
	animation-fill-mode: both;
	z-index: 10;
	margin: 0;
	padding: 0;
	font-size: 10vh;
}

#loadingscreen.loaded .circle1 {
	background-color: #FECCDF;
	animation: circle1 6s linear;
	animation-fill-mode: both;
}

#loadingscreen.loaded .circle2 {
	background-color: #FEF8AD;
	animation: circle2 6s linear;
	animation-fill-mode: both;
}

#loadingscreen.loaded .circle3 {
	background-color: #A9FFD4;
	animation: circle3 6s linear;
	animation-fill-mode: both;
}

@keyframes circle1 {
	0% { width: 0; }
	7.5% { width: 80vmax; }
	20% { width: 150vmax; opacity: 1; }
	25% { opacity: 0; }
	100% { width: 150vmax; opacity: 0; }
}

@keyframes circle2 {
	0% { width: 0; }
	5% { width: 0; }
	12.5% { width: 80vmax; }
	22.5% { width: 150vmax; opacity: 1; }
	25% { opacity: 0; }
	100% { width: 150vmax; opacity: 0; }
}

@keyframes circle3 {
	0% { width: 0; }
	10% { width: 0; }
	15% { width: 80vmax; }
	25% { width: 150vmax; }
	27.5% { opacity: 1; }
	100% { width: 150vmax; opacity: 1; }
}

@keyframes stripes1 {
	0% {
		opacity: 0;
	}
	70% { opacity: 0; transform: scale(4) rotate(-22.5deg) translateY(100vmax); }
	73% { opacity: 1; }
	80% { transform: scale(4) rotate(-22.5deg) translateY(100vmax); }
	90% { opacity: 1; transform: scale(4) rotate(-22.5deg) translateY(0); }
	100% { opacity: 1; transform: scale(4) rotate(-22.5deg) translateY(0); }
}

@keyframes stripes2 {
	0% {
		opacity: 0;
	}
	70% { opacity: 0; transform: scale(4) rotate(-22.5deg); }
	73% { opacity: 1; }
	80% { transform: scale(4) rotate(-22.5deg); }
	90% { opacity: 1; transform: scale(4) rotate(-22.5deg) translateY(100vmax); }
	100% { opacity: 1; transform: scale(4) rotate(-22.5deg) translateY(100vmax); }
}

@keyframes stripes3 {
	0% {
		opacity: 0;
	}
	70% { opacity: 0; transform: scale(4) rotate(-22.5deg) translateY(100vmax); }
	73% { opacity: 1; }
	80% { transform: scale(4) rotate(-22.5deg) translateY(100vmax); }
	90% { opacity: 1; transform: scale(4) rotate(-22.5deg) translateY(0); }
	96% { opacity: 1; transform: scale(4) rotate(-22.5deg) translateY(0); }
	100% { opacity: 1; transform: scale(4) translateX(-2vmax) rotate(-22.5deg) translateY(0); }
}

@keyframes title {
	0% { display: none; opacity: 0; }
	22% { display: none; opacity: 0; }
	24% { display: block; opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
	25% { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); }
	55% { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); }
	60% { display: block; opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
	100% { display: block; opacity: 0; transform: translate(-50%, -50%) scale(1); }
}