/* index metaphor: business card */
/* it's supposed to look like this:
 *
 * ___________________________
 * |email                git?|
 * |                         |
 * |                         |
 * |                         |
 * |    RUDY DELLOMAS III    |
 * |  "skilled" computerman  |
 * |                     ____|__
 * |                    (flip ->)
 * |_________________________|
 */

main {
	/* card always goes in the center */
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* let cards take up as much horizontal space as they need for their size */
	margin: 1em 0;

	/* in general, we want the card to be a golden rectangle.
	 * since CSS is basically a functional programming language,
	 * we can do some absolutely nutty variable abuse to make this happen.
	 */
	
	/* FIXME all of this is brittle,
	 * and assumes only one piece of content (my name) is important.
	 * things that still need to be messed with include...
	 * - subtitle
	 * - actual email
	 * - git link
	 * - blurb/stuff on back of card
	 */

	/* in normal cases, cardh is... */
	/* 0.618 == 1/phi */
	--cardh: calc(var(--cardw) * 0.618);

	/* If the screen is large enough,
	 * we want to scale it such that a regular H1 heading results in our name being readable.
	 * media query is unnecessary, but preserved for personal clarity (REMOVE WHEN DONE)
	 */
	/*@media screen and (min-width: 52ex) {*/
		/* font size of average h1 char, at least on Linux Chromium */
		--namesize: 2em;
		/* width of average h1 character */
		/*--namew: 2ex;*/
		/* magic number: 26 is the number of characters in "Rudy "dther" Dellomas III" + 1 */
		/*--cardw: calc(var(--namew) * 26);*/
		/* i.e., cardw is 52 (26 * 2) */
		--cardw: 52ex;
	/*}*/


	/* if screen is smaller than 52ex, shrink card */
	@media screen and (max-width: 52ex) {
		/*background: red;*/
		--cardw: 90vw;
		/* shrink h1 too? should be...
		 * assuming 1em = 2ex (characters are twice as tall as they are wide)
		 * given: in normal cases, namesize == 2em == 4ex == namew * 2
		 * given: cardw == (length of name + 1) * (namew) == 26 * namew
		 * hence: namesize := cardw/26 * 2
		 */
		/*--namesize: calc(var(--cardw)/27 * 2);*/
		--namesize: calc(var(--cardw)/28 * 2);
		/* this is some incredibly jank calculations with like, a million assumptions behind it. */
	} 

	/* if screen is smaller than 26ex,
	 * then our title would be smaller than the regular text,
	 * so give up and preserve readability */

	@media screen and (max-width: 26ex) {
		/*background: red;*/
		--cardw: 90vw;
		/* TODO try turning the card vertically? */
		/*--cardh: auto;*/
		--namesize: 1em;
	} 
	/* see .card {} for continuation */
}

/* requirements:
 * centered
 * business-card proportioned
 * text shrinks/grows to size
 * front+back same size
 */
.face {
	/* see main{} for functions that calculate this */
	width: var(--cardw);
	/* normal case: cardh is fine */
	height: var(--cardh);
	/*
	 * if viewport is smaller than 26ex
	 * (magic number size at which our name can fit on one line while still being readable)
	 * then cardh should be min-height instead of height
	 */
	@media screen and (max-width: 26ex) {
		height: initial;
		min-height: var(--cardh);
	}

	margin: 1em auto;
	border: .5ex outset;
	background: var(--lwhite);
	box-shadow: 1ex 1em var(--dblack);
	font-weight: bold;

	#profession {
		font-weight: normal;
		font-style: italic;
	}

	a {
		color:var(--black);
		&::before {
			/*content: '✉︎';*/
		}
	}
}

/* front specific */
.face.front {
	display: flex;
	/*
	 * do i need fancy placment at all?
	 */
	flex-direction: column;
	justify-content: center;

	hgroup {
		margin: auto;
		text-align: center;
		h1 {
			font-family: serif;
			font-variant: small-caps;
			font-size: var(--namesize);
		}

		/* profession */
		p {
			font-size: calc(var(--namesize) / 2);
		}
	}

}

.face.back {
	display: flex;
	justify-content: center;
	flex-direction: column;
	* { margin: 0 auto; }
	li { list-style: '⮚ '; }
	h2 { margin: 0 auto 1em; }
	small { font-weight: normal };
	a:hover { color: blue; }
	a:active { color: red; }
}

/* holy crap */
@media (prefers-reduced-motion: no-preference) {
	main {
		perspective: var(--cardw);
		perspective-origin:center;
	}

	#card {
		margin: 0 auto;
		width: var(--cardw);
		height: var(--cardh);
		transition: 0.6s;
		transform-style: preserve-3d;
		/*animation: spin 3s infinite linear;*/
	}

	.face {
		transition: 0.6s;
		margin: 0;
		position:absolute;
		backface-visibility: hidden;
		/* the box shadow doesn't look great animated, but... eh?
		 * TODO make box-shadow "realistic" (based on 2d projection) */
	}

	.back {
		transform: rotateY(180deg);
	}

	/* wip: shadow that actually looks like a shadow */
/*
	.coolshadow {
		transform-style:flat;
		position:absolute;
		margin: auto;
		top: 1ex;
		left: 1ex;
		border:3px solid;
		width:var(--cardw);
		height:var(--cardh);
		background:var(--dblack);
		z-index: -1;
	}

	#flip:checked ~ .coolshadow {
		transform: rotateY(0.5turn);
	}
*/

	/* flip button styling */
	/* who needs javascript??? */
	.flip {
		position: relative;
		bottom: 1.25em;
		font-size: 1em;
		padding: .5em 3ex;
		display: inline;
		margin: 0 auto;
		background:var(--dwhite);
		&:hover {
			background:var(--lblack);
		}
	}

	#flip:checked ~ #card {
		transform: rotateY(0.5turn);
	}

	#flip:checked ~ #card .front {
		box-shadow: none;
	}
}