/* 
 Best viewed in Full mode (Tested on Chrome and FireFox)
 CSS Only 3D Headphones with 3D Camera Simulation.
 All 3D objects created and processed using CSS and powered by a few lines of JavaScript.
 */

:root {
	--color-p: 0deg;
	--color-s: 0deg;
}

html,
body {
	padding: 0;
	margin: 0;
	background-color: white;
	font-family: 'Arial', sans-serif;
	font-size: 10px;
	width: 100vw;
	height: 100vh;
	display: block;
	scrollbar-color: rgb(0, 100, 200) rgb(20, 25, 30);
	scrollbar-width: thin;
}

body::before {
	content: '';
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(#fff, #ccc);
	background-size: 100vw 100vh;
	opacity: 0.4;
	display: block;
}

/* enhancements */
.noscroll {
	overflow: hidden;
}

.noanimations .uniform,
.noanimations .object3d {
	transition: none;
}

.noantialiasing [t3d],
.noantialiasing [pr-ant] div {
	box-shadow: none;
}

/* maximum space to scale the scene uniformly */
.uniform {
	position: absolute;
	left: var(--ptx, 156px); /* sidebar width */
	top: var(--pty, 0px); /*45,10*/
	width: 100vw;
	height: 100vh;
	transform: scale(var(--s, 1));
	display: flex;
	align-items: center;
	overflow: visible;
	transition: transform ease 1s;
	will-change: transform; /* render optimization */
}

/* represent the object in 3D space */
.object3d {
	top: 0px;
	position: relative;
	transform: perspective(var(--p, 1000px)) rotateX(var(--x, 0deg)) rotateY(var(--y, 0deg)) rotateZ(var(--z, 0deg))
		translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, -12px));
	--path-max-rotate: calc(360deg + var(--z, 0deg));
	transform-style: preserve-3d;
	margin: auto;
	transition: transform ease 1s; /* don't animate top, done! */
	will-change: transform; /* render optimization */
}

.object3d.rotate {
	animation: autorotate linear var(--rs, 2s) forwards infinite;
}

@keyframes autorotate {
	100% {
		transform: perspective(var(--p, 1000px)) rotateX(var(--x, 0deg)) rotateY(var(--y, 0deg))
			rotateZ(var(--path-max-rotate)) translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, -12px));
	}
}

/* anti-aliasing */
[ant] {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
}

[pr-ant] div {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
}

/* parent 3D */
[t3d] {
	transform-style: preserve-3d;
}

[t3dc],
[t3dc] div {
	transform-style: preserve-3d;
}

/* children 3D */
[t3dp]::before,
[t3dp]::after {
	transform-style: preserve-3d;
}

/* child 3D */
[t3db]::before {
	transform-style: preserve-3d;
}
[t3da]::after {
	transform-style: preserve-3d;
}

/* Default Variables for easy access */
.default-variables {
	--z-base: 88px;
	--arc-large-border: 18px;
	--arc-large-border-displacement: -18px;
	--arc-large-border-expansion: 39px;
	--arc-large-z: calc(var(--z-base) + 206px);

	--arc-large-mutual-expansion: 39px;
	--arc-large-polka-dot: 16px;
	--arc-large-polka-z: 9px;
	--arc-large-polka-y: 24px;

	--arc-small-border: 8px;
	--arc-small-border-displacement: -6px;
	--arc-small-z: calc(var(--z-base) + 206px + 12px);
	--arc-small-squeeze: 50%;
	--arc-small-chunk: 14%;
	--arc-small-polygon: polygon(
		0 0,
		100% 0,
		100% var(--arc-small-chunk),
		calc(100% - var(--arc-small-squeeze)) 100%,
		var(--arc-small-squeeze) 100%,
		0 var(--arc-small-chunk)
	);

	--pan-shift: 42%;
	--pan-down: 5%;
	--handle-arc-polygon: polygon(
		50% 100%,
		calc(100% - var(--pan-shift)) var(--pan-down),
		100% 0,
		100% 100%,
		0 100%,
		0 0,
		var(--pan-shift) var(--pan-down)
	);
	--handle-push: 74px;
	/*polygon(0 0, 50% 5%, 100% 0, 100% 100%, 0 100%);*/

	/* primary colors */
	--color-arc-small-1: hsl(var(--color-p), 79%, 72%);
	--color-arc-small-2: hsl(var(--color-p), 96%, 45%);

	--color-magent-1: hsl(var(--color-p), 100%, 44%);
	--color-magent-2: hsl(var(--color-p), 100%, 31%);

	--color-sp-1: hsl(var(--color-p), 100%, 44%);
	--color-sp-2: hsl(var(--color-p), 100%, 39%);
	--color-cream: #ecf2ef;

	/* secondary colors */
	--color-arc-large-1: hsl(var(--color-s), 28%, 24%);
	--color-arc-large-2: hsl(var(--color-s), 33%, 16%);
	--color-arc-large-3: hsl(var(--color-s), 28%, 31%);
	--color-polka: hsl(var(--color-s), 31%, 16%);

	--color-magnet-head-1: hsl(var(--color-s), 33%, 16%);
	--color-magnet-head-2: hsl(var(--color-s), 28%, 24%);

	--color-handle-1: hsl(var(--color-s), 28%, 24%);
	--color-handle-2: hsl(var(--color-s), 28%, 30%);

	--color-cotton-1: hsl(var(--color-s), 29%, 30%);
	--color-cotton-2: hsl(var(--color-s), 28%, 24%);
	--color-cotton-3: hsl(var(--color-s), 33%, 16%);
}

