/* 6 November 2021
 * (CSS) Fireworks in the mind 🎆
 * first in the Beauty of Nesting series
 * recommended view: Full Page
 * best performance in Chrome
 * mvp: CSS filters, nested DIVs
 */

/** configuration */
:root {
	--accent-light: 202; /* 223 */
	--gradient-light: radial-gradient(circle at 50%, #fff, #f9f4fa);
	--accent-dark: 307;
	--gradient-dark: radial-gradient(circle at 50%, #32002a, #000);
	--gradient-change-duration: 300ms;

	--selection-opacity: 0.5;
	--controls-padding: 2vmin;
	--controls-transition-duration: 300ms;
	--controls-font-size: max(0.8em, 2.2vmin); /* 16.65px, 2.5vmin */

	--controls-line-opacity: 0.4;
	--controls-line-padding: 30%;
	--controls-line-height: 0.72em;
	--controls-margin-inline: 0.6em;
	--controls-margin-block: 0.8em;

	--controls-panel-light: rgba(255, 255, 255, 0.5);
	--controls-panel-dark: rgba(0, 0, 0, 0.4);
	--controls-backdrop-blur: 15px;
}

/** scene prerequisites */
body {
	--scene-size: min(75vmin, 500px);
	--scene-hue: 35deg;
	--scene-contrast: 6200%;
	--scene-zoom-factor: 2;
	--scene-transition-duration: 400ms;
	--scene-blur-min: 10px;
	--scene-blur-max: 30px;
	/* --scene-blur: 0; */

	--nest-rotate-start: -154deg;
	--nest-hue-start: 477deg;
	--nest-hue-end: 529deg;
	--nest-base-color: hsl(0, 79%, 63%); /* #eb5757 */
	--nest-base-duotone-color: hsl(0, 53%, 45%); /* #b13737 */
	--nest-duotone-duration: 400ms;
	--nest-rotate-duration: 40s;
	--nest-blur-duration: 6s;
	--nest-hue-duration: 4s;
	--nest-border-style: solid;
	--nest-border-size: 15px;
	--nest-border-size-max: 35px;

	--silhouette-opacity-factor: 0.9;
	--animation-default-state: running;
}

/** relevant portion */
[data-scene] {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--scene-size);
	height: var(--scene-size);
	display: block;

	transform: translate(-50%, -50%) scale(1);
	transition: all ease var(--scene-transition-duration);
	filter: blur(var(--scene-blur, var(--scene-blur-min))) contrast(var(--scene-contrast)) hue-rotate(var(--scene-hue));
	-webkit-animation: none;
	animation: none;
}

[data-scene] div {
	position: relative;
	width: 100%;
	height: 100%;
	transform: rotate(var(--nest-rotate-start));
	overflow: hidden;
	color: var(--nest-base-color);

	/* transition: color ease var(--nest-duotone-duration), border ease-out 1s; */
	transition-property: color, border;
	transition-duration: var(--nest-duotone-duration), 1s;
	transition-timing-function: ease, ease-out;

	border: var(--nest-border-size) var(--nest-border-style) currentColor;
	filter: hue-rotate(var(--nest-hue-start));
	-webkit-animation:
		hue linear var(--nest-hue-duration) alternate infinite,
		rotate linear var(--nest-rotate-duration) forwards infinite;
	animation:
		hue linear var(--nest-hue-duration) alternate infinite,
		rotate linear var(--nest-rotate-duration) forwards infinite;
	-webkit-animation-play-state: var(--animation-default-state);
	animation-play-state: var(--animation-default-state);
}

[data-scene] > div:first-child {
	border-color: transparent;
}

[data-reduce-motion] {
	display: none;
}

/** pause rotation if 'prefers-reduced-motion' @media-rule is present 
 ** can be resumed later with user interaction */
@media (prefers-reduced-motion: reduce) {
	body {
		--animation-default-state: paused;
	}
	[data-reduce-motion] {
		display: inline-block;
	}
}

/** toggle: zoom */
body[data-zoom] [data-scene] {
	transform: translate(-50%, -50%) scale(var(--scene-zoom-factor));
}

body[data-zoom] [data-controls] {
	background-color: var(--controls-panel, var(--controls-panel-dark));
	-webkit-backdrop-filter: blur(var(--controls-backdrop-blur));
	backdrop-filter: blur(var(--controls-backdrop-blur));
}

/** toggle: duotone */
body[data-duotone] {
	--nest-base-color: var(--nest-base-duotone-color);
	--scene-hue: -35deg;
}

/** toggle: force-rotate */
body[data-force-rotate] [data-scene] div {
	--animation-default-state: running;
}

/** toggle: alternate-blur */
body[data-alternate-blur] [data-scene] {
	-webkit-animation: alternate-blur linear var(--nest-blur-duration) alternate infinite;
	animation: alternate-blur linear var(--nest-blur-duration) alternate infinite;
}

/** toggle: dashed */
body[data-dashed] {
	--nest-border-style: dashed;
}

/** toggle: density */
body[data-alternate-pattern] {
	--nest-border-size: var(--nest-border-size-max);
}

/** toggle: silhouette */
body[data-silhouette] {
	--scene-blur: 0;
	--scene-contrast: 100%;
	--scene-hue: 0deg;
	--nest-hue-start: 0deg;
	--nest-base-color: #000;

	--hue: var(--accent-light);
	--text: #000;
	--text-secondary: rgba(0, 0, 0, 0.576);
}

body[data-silhouette] {
	--controls-panel: var(--controls-panel-light);
}

body[data-silhouette] [data-scene] div {
	opacity: var(--silhouette-opacity-factor);
	-webkit-animation: rotate linear var(--nest-rotate-duration) forwards infinite;
	animation: rotate linear var(--nest-rotate-duration) forwards infinite;
	-webkit-animation-play-state: var(--animation-default-state);
	animation-play-state: var(--animation-default-state);
}

body[data-silhouette]::before {
	opacity: 0;
}

/** animation keyframes */
@-webkit-keyframes alternate-blur {
	to {
		filter: blur(var(--scene-blur, var(--scene-blur-max))) contrast(var(--scene-contrast))
			hue-rotate(var(--scene-hue));
	}
}
@keyframes alternate-blur {
	to {
		filter: blur(var(--scene-blur, var(--scene-blur-max))) contrast(var(--scene-contrast))
			hue-rotate(var(--scene-hue));
	}
}

@-webkit-keyframes hue {
	to {
		filter: hue-rotate(var(--nest-hue-end));
	}
}

@keyframes hue {
	to {
		filter: hue-rotate(var(--nest-hue-end));
	}
}

@-webkit-keyframes rotate {
	to {
		transform: rotate(calc(var(--nest-rotate-start) + 360deg));
	}
}

@keyframes rotate {
	to {
		transform: rotate(calc(var(--nest-rotate-start) + 360deg));
	}
}

/* Made with Coffee, Care and Curiosity by S. Shahriar ^.^ */