/* -------- styles.css --------- */
/* strobe styles and animations */
/* --------------------------- */

:root {
	/* Stripe colors */
	--primary: black;
	--secondary: white;

	/* Relative scroll speeds */
	--inner-speed: 8s;
	--outer-speed: 16s;

	/* Stripe sizes */ 
	--inner-stripe: 12px;
	--outer-stripe: 12px;

	/* Multiplier to scale scroll distance */
	--inner-multiplier: 6;
	--outer-multiplier: 0.7;

	/* Distance each section scrolls to */
	--inner-distance-base: 72px;
	--outer-distance-base: 1372px;
	--inner-distance: calc(var(--inner-distance-base) * var(--inner-multiplier));
	--outer-distance: calc(var(--outer-distance-base) * var(--outer-multiplier));

	/* New minimum strobe size reduces hiccups */
	/* Too large of a value and rendering slows */
	/* Converting to svg might work better? */
	--inner-strobe-size: min(100vw, 1000px);
	--outer-strobe-size: min(200vw, 2000px);
}

/*****************************************/

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	max-height: 100%;
	overflow: hidden;
}
html, body, div {
	padding: 0;
	margin: 0;
}

/*****************************************/

#strobe {
	position: relative;
	width: 100%;
	height: 100%;
}

.outer-quadrant {
	position: absolute;
	background-color: white;
	width: 50vw;
	height: 50vh;
	overflow: hidden;
}

/*****************************************/

#outer-top-left {
	top: 0;
	left: 0;
}
#outer-top-right {
	top: 0;
	right: 0;
}
#outer-bottom-right {
	bottom: 0;
	right: 0;
}
#outer-bottom-left {
	bottom: 0;
	left: 0;
}

/*****************************************/

#outer-top-left-strobe, #outer-top-right-strobe,
#outer-bottom-right-strobe, #outer-bottom-left-strobe {
	position: relative;
	width: calc(var(--outer-strobe-size) * 2);
	height: calc(var(--outer-strobe-size) * 2);
	animation: outer-northwest var(--outer-speed) linear infinite;
	background-image: repeating-linear-gradient(
	  	-45deg,
	 	var(--secondary),
	  	var(--secondary) var(--outer-stripe),
	  	var(--primary) var(--outer-stripe),
	  	var(--primary) calc(var(--outer-stripe) * 2)
	);
	will-change: background-position; /* 提高性能 */
}

/*****************************************/

#center-circle {
	background-color: white;
	position: absolute;
	top: calc(calc(100% - 80vmin) / 2);
	left: 0;
	right: 0;
	margin: auto;
	width: 80vmin;
	height: 80vmin;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
}
#countdown{
	position: relative;
	z-index: 9;
}

/*****************************************/

.inner-quadrant {
	position: absolute;
	width: 40vmin;
	height: 40vmin;
	overflow: hidden;
}

#inner-top-left {
	top: 0;
	left: 0;
}
#inner-top-right {
	top: 0;
	right: 0;
}
#inner-bottom-right {
	right: 0;
	bottom: 0;
}
#inner-bottom-left {
	left: 0;
	bottom: 0;
}

/*****************************************/

#inner-top-left-strobe, #inner-top-right-strobe,
#inner-bottom-right-strobe, #inner-bottom-left-strobe {
	position: absolute;
	width: calc(var(--inner-strobe-size) * 2);
	height: calc(var(--inner-strobe-size) * 2);
	object-fit: cover;
	bottom: 0;
	right: 0;
	animation: inner-southeast var(--inner-speed) linear infinite;
	background-image: repeating-linear-gradient(
	  	-45deg,
	 	var(--primary),
	  	var(--primary) var(--inner-stripe),
	  	var(--secondary) var(--inner-stripe),
	  	var(--secondary) calc(var(--inner-stripe) * 2)
	);
	will-change: background-position; /* 提高性能 */
}

#outer-top-right,#inner-top-right {transform: scaleX(-1);}
#outer-bottom-right,#inner-bottom-right {transform: scaleX(-1) scaleY(-1);} 
#outer-bottom-left,#inner-bottom-left {transform: scaleY(-1);}

/*****************************************/

@keyframes inner-southeast {
	from { background-position: 0 0; }
	to { background-position: 
		var(--inner-distance) 
		var(--inner-distance) }
}

/*****************************************/

@keyframes outer-northwest {
	from { background-position: 0 0; }
	to { background-position: 
		calc(var(--outer-distance) * -1) 
		calc(var(--outer-distance) * -1) }
}

/*****************************************/

#controls {
	opacity: 0;
	transition: opacity .3s ease-in-out;
	background-color: white;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	padding: 10px 20px;
	margin: 0;
	border-radius: 15px 0 0 15px;
	font-size: 12px;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#controls:hover {
	opacity: 1;
}

#controls h3 {
	font-family: 'Koulen', cursive;
	font-size: 1.5em;
	margin: 0;
}

#controls label {
	font-family: 'Sofia Sans Condensed', sans-serif;
	margin: 5px 0 0 0;
}

#controls input {
	margin: 0 0 5px 0;
}

#controls input:hover {
	cursor: pointer;
}

/*****************************************/

.material-symbols-outlined {
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 48
}

#fullscreen {
	position: absolute;
	bottom: 10px;
	right: 10px;
	
	font-size: 1.5em;
	color: white;
	filter: drop-shadow(0 0 3px black);

	opacity: 0;
	transition: opacity .3s ease-in-out;
}

#fullscreen:hover {
	cursor: pointer;
	opacity: 1;
}