/* Main */
.main-stage {
	position: relative;
	top: 0;
	left: 0;
	width: 316px;
	height: 156px;
}

.main-stage::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	filter: blur(40px);
	border-radius: 40%;
	backface-visibility: hidden;
}

.arc_large,
.arc_handles {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) translateZ(var(--arc-large-z)) rotateX(-90deg);
	width: 328px;
	height: 188px;
}

.arc_large > div {
	--z-in: calc(1px * var(--i, 0));
	--z-min: calc(1px * var(--length) / 2);
	--z-out: calc(var(--z-in) - var(--z-min));
	position: absolute;
	left: var(--arc-large-border-displacement);
	top: var(--arc-large-border-displacement);
	width: 100%;
	height: 100%;
	border: var(--arc-large-border) solid var(--color-arc-large-1);
	border-radius: 200px 200px 0 0;
	transform: translateZ(var(--z-out));
	border-bottom: 0;
}

.arc_large > div::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: 2px solid var(--color-arc-large-2);
	box-sizing: border-box;
	border-bottom: 0;
	border-radius: 200px 200px 0 0;
	display: block;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0);
}

.arc_large > div::after {
	content: '';
	position: absolute;
	left: var(--arc-large-border-displacement);
	top: var(--arc-large-border-displacement);
	width: calc(100% + var(--arc-large-border-expansion));
	height: calc(100% + var(--arc-large-border));
	border: 3px solid var(--color-arc-large-3);
	box-sizing: border-box;
	border-bottom: 0;
	border-radius: 200px 200px 0 0;
	display: block;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0);
}

.arc_large .polka-dots {
	position: absolute;
	left: calc(50% + 1px);
	top: 0;
	width: calc(100% + var(--arc-large-mutual-expansion));
	height: 100%;
	transform: translateX(-50%);
	display: block;
}

.arc_large .polka-dots::before {
	left: 0;
	transform: rotateY(-90deg) translateZ(var(--arc-large-polka-z));
}

.arc_large .polka-dots::after {
	right: 0;
	transform: rotateY(90deg) translateZ(var(--arc-large-polka-z));
}

.arc_large .polka-dots::before,
.arc_large .polka-dots::after {
	content: '';
	position: absolute;
	bottom: var(--arc-large-polka-y);
	width: var(--arc-large-polka-dot);
	height: var(--arc-large-polka-dot);
	background: var(--color-polka);
	border-radius: 50%;
}

.arc_small {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) translateZ(var(--arc-small-z)) rotateX(-90deg);
	width: 364px;
	height: 200px;
}

.arc_small div {
	--z-in: calc(1px * var(--i, 0));
	--z-min: calc(1px * var(--length) / 2);
	--z-out: calc(var(--z-in) - var(--z-min));
	position: absolute;
	left: var(--arc-small-border-displacement);
	top: var(--arc-small-border-displacement);
	width: 100%;
	height: 100%;
	border: var(--arc-small-border) solid var(--color-arc-small-1);
	border-radius: 200px 200px 0 0;
	transform: translateZ(var(--z-out));
	border-bottom: 0;
	clip-path: var(--arc-small-polygon);
}

.arc_small div:first-child,
.arc_small div:last-child {
	border-color: var(--color-arc-small-2);
}

/* speakers */
.arc_handles > span {
	position: absolute;
	bottom: -35px;
	width: 140px;
	height: 140px;
	transform: rotateY(var(--rotation)) translate3d(0, 100%, var(--handle-push));
	display: block;
}

.arc_handles .side-left {
	left: 0;
	--rotation: -90deg;
}

.arc_handles .side-right {
	right: 0;
	--rotation: 90deg;
}

