/* CSS RESET */

*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
body {min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5;}
a:not([class]) {text-decoration-skip-ink: auto;}
input, button, textarea, select {font: inherit;}



/* GENERAL */

.display-none {
	display: none;
}

html {
	font-size: calc(min(calc(100vw / 16), calc(100vh / 9)) / 120);
}

body {
	display: grid;
	place-content: center;
	background-color: black;
	/* overflow: hidden; */
	cursor: url(./../img/misc/kurzor-vychozi.png), default;
}

.compatibility {
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px;
	background-color: white;
	color: black;
	font-size: 20px;
	z-index: 1000;
}

.wrapper {
	position: relative;
	width: 1920rem;
	height: 1080rem;
	background-color: whitesmoke;
	background-color: #aeaeae; /* prozatím */
	overflow: hidden;
	user-select: none;
}

.scenes {
	position: relative;
	display: flex;
	width: 1920rem;
	height: 1080rem;
}

.scene {
	position: absolute;
	display: flex;
	width: 1920rem;
	height: 1080rem;
	opacity: 1;
	transition: opacity 0.75s ease-in-out 0.75s;
}

.scene[data-hide-scene="true"] {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.75s ease-in-out 0s;
}

.base-img {
	width: 1920rem;
	height: 1080rem;
}

.decoration-img {
	position: absolute;
	top: 0rem;
	left: 0rem;
	width: 200rem;
	height: auto;
	transition: opacity .5s ease;
}

.detector-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 1920rem;
	height: 1080rem;
}

area {
	cursor: url(./../img/misc/kurzor-rukavice.png) 9 1, pointer;
}

.inventory {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	gap: 10rem;
	padding: 10rem;
	width: 1920rem;
	height: 120rem;
	background-color: #0e0e0e50;
	transform: translateY(100%);
	transition: transform 0.2s ease-in;
}

.inventory[data-inventory-open="true"] {
	transform: translateY(0%);
	transition: transform 0.2s ease-out;
}

.inventory-item {
	width: auto;
	height: 100%;
	cursor: url(./../img/misc/kurzor-rukavice.png) 9 1, pointer;
}

.inventory-item[data-inventory-item-show="false"] {
	display: none;
}

.click-disabler {
	position: absolute;
}

.click-disabler[data-click-disabler-active="true"] {
	inset: 0;
}

.img-loading-screen {
	position: absolute;
	display: grid;
	place-content: center;
	background-color: #000000cc;
	color: white;
	font-size: 32rem;
	transition: opacity 1s ease 3s;
	opacity: 0;
}

.img-loading-screen[data-img-loading-screen-active="true"] {
	inset: 0;
	opacity: 1;
}

.coords-calculation-screen {
	position: absolute;
	display: grid;
	place-content: center;
	background-color: #000000cc;
	color: white;
	font-size: 32rem;
	transition: opacity 1s ease 1s;
	opacity: 0;
}

.coords-calculation-screen[data-coords-calculation-screen-active="true"] {
	inset: 0;
	opacity: 1;
}



/* CURSORS */

.kurzor-doleva {
	cursor: url('./../img/misc/kurzor-doleva.png') 9 2, default;
}

.kurzor-nahoru {
	cursor: url('./../img/misc/kurzor-nahoru.png') 2 9, default;
}

.kurzor-doprava {
	cursor: url('./../img/misc/kurzor-doprava.png') 49 9, default;
}

.kurzor-dolu {
	cursor: url('./../img/misc/kurzor-dolu.png') 9 49, default;
}

.force-cursor .kurzor-doleva,
.force-cursor .kurzor-doprava,
.force-cursor .kurzor-dolu,
.force-cursor .kurzor-nahoru,
.force-cursor area,
.force-cursor .inventory-item {
	cursor: inherit;
}



/* ANIMTATION */

