:root {
	--page-width: 1920px;
	--page-height: 1080px;
	--text: #47341a;
	--link-text: #32556a;
	--link-hover: #131745;
	--shadow: drop-shadow(4px 4px 3px #21120c88);
	--paper-color: #dfd4ac;
	--cursor: url("/graphix/cursors/victorian_arrow.png"), auto;
	--cursor-pointer: url("/graphix/cursors/victorian_hand.png"), pointer;
	--magnifier-pointer: url("/graphix/cursors/victorian_magnifier.png"), zoom-in;
}

body, html {
	width: 100%; height: 100%;
	margin: 0;
	color: var(--text);
}
body { overflow: hidden; }

body:not(.defaultCursor) {
	cursor: var(--cursor);
	a, label, input, button, .interactive { cursor: var(--cursor-pointer); }
}
body.defaultCursor {
	a, label, input, button, .interactive { cursor: pointer; }
}

.passthrough, .corner { pointer-events: none; }

.container { position: absolute; }
.container img:first-of-type { position: relative; }

img { user-select: none; }
main img, #credit-button, .navbutton { position: absolute; }
nav img, main img, #credit-button, .navbutton, #credits { filter: var(--shadow); }

nav {
	position: relative;
	z-index: 1000;
}

::backdrop { background: #21120c; mix-blend-mode: multiply; opacity: .6; }

.link:hover img, .link:active img, .link:focus-visible img { transform: scale(1.1); }

/* color adjustment layers */
.effect-layers {
	z-index: 5000;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	pointer-events: none;
}
/* color "palette" alternates */
.color-none .effect-layers { display: none; }

/* paper tape popout on hover */
.paper-popout {
	position: absolute;
	overflow: hidden;
	font-family: 'Victorian Parlor', serif;
	font-size: 2rem;
	width: fit-content;
	pointer-events: none;
	filter: var(--shadow);
	span {
		color: var(--text);
		display: inline-block;
		padding: .1em calc(.5em + 10px);
		transition: transform .8s;
		text-wrap: nowrap;
		background-image: url('images/paper_tape.png');
		background-size: auto 100%;
		webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box;
	}
}
.paper-popout:not(.left) { /* pop out to right (default) */
	left: calc(100% - 10px);
	span { transform: translateX(-100%); background-position-x: right; }
}
.paper-popout.left { /* pop out to left */
	right: calc(100% - 10px);
	span { transform: translateX(100%); background-position-x: left; }
}
.paper-popout:not(.top) { /* pop out to side (default) */
	top: 50%; transform: translateY(-50%);
}
.paper-popout.top { /* pop out to top */
	bottom: calc(100% - 10px);
	left: 50%; transform: translateX(-50%);
	writing-mode: vertical-lr;
	text-orientation: mixed;
	span {
		transform: translateY(100%);
		background-image: url('images/paper_tape_vert.png');
		background-size: 100% auto;
		padding: calc(.5em + 10px) .1em;
	}
}
:has(> .paper-popout) { &:hover, &:active, &:focus-visible {
	.paper-popout { pointer-events: initial; }
	.paper-popout span { transform: translate(0%); }
} }

/* glow on keyboard focus */
.glow-focus:focus-visible img, img.glow-focus:focus-visible, button:focus-visible > img {
	filter: drop-shadow(0px 0px 10px #fff8df);
}
.glow-focus:focus-visible, button:focus-visible { outline: none; }
.book:focus-visible { .back, .front { filter: drop-shadow(0px 0px 20px #fff8df); } }

/* fixed pos navigation buttons */
.navbutton {
	margin: min(16px, 2vw);
	width: max(50px, min(20vw, 125px));
	img { max-width: 100%; }
}
.navbutton:hover img, .navbutton:active img, .navbutton:focus-visible img {
	transform: scale(1.1);
	@media screen and (width < 600px) { transform: scale(1.25); }
}
.home { left: -5px; top: -5px; }

#credit-button {
	z-index: 950;
	position: relative;
	top: 20px;
  left: 595px;
	rotate: 5deg;
	border-radius: 40%;
	img { position: relative; pointer-events: none; filter: none !important; }
}
[popover] {
	position: fixed;
	padding: 0;
	border: none;
	color: var(--text);
	background: none;
}
#credits {
	max-height: 95vh;
	max-width: min(881px,min(44em,95vw));
	aspect-ratio: .77;
}
#credits:after {
	content: '';
	display: block;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-image: url('images/gold_frame.png');
	background-size: 100%;
	pointer-events: none;
}
#credits .wrapper {
	width: 66.5%; height: 73.5%;
	aspect-ratio: .7;
	margin: 17% auto;
	overflow: auto;
	webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box;
	box-shadow: inset 3px 8px 5px #21120c99;
	background: #e4d1ac; /* DEBUG - can't use var(--paper-color) because popover is above sepia overlay */
}
#credits ul { margin: 0; }
#credits a, #credits button { font-style: italic; font-weight: bold; color: var(--link-text); }
#credits a:hover, #credits button:hover { color: var(--link-hover); }
[popover] .wrapper {
	padding: 1.5em 1em;
}
[popover] .wrapper :first-child { margin-top: 0; }
[popover] h4 { margin-bottom: 0; }
[popover] h2 { font-size: 2.25em; font-family: 'Victorian Parlor', serif; margin-bottom: 0; }
#credits .close { font-size: 1.75em; font-family: 'Victorian Parlor', serif; }

main {
	position: relative;
	width: 100%; height: 100%;
	overflow: hidden;
}

.corner {
	position: absolute;
	z-index: 999;
}
#top-left-marker { top: 0px; left: 0px; }
#top-right-marker { top: 0px; left: var(--page-width); rotate: 90deg }
#bottom-right-marker { top: var(--page-height); left: var(--page-width); rotate: 180deg }
#bottom-left-marker { top: var(--page-height); left: 0px; rotate: -90deg }

/* section behind the window that gets dragged */
#drag-wrapper {
	position: absolute;
	width: var(--page-width);
	height: var(--page-height);
	top: 0;
	left: 0;
	@media screen and ((width < 600px) or (height < 500px)) { zoom: .85; }
}

.repositioner { position: relative; }

.background-layer {
	mix-blend-mode: multiply;
	opacity: 0.5;
}

.parallax { background-attachment: fixed; }

:has(> .hover-hide), :has(> .hover-show) {
	position: absolute;
	filter: var(--shadow);
	img { left: 0; top: 0; filter: none; }
}
.hover-hide { }
:has(> .hover-hide) {
	&:hover, &:focus-visible, &:focus, &:active {
		.hover-hide { opacity: 0; }
	}
}
.hover-show { opacity: 0; }
:has(> .hover-show) {
	&:hover, &:focus-visible, &:focus, &:active {
		.hover-show { opacity: 1; }
	}
}

/* containers with clip path interaction area */
.clipped {
	pointer-events: none;
	&:after {
		pointer-events: initial;
		content: '';
		display: block; position: absolute; top: 0; left: 0;
		width: 100%; height: 100%;
	}
	img:not(.hover-hide) { position: relative; }
}

#load-screen {
	width: 100%;
	height: 100%;
	text-align: center;
	color: var(--paper-color);
	font-size: 3rem;
	font-family: 'Victorian Parlor', serif;
}
#load-screen > .wrapper {
	width: fit-content;
	position: absolute;;
	top: 48%; left: 50%;
	transform: translate(-50%,-50%);
	filter: var(--shadow);
}
#load-screen > .wrapper img { max-width: 90vw; }