@font-face {
  font-family: "witch-roman";
  src: url("../assets/home/WitchRoman.otf")
}

body {
	margin: 0;
	background: #1e0817;
}

/* contains all elements on the page */
.container {
	display: grid;
	grid-template-columns: 4vw minmax(0, 1fr) 4vw;
	height: 100vh;
}

/* contains centered elements on the page */
.content {
	display: grid;
	align-content: center;
	justify-items: center;
	min-width: 0;
	grid-column: 2;
}

/* borders */

.border-left,
.border-right {
	background-repeat: repeat-y;
	background-size: 100% auto;
}

.border-left {
	background-image: url("../assets/home/left-lace-cropped.webp");
}

.border-right {
	background-image: url("../assets/home/right-lace-cropped.webp");
}

/* navigation */

nav {
	display: flex;
	gap: 1rem;
}

nav a {
	text-decoration: none;
	color: white;
	padding: 1em;
}

ul, ul a {
	color: white;
}


/* labyrinth stage */

.stage {
	display: grid;
	container-type: inline-size;
	place-items: center;
	width: min(100%, 850px);
	justify-self: center;
	min-width: 0;
}

/* images making up the stage + page message are on the same grid */
.stage > img, 
.labyrinth-msg {
	grid-area: 1 / 1;
}

.labyrinth-bg {
	width: 75%;
}

.frame {
	width: 100%;
	z-index: 1;
}

.labyrinth-msg {
	color: yellow;
	font-family: witch-roman;
	/*msg is sized relative to size of stage*/
	font-size: 5cqw;
}


/* curtains */

.curtain {
	width: 43%;
	z-index: 2;
}

.curtain {
	transform: translateX(var(--x));
}

/* curtain positioning and initial opacities when page is open / tassel unpulled*/
.closed-left,
.half-left,
.open-left {
	justify-self: start;
	--x: 16%;
	--jolt: -3%;
}

.closed-right,
.half-right,
.open-right {
	justify-self: end;
	--x: -17%;
	--jolt: 3%;
}

.half-left,
.half-right,
.open-left,
.open-right {
	opacity: 0;
}

/* curtain animation on tassel pull */
/* applied class from js script .is-open triggers 3s animation */

.stage.is-open .closed-left,
.stage.is-open .closed-right {
	animation: closed 3s steps(1) forwards;
}

.stage.is-open .half-left, 
.stage.is-open .half-right {
	animation: half 3s steps(1) forwards;
}

.stage.is-open .open-left, 
.stage.is-open .open-right {
	animation: open 3s steps(1) forwards;
}


@keyframes closed {
	0%, 32% { opacity: 1; }
	33%, 100% { opacity: 0; }
}

@keyframes half {
	0%, 32% { opacity: 0; }
	33%, 65% { opacity: 1; }
	66%, 100% { opacity: 0; }
}

@keyframes open {
	0%, 65% { opacity: 0; }
	66%, 100% { opacity: 1; }
}


/* tassel */

.tassel-pull {
	position: absolute;
	right: 9vw;
	z-index: 3;
	width: 7vw;
}

/* tassel pull sway */
/* sway class is removed when tassel is pulled */

.sway {
    transform-origin: 50% 0;
    animation: sway 3s step-start infinite;
}

@keyframes sway {
    0% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    100% { transform: rotate(-5deg);
    }
}