[data-id="chodba-teta-leva"],
[data-id="chodba-teta-sukne"],
[data-id="chodba-teta-telo"],
[data-id="chodba-teta-prava"] {
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes teta-pohyb {
	0% {opacity: 1; transform: translateX(-280rem);}
	100% {opacity: 1; transform: translateX(500rem);}
}

@keyframes teta-leva-ruka {
	0% {opacity: 1; transform: rotate(0); transform-origin: 19rem 20rem; left: 347rem;}
	10% {transform: rotate(-12deg);}
	30% {transform: rotate(12deg);}
	50% {transform: rotate(-12deg);}
	70% {transform: rotate(12deg);}
	90% {transform: rotate(-12deg);}
	100% {opacity: 1; transform: rotate(0); transform-origin: 19rem 20rem; left: 1127rem;}
}

@keyframes teta-sukne-houp {
	0% {top: 702rem; left: 500rem;}
	8% {top: 708rem;}
	16% {top: 702rem;}
	24% {top: 708rem; left: 506rem;}
	30% {top: 702rem;}
	36% {top: 708rem;}
	43% {top: 702rem; left: 499rem;}
	50% {top: 708rem;}
	57% {top: 702rem;}
	64% {top: 708rem;}
	69% {top: 702rem;}
	75% {top: 708rem;}
	81% {top: 702rem;}
	86% {top: 708rem; left: 510rem;}
	90% {top: 702rem;}
	94% {top: 708rem;}
	100% {top: 702rem; left: 500rem;}
}

@keyframes teta-telo-houp {
	0% {top: 351rem;}
	8% {top: 356rem;}
	16% {top: 351rem;}
	24% {top: 356rem;}
	30% {top: 351rem;}
	36% {top: 356rem;}
	43% {top: 351rem;}
	50% {top: 356rem;}
	57% {top: 351rem;}
	64% {top: 356rem;}
	69% {top: 351rem;}
	75% {top: 356rem;}
	81% {top: 351rem;}
	86% {top: 356rem;}
	90% {top: 351rem;}
	94% {top: 356rem;}
	100% {top: 351rem;}
}

@keyframes teta-prava-ruka {
	0% {opacity: 1; transform: rotate(0); top: 523rem; transform-origin: 20rem 20rem; left: 318rem;}
	8% {transform: rotate(12deg); top: 530rem;}
	16% {top: 523rem;}
	24% {top: 530rem;}
	29% {transform: rotate(-12deg);}
	30% {top: 523rem;}
	36% {top: 530rem;}
	43% {top: 523rem;}
	49% {transform: rotate(12deg);}
	50% {top: 530rem;}
	57% {top: 523rem;}
	64% {top: 530rem;}
	68% {transform: rotate(-12deg);}
	69% {top: 523rem;}
	75% {top: 530rem;}
	81% {top: 523rem;}
	86% {top: 530rem;}
	88% {transform: rotate(12deg);}
	90% {top: 523rem;}
	94% {top: 530rem;}
	100% {opacity: 1; transform: rotate(0); top: 523rem; transform-origin: 20rem 20rem; left: 1098rem;}
}

[data-id="hodinky-kratka"].anim1 {
	animation: 10s cubic-bezier(0.79, 1.06, 1, 1) hodinky-mala-rucicka-1;
	transform: rotate(66deg);
}
[data-id="hodinky-dlouha"].anim1 {
	animation: 10s cubic-bezier(0.79, 1.06, 1, 1) hodinky-velka-rucicka-1;
	transform: rotate(396deg);
}
@keyframes hodinky-mala-rucicka-1 {
	0% {transform: rotate(38deg);}
	100% {transform: rotate(66deg);}
}
@keyframes hodinky-velka-rucicka-1 {
	0% {transform: rotate(161deg);}
	100% {transform: rotate(396deg);}
}

[data-id="hodinky-kratka"].anim2 {
	animation: 20s cubic-bezier(0.6, 0.01, 0.61, 0.32) hodinky-mala-rucicka-2;
	transform: rotate(-90deg);
}
[data-id="hodinky-dlouha"].anim2 {
	animation: 20s cubic-bezier(0.6, 0.01, 0.61, 0.32) hodinky-velka-rucicka-2;
	transform: rotate(-800deg);
}
@keyframes hodinky-mala-rucicka-2 {
	0% {transform: rotate(66deg);}
	100% {transform: rotate(-240deg);}
}
@keyframes hodinky-velka-rucicka-2 {
	0% {transform: rotate(396deg);}
	100% {transform: rotate(-4000deg);}
}

[data-id="titulky-negativ"] {
	clip-path: circle(0 at 50% 50%);
	transition: clip-path 2s ease-in-out;
}

[data-id="2-patro-list"] {
	transform-origin: 33rem 163rem;
	transition: transform .8s ease;
	transform: rotate(0);
}
[data-id="2-patro-list"].rotate {
	transform: rotate(-33deg);
}