/*
* Full source may be found at: https://git.singpolyma.net/post-part
* Copyright 2020 Stephen Paul Weber <singpolyma.net>
*
* Permission to use, copy, modify, and/or distribute this software for any
* purpose with or without fee is hereby granted, provided that the above
* copyright notice and this permission notice appear in all copies.
*
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY
* SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER
* RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF
* CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
* CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
*/

@import "font-face";

@include font-face(cardo, assets/fonts/cardo-v12-latin-regular);
@include font-face(druk, "assets/fonts/Druk Wide Web Medium Regular", null, null, woff2 woff ttf otf);

$bg: black;
$fg: #fff9e4;
$fg-alt: #887a00;
$column-width: 50vw;

html, body {
	margin: 0;
	font-family: cardo, sans-serif;
	background: $bg;
	color: $fg;
	text-align: center;

  * {
		box-sizing: border-box;
	}
}

body > a[href="#wallpaper"] {
	&, &:visited, {
		position: fixed;
		top: 1em;
		left: 1em;
		color: $fg-alt;
		text-decoration: none;
	}

	&:before {
		content: "﹀";
		background: $fg;
		border-radius: 100%;
		display: inline-block;
		width: 1.5em;
		height: 1.5em;
		line-height: 2.1em;
		vertical-align: middle;
		margin-right: 0.5em;
	}
}

body > hgroup {
	position: relative;
	font-family: druk, sans-serif;
	margin-bottom: 60vh;

	h1 {
		display: block;
		width: 100%;
		height: 50vh;
		margin-top: 20vh;
		background: url(assets/img/POST-PART-TITLE.png) no-repeat center;
		background-size: contain;
		color: rgba(0, 0, 0, 0);
	}

	&:after {
		content: "scroll";
		display: block;
		margin-top: 20vh;
		font-family: cardo, sans-serif;
		font-size: 0.9em;
	}

	&:before {
		content: "";
		display: block;
		width: 1px;
		height: 10vh;
		background: $fg;
		position: absolute;
		bottom: calc(-10vh - 1em);
		left: 50%;
	}
}

h1, h2 { font-weight: normal; }

body > p {
	max-width: $column-width;
	margin: 1em auto;
	font-size: 1.5em;

	&:nth-of-type(1) {
		font-family: druk, sans-serif;
		font-size: 1.75em;
		background: url(assets/img/BREAST-PATTERN.png) no-repeat center top;
		background-size: contain;
		padding-top: 25%;
		margin-bottom: 17em;
	}

	&:nth-of-type(2) {
// TODO: what should happen on small screens where text won't fit in circle?
		position: relative;
		z-index: 0;

		span {
			position: relative;
			display: block;
			background: $fg;
			color: $fg-alt;
			border-radius: 100%;
			height: $column-width;
			padding: 3em;
			padding-top: calc(#{$column-width/2} - 5em);

			&:before {
				display: block;
				background: url(assets/img/WOMAN-OVAL.png) no-repeat center;
				background-size: contain;
				height: 50vh;
				width: 10vw;
				content: "";
				position: absolute;
				top: -5vh;
				left: -3vw;
				z-index: -1;
				transform: scaleX(-1);
			}

			&:after {
				display: block;
				background: url(assets/img/WOMAN-OVAL.png) no-repeat center;
				background-size: contain;
				height: 30vh;
				width: 10vw;
				content: "";
				position: absolute;
				bottom: -5vh;
				right: 3vw;
			}
		}
	}

	&:nth-of-type(3) {
		background: url(assets/img/DETAIL-HAIR.png) no-repeat center top;
		background-size: 30%;
		padding-top: 45%;
		margin-top: 30vh;
		font-size: 1.5em;
	}

	&:nth-of-type(5) {
		background: url(assets/img/WOMAN-MIRRORED.png) no-repeat center top;
		background-size: 60%;
		padding-top: 50%;
		margin-top: 20vh;
		font-family: druk, sans-serif;
		font-size: 1.75em;
	}

	&:nth-of-type(6) {
		background: url(assets/img/DETAIL-LEGS.png) no-repeat center top;
		background-size: 50%;
		padding-top: 30%;
		margin-top: 30vh;
		margin-bottom: 10em;
	}

	&.fin {
		margin-top: 10em;
		font-size: 2em;
		font-family: druk, sans-serif;
		color: $fg-alt;
	}
}

body > small {
	display: block;
	margin-top: 20vh;

	&:after {
		content: "";
		display: block;
		width: 1px;
		height: 30vh;
		background: $fg;
		margin: auto;
		margin-top: 3em;
	}
}

#story {
	background: $fg;
	color: $fg-alt;
	margin-top: 50vh;
	margin-bottom: 35vh;

	> h1 {
		background: $bg;
		color: $fg-alt;
		font-family: druk, sans-serif;
		font-size: 3em;
		padding-bottom: 0.75em;
	}

	p {
		font-size: 1.25em;
		max-width: $column-width;
		margin: 1em auto;
		background: url(assets/img/DETAIL-WOMB.png) no-repeat center top;
		background-size: 30%;
		padding-top: 23%;
		margin-top: 10vh;
		padding-bottom: 35vh;
	}
}

#wallpaper {
	position: relative;
	background: url(assets/img/BROCADE.png);
	background-size: 50%;
	img {
		pointer-events: none;
		width: 100%;
	}

	figure {
		background: black;
		border-radius: 2em;
		padding: 1em;
		text-align: left;
		h1 {
			font-size: 1.25em;
			font-weight: normal;
			font-family: druk, sans-serif;
			color: $fg-alt;

			&:before { content: "“"; }
		}
		p:after { content: "”"; }
		&:last-of-type p:after { content: ""; }
	}

	&.js figure {
		opacity: 0;
		transition: opacity 0.75s;
		pointer-events: none;
		position: absolute;
		width: 45%;

		&:nth-of-type(1) {
			top: 1em;
			right: 1em;
		}

		&:nth-of-type(2) {
			top: 1em;
			left: 1em;
		}

		&:nth-of-type(3) {
			top: 33%;
			right: 1em;
		}

		&:nth-of-type(4) {
			top: 33%;
			left: 1em;
		}

		&:nth-of-type(5) {
			bottom: 1em;
			right: 1em;
		}

		audio { display: none; }
	}
}

#credits {
	position: relative;
	margin: auto;
	max-width: $column-width;
// TODO: what should happen on small screens where text won't fit in circle?
	background: $fg;
	color: $fg-alt;
	border-radius: 100%;
	padding: 3em;
	padding-top: calc(#{$column-width/2} - 4em);
	margin-top: calc(15vw + 30vh);
	height: $column-width;

	h1 {
		font-family: druk, sans-serif;
	}

	p { font-size: 1.5em; }

	&:before {
		display: block;
		background: url(assets/img/WOMAN-ARMS.png) no-repeat center;
		background-size: contain;
		width: 16vw;
		height: 40vw;
		content: "";

		position: absolute;
		top: -15vw;
		left: calc(50% - 8vw);
	}
}

footer {
	background: $fg;
	color: $fg-alt;
	padding-top: 2em;

	p {
		max-width: $column-width;
		margin: 1em auto;

		&:nth-of-type(1) {
			margin-top: 5em;
			margin-bottom: 5em;
		}

		&:last-of-type {
			margin-bottom: 5em;
		}
	}

	address {
		display: inline-block;
		font-style: normal;
		color: $bg;
	}

	img {
		max-height: 5em;

		&[alt="Instagram"] {
			max-height: 2em;
		}
	}
}