/* put your logo here ;) */
.arc_handles .side .mark {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 80px;
	height: 80px;
	transform: translate3d(-50%, -50%, 17px);
}

.arc_handles .side .mark > div {
	--z-in: calc(-1px * var(--i, 0));
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transform: translateZ(var(--z-in));
	background: var(--color-magnet-head-1);
}

.arc_handles .side .mark > div:first-child {
	background: var(--color-magnet-head-2);
}

/* magnet */
.arc_handles .side .back {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 102px;
	height: 102px;
	transform: translate(-50%, -50%);
}

.arc_handles .side .back > div {
	--z-in: calc(1px * var(--i, 0));
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transform: translateZ(var(--z-in));
	background: var(--color-magent-1);
}

.arc_handles .side .back > div:last-child {
	background: var(--color-magent-2);
}

/* cage */
.arc_handles .side .back > div[y]::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 120%;
	height: 120%;
	border: 10px solid var(--color-handle-1);
	box-sizing: border-box;
	border-radius: 50%;
	clip-path: var(--handle-arc-polygon);
	display: block;
}

.arc_handles .side .back > div[y]:first-child::before,
.arc_handles .side .back > div[y]:nth-child(9)::before {
	border-color: var(--color-handle-2);
}

/* handles */
.arc_handles .side .back > div[y]::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 0px;
	transform: translate(-50%, -100%);
	width: 46px;
	height: 55px;
	--node-color: var(--color-handle-1);
	background-image:
		linear-gradient(90deg, var(--node-color) 15px, transparent 15px),
		linear-gradient(90deg, transparent 15px, var(--node-color) 15px);
	background-size:
		30px 30px,
		30px 30px;
	background-position:
		left 0,
		right 0;
	background-repeat: repeat-y;
	display: block;
}

.arc_handles .side .back > div[y]:first-child::after,
.arc_handles .side .back > div[y]:nth-child(9)::after {
	--node-color: var(--color-handle-2);
}

/* noise cut */
.arc_handles .side .cake-base {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;
	height: 160px;
	transform: translate(-50%, -50%);
}

.arc_handles .side .cake-base > div {
	--z-in: calc(-1px * var(--i, 0));
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transform: translateZ(var(--z-in));
	background: var(--color-sp-1);
}

.arc_handles .side .cake-base > div:first-child,
.arc_handles .side .cake-base > div:last-child {
	background: var(--color-sp-2);
}

/* paper cone */
.arc_handles .side .cream {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160px;
	height: 160px;
	transform: translate3d(-50%, -50%, -18px);
}

.arc_handles .side .cream > div {
	--z-in: calc(-1px * var(--i, 0));
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transform: translateZ(var(--z-in));
	background: var(--color-cream);
}

/* cottony */
.arc_handles .side .dough {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 170px;
	height: 170px;
	transform: translate3d(-50%, -50%, -28px);
}

.arc_handles .side .dough > div {
	--z-in: calc(-1px * var(--i, 0));
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transform: translateZ(var(--z-in));
	background: var(--color-cotton-1);
}

.arc_handles .side .dough > div:first-child,
.arc_handles .side .dough > div:last-child {
	background-color: var(--color-cotton-2);
	background-image: radial-gradient(circle 72px, var(--color-cotton-3) 50%, transparent 50%);
	background-size: 100% 100%;
}

/* highlighting */
.highlighted .arc_handles > span {
	background-color: rgba(10, 15, 20, 0.2);
}

.highlighted .main-stage,
.highlighted .arc_small div {
	background-image:
		linear-gradient(0deg, rgba(10, 15, 20, 0.4) 2px, transparent 1px),
		linear-gradient(90deg, rgba(10, 15, 20, 0.2) 2px, transparent 1px);
	background-position:
		-2px -2px,
		-2px -2px;
	background-repeat: repeat;
}

.highlighted .main-stage {
	background-size:
		20px 20px,
		20px 20px;
}

.highlighted .main-stage,
.highlighted .arc_large,
.highlighted .arc_handles .side .back > div[y]::after {
	background-color: rgba(10, 15, 20, 0.1);
}

.highlighted .arc_small div {
	background-color: orange;
	background-size:
		16px 16px,
		16px 16px;
}

/* footer */
@media (min-height: 500px) {
	.footer {
		display: none;
	}
}

.footer {
	position: absolute;
	left: 50%;
	bottom: 0;
	height: 60px;
	display: block;
	white-space: nowrap;
	transform: translateX(-50%);
	background: black;
}

.footer a {
	padding: 0 14px;
	display: inline-block;
	text-decoration: none;
	font-size: 0;
	opacity: 0.6;
	position: relative;
}

.footer .twitter {
	top: 2px;
}

.footer a:hover {
	opacity: 1;
}

.footer .twitter svg {
	width: 28px; /* 2% margin extended */
	height: 28px;
	fill: white;
}

.footer .dribbble svg {
	width: 24.5px;
	height: 24.5px;
	overflow: visible;
}

.footer .dribbble svg path {
	fill: white !important;
}

/* controls */
#controls {
	position: fixed;
	left: 0px;
	top: 0px;
	background-color: black;
	display: block;
	padding: 4px 0;
	color: white;
	height: 100%;
	transition-property: top, transform;
	transition-duration: 0.64s;
	transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
	box-shadow: 4px 0 10px 0px rgba(0, 0, 0, 0.2);
	--controls-active: linear-gradient(0deg, rgba(0, 100, 200, 0.4), rgba(0, 100, 200, 0.4));
	--controls-active-warn: linear-gradient(0deg, rgba(217, 54, 0, 0.4), rgba(217, 54, 0, 0.4));
}

/* additional controls */
button.disabled {
	opacity: 0.4;
	pointer-events: none;
}

button.board-borders::before {
	content: 'Hide ';
}
.noborders button.board-borders::before {
	content: 'Show ';
}

button.anim-boost::before {
	content: 'Reduce ';
}
.noanimations button.anim-boost::before {
	content: 'Enable ';
}

.noborders #controls button.board-borders {
	background-image: var(--controls-active);
}

.highlighted #controls button.support-lines {
	background-image: var(--controls-active);
}

.noanimations #controls button.anim-boost {
	background-image: var(--controls-active-warn);
}

.noscroll #controls button.body-scroll {
	background-image: var(--controls-active-warn);
}

.noantialiasing #controls button.no-anti-aliasing {
	background-image: var(--controls-active-warn);
}

.rotating #controls button.spin360 {
	background-image: var(--controls-active);
}

/* check for board type */
button.body-scroll::before {
	content: 'Disable ';
}
.noscroll button.body-scroll::before {
	content: 'Enable ';
}

/* controls makeup */
#controls .title {
	position: relative;
	padding: 6px 8px;
	display: block;
	margin: 2px 0;
}

#controls button {
	display: inline-block;
	background: rgba(255, 255, 255, 0.1);
	color: white;
	border: 0;
	position: relative;
	font-size: 10px;
	padding: 6px 14px;
	margin: 2px auto;
	width: 48%;
	/*outline:none;*/
	outline-offset: -4px;
}

#controls button.ehide::before {
	content: 'Hide ';
}

#controls button:hover {
	background: rgba(255, 255, 255, 0.2);
}
#controls button:active {
	background: rgba(255, 255, 255, 0.15);
}

#controls.hide {
	top: 34px;
	transform: translateY(-100%);
}

#controls.hide button.ehide {
	background-image: var(--controls-active);
}

#controls.hide button.ehide::before {
	content: 'Show ';
}

label {
	display: block;
	padding: 4px 8px;
}

label > span {
	display: inline-block;
	color: white;
	width: 20px;
	height: 12px;
	line-height: 12px;
	position: relative;
	left: 0px;
	top: -2px;
	opacity: 0.7;
}

label:hover > span {
	opacity: 1;
}

label > span:last-child {
	width: 50px;
	text-align: right;
}

input[type='range'] {
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	margin: 0;
	overflow: hidden;
	width: 200px;
	height: 12px;
	background: rgb(20, 20, 20);
}

/* range makeup for Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	input[type='range']::-webkit-slider-thumb {
		-webkit-appearance: none;
		width: 15px;
		height: 12px;
		cursor: ew-resize;
		background: #434343;
	}

	input[type='range']:hover::-webkit-slider-thumb {
		background: rgb(0, 110, 210);
	}

	input[type='range']:active::-webkit-slider-thumb {
		background: rgb(0, 160, 255);
	}

	input[type='range']:hover,
	input[type='range']:active {
		background: rgb(30, 30, 30);
	}
}

/* range makeup for FireFox */
input[type='range']::-moz-range-thumb {
	appearance: none;
	width: 15px;
	height: 12px;
	background: rgb(0, 100, 200);
	border: 0;
	border-radius: 0;
	cursor: ew-resize;
}

input[type='range']:hover::-moz-range-thumb {
	background: rgb(0, 110, 210);
}

input[type='range']::-moz-range-thumb:hover,
input[type='range']::-moz-range-thumb:active {
	background: rgb(0, 160, 255);
}

input[type='range']::-moz-range-progress {
	height: 12px;
	background: rgb(0, 40, 80);
}

input[type='range']:hover::-moz-range-progress {
	background: rgb(0, 50, 100);
}