/***********/
/* IMPORTS */
/***********/
@font-face {
	font-family: johnston-itc-std-bold;
	src: url('../fonts/johnston-itc-std-bold.otf') format("opentype");
}

@font-face {
	font-family: custon_london-eye_font;
	src: url('../fonts/custon_london-eye_font.ttf') format("truetype");
}





/*******************************/
/* CSS RESET & GENERAL STYLING */
/*******************************/
*, *::after, *::before {
	box-sizing:border-box;  
	padding: 0;
	margin: 0;
	zoom: reset;
	touch-action: manipulation;
}

*:focus {
	outline: none;
}

button:not([disabled]) {
	cursor: pointer;
}

button[disabled] {
	cursor:not-allowed;
}

img {
	-webkit-user-drag: none;
	user-select: none;
}

ul, menu {
	list-style: none;
}

li:nth-of-type(1) { --index: 1; }
li:nth-of-type(2) { --index: 2; }
li:nth-of-type(3) { --index: 3; }
li:nth-of-type(4) { --index: 4; }
li:nth-of-type(5) { --index: 5; }
li:nth-of-type(6) { --index: 6; }
li:nth-of-type(7) { --index: 7; }
li:nth-of-type(8) { --index: 8; }
li:nth-of-type(9) { --index: 9; }
li:nth-of-type(10) { --index: 10; }
li:nth-of-type(11) { --index: 11; }
li:nth-of-type(12) { --index: 12; }
li:nth-of-type(13) { --index: 13; }
li:nth-of-type(14) { --index: 14; }
li:nth-of-type(15) { --index: 15; }
li:nth-of-type(16) { --index: 16; }
li:nth-of-type(17) { --index: 17; }
li:nth-of-type(18) { --index: 18; }
li:nth-of-type(19) { --index: 19; }
li:nth-of-type(20) { --index: 20; }
li:nth-of-type(21) { --index: 21; }
li:nth-of-type(22) { --index: 22; }
li:nth-of-type(23) { --index: 23; }
li:nth-of-type(24) { --index: 24; }
li:nth-of-type(25) { --index: 25; }
li:nth-of-type(26) { --index: 26; }
li:nth-of-type(27) { --index: 27; }
li:nth-of-type(28) { --index: 28; }
li:nth-of-type(29) { --index: 29; }
li:nth-of-type(30) { --index: 30; }
li:nth-of-type(31) { --index: 31; }
li:nth-of-type(32) { --index: 32; }





/*********************/
/* CUSTOM PROPERTIES */
/*********************/
:root {
	--background-color: #78c1ff;
	--opacity: 100%;
	--animation-duration: calc( 1800s / var(--speed, 1));

	/* wheel */
	--primary-frame-color: #eeeeee;
	--secondary-frame-color: #cccccc;
	--quaternary-frame-color: #f5f5f5;

	--primary-dark-metal-color: #777777;
	--primary-dark-metal-color-translucent: #77777766;
	--tertiary-dark-metal-color: #111111;

	/* circles, spokes and triangles */
	--center-circle-color: #aaaaaa;
	--box-shadow-color: #00000000;
	--primary-spokes-color: #777777;

	/* cabin */
	--primary-box-shadow-color: #ffffff;
	--secondary-box-shadow-color: #0008;
	--primary-gradient-color: #fff4;

	/* stand */
	--primary-bearings-color: #ff5000;
	--primary-entry-color: #896b60;
	--overhang-color: #f5f5f5;
	--spear-color: #eeeeee;
	--primary-bearing-color: #e0e0e0;
	--secondary-bearing-color: #eeeeee;
	--bearing-gradient:conic-gradient(#fff3 90deg,	#0003 90deg 180deg,#fff3 180deg 270deg,	#0003 270deg );
	--primary-pale-color: #ececec;
	--secondary-pale-color: #eeeeee;

	/* backside */
	--cables-color: #e0e0e0;
	--pillar-color: #e0e0e0;
	--foot-color: #e0e0e0;

	/* nav */
	--menu-color: #f2f5f7;
	
	--blue-button-color: #012169;
	--red-button-color: #c8102e;
	--hover-color: #c8102e;
	--disabled-color: #00000040;
	--button-hover-opacity: 40%;

	--count-color: #ffffff;
}

:root[data-color-mode="night"]{
	--background-color: #111111;
	--opacity: 45%;

	/* wheel */
	--primary-frame-color: #ffb6d449;
	--secondary-frame-color: #D94496;
	--quaternary-frame-color: #F47DBB;

	--primary-dark-metal-color: #1b1b1b;
	--primary-dark-metal-color-translucent: #1b1b1b66;
	--tertiary-dark-metal-color: #111111;

	/* circles, spokes and triangles */
	--center-circle-color: #6e1140fd;
	--box-shadow-color: #fa0089;
	--primary-spokes-color: #77777727;

	/* cabin */
	--primary-box-shadow-color: #ffffff13;
	--secondary-box-shadow-color: #ff00f288;
	--primary-gradient-color: #BE6FBE11;

	/* stand */
	--primary-bearings-color: #640915;
	--primary-entry-color: #130c0c;
	--overhang-color: #25131c;
	--spear-color: #0000002c;
	--primary-bearing-color: #362020;
	--secondary-bearing-color: #4b3939;
	--primary-pale-color: #1d1d1d;
	--secondary-pale-color: #222222;

	/* backside */
	--cables-color: #f47dba00;
	--pillar-color: #6e1140fd;
	--foot-color: #6e1140fd;

	/* nav */
	--menu-color: #010101;

	--blue-button-color: #e6e6e6;
	--red-button-color: #4a4a4a;
	--hover-color: #4a4a4a;
	--disabled-color: #4a4a4a;
	--button-hover-opacity: 60%;

	--count-color: #1c1c1c;
}





/**************/
/* CONTAINERS */
/**************/
html {
	height:100%;
}

body {
	height:100%;
	display:grid;
	grid-template-rows: 1fr min-content;
	gap:2em;
	overflow:hidden;

  background-color: var(--background-color);
}

/* eye container */
article {
	position: relative;
	opacity: var(--opacity);
	font-size: clamp(.8em, 2.2vmin, 1.35em);
}

/* options container */
menu {
	z-index: 9999;

	padding:clamp(calc(.5em + .5vmin), 3vmin, 1.25em);
	display: flex;
	justify-content: center;
	align-items: start;
	gap:clamp(calc(.5em + .5vmin), 3vmin, 2em);

	background-color: var(--menu-color);
	font-size:clamp(.8em, 2vmin, 1em);
}





/********/
/* MENU */
/********/

/* button */
button {
	display:block;

	appearance:none;
	background:none;
	border:none;

	font-family: custon_london-eye_font, sans-serif;
	font-size: 2.6em;
	color: var(--blue-button-color);

	transition: .15s;
}

.button-class-red {
	color: var(--red-button-color);
}

button:not([disabled]):hover, 
button:not([disabled]):focus {
	color: var(--hover-color);
	opacity: var(--button-hover-opacity);
}

button:active {
	transform: scale(.92);
}

button[disabled] {
	color: var(--disabled-color);
}

/* counter */
.li-count {
	height: 3.6em;
	aspect-ratio:1/1;
	margin:-.5em;
	display: grid;
	place-items:center;

	background-color: var(--count-color);
	border-radius: 50%;
	color: var(--blue-button-color);
}

output {
	display: grid;
	place-items:center;

	font-family: johnston-itc-std-bold, sans-serif;
}

@media (min-width: 44em) {
	body {
		padding-bottom:1em;
	}

	menu {
		justify-self:center;
		border-radius: 5em;
	}
}





/*********/
/* WHEEL */
/*********/
@keyframes turning {
	to {
		transform: rotate(1turn);
	}
}

#wheel {
	position: absolute;
	inset:50%;

	display:grid;
	place-items:center;

	animation: turning var(--animation-duration) infinite linear;
}

[data-play-state="false"] #wheel {
	animation-play-state: paused;
}

[data-direction="reverse"] #wheel {
	animation-direction: reverse;
}





/***********/
/* CIRCLES */
/***********/
.center-circle,
.inside-circle,
.outside-circle {
	position: absolute;
	width: var(--circle-size);
	aspect-ratio:1/1;
	border-radius: 50%;
}

.center-circle {
	--circle-size:1.3em;
	background-color: var(--center-circle-color);
}

.inside-circle {
	--circle-size:27em;
	border: .25em solid var(--quaternary-frame-color);
}

.outside-circle {
	--circle-size:30em;
	border: .3em solid var(--secondary-frame-color);
	box-shadow:
		inset 0em 0em 5em 1em var(--box-shadow-color),
		0em 0em 5em 1em var(--box-shadow-color);
}





/*******************************/
/* WHEEL CONTAINERS & CHILDREN */
/*******************************/
.container {
	position: absolute;
	z-index: -3;
	display:grid;
	place-items:center;
}

.container li {
	position: absolute;

	display: flex;
	flex-direction:column;
	justify-content:space-between;
	align-items: center;

	transform:  rotate(calc(360deg / var(--count) * var(--index)));
}







/**********/
/* SPOKES */
/**********/
.spokes {
	--count:64;
}

.spokes li {
	width: .05em;
	height: 27em;

	background-image: linear-gradient(
			var(--primary-dark-metal-color),
			var(--primary-dark-metal-color-translucent),
			var(--primary-dark-metal-color)
		);  
}

/* spoke ends */
.spokes li::after,
.spokes li::before  {
	content:"";
	width: .4em;
	height: .5em;
	border-radius: 50%;
	background-color: var(--primary-frame-color);
}





/*************/
/* TRIANGLES */
/*************/
.wheel-triangles {
	--count:64;
}
.cabin-ends  {
	--count:32;
}

.wheel-triangles li {
	height: 30em;
}
.cabin-ends li {
	height: 32.6em;
}

:is(.wheel-triangles, .cabin-ends) li::before,
:is(.wheel-triangles, .cabin-ends) li::after {
	content:"";
	height: 1.7em;
	aspect-ratio:1/1;
	background-color: var(--primary-frame-color);
}

.wheel-triangles li::before {
	clip-path: polygon(0 0, 10% 0, 50% 95%, 90% 0, 100% 0, 60% 100%, 40% 100%);
}
.wheel-triangles li::after {
	clip-path: polygon(0 100%, 10% 100%, 50% 5%, 90% 100%, 100% 100%, 60% 0, 40% 0);
}

.cabin-ends li::before {
	clip-path: polygon(30% 40%, 70% 40%, 100% 100%, 90% 100%, 60% 40%, 40% 40%, 10% 100%, 0 100%);
}
.cabin-ends li::after {
	clip-path: polygon(30% 60%, 70% 60%, 100% 0, 90% 0, 60% 60%, 40% 60%, 10% 0, 0 0);
}





/**********/
/* CABINS */
/**********/
.cabins {
	z-index: 3;
}

.cabins li {
	--cabin-size:1.2em;

	height: var(--cabin-size);
  aspect-ratio:1/1;  
  transform: rotate( calc(360deg / 32 * var(--index)) ) translateX(16em) rotate( calc(-360deg / 32 * var(--index)) );
}

.cabins li::after {
	content:"";
	flex-grow:1;
	align-self:stretch;

	background-image: 
		radial-gradient(at 25% 25%, var(--primary-box-shadow-color),transparent 50%),
		linear-gradient(to top,var(--primary-frame-color) 30%,  var(--primary-gradient-color) 30%);		
	border: solid .1em var(--tertiary-dark-metal-color);
	border-radius: 50%;
	box-shadow: inset -.125em -.125em .125em var(--secondary-box-shadow-color);
	
	/* -webkit-backdrop-filter: blur(3px); */
	/* backdrop-filter: blur(3px); */
	
	animation: turning var(--animation-duration) infinite linear reverse;
}

[data-play-state="false"] .cabins li::after  {
	animation-play-state: paused;
}

[data-direction="reverse"] .cabins li::after {
	animation-direction: normal;
}





/************/
/* BACKSIDE */
/************/
.backside {
	position: absolute;
	top: 50%;
	left: 50%;

	display:grid;
	place-items:center;
}

.backside > * {
	position: absolute;
}

/* center point */
.center-point {
	width: .6em;
	aspect-ratio:1/1;

	border-radius: 50%;
	background-color: var(--tertiary-dark-metal-color);
	box-shadow: 
	0 0 0 .15em var(--primary-dark-metal-color);
}

/* cables */
.cables {
	z-index: -3;
	transform: translateY(9.5em);
	display: flex;
	gap:.1em;
}

.cables li {
	height: 16em;
	width: .12em;
	background-color: var(--cables-color);
}

/* bearing */
.bearing {
	z-index: -1;
	width: 1.65em;
	height: .45em;
	transform: translateY(.6em);
	clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
	background-color: var(--tertiary-dark-metal-color);
}

/* pillars */
.left-pillar, .right-pillar {
	z-index: -2;
	height: 14.5em;
	width: 1em;
	clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
	background-color: var(--pillar-color);
}

.left-pillar {
	transform: translate(-1.4em, 7.5em) rotate(-170deg);
}

.right-pillar {
	transform: translate(1.4em, 7.5em) rotate(170deg);
}

/* feet */
.left-foot, .right-foot {
	z-index: -2;
	height: 3.5em;
	width: .8em;
	background-color: var(--foot-color);
}

.left-foot {
	transform: translate(2.85em, 15.75em) rotate(170deg);
}

.right-foot {
	transform: translate(-2.85em, 15.75em) rotate(-170deg);
}





/*********/
/* STAND */
/*********/
.stand * {
	position: absolute;
	top: 50%;
	left: 50%;
}

.overhang {
	z-index: 2;
	width: 21.5em;
	height: .9em;
	transform: translate(-50%, 15.4em);
	clip-path: polygon(0 0, 100% 0, 99% 100%, 1% 100%);
	background-color: var(--overhang-color);
}

.plateau {
	z-index: 2;
	width: 35em;
	height: .5em;
	transform: translate(-50%, 17.3em);
	background-color: var(--primary-dark-metal-color);
}

.left-spear, .right-spear {
	z-index: -1;
	width: 5em;
	height: .8em;
	clip-path: ellipse(50% 15% at 50% 50%);
	background-color: var(--spear-color);
}
.left-spear {
	transform: translate(-14em, 15em) rotate(-110deg);
}
.right-spear {
	transform: translate(9em, 15em) rotate(110deg);
}

.entry {
	z-index: -1;
	width: 10em;
	height: 1.4em;
	transform: translate(-50%, 16.3em);
	background-color: var(--primary-entry-color);
}

/* columns */
.stand-column {
	z-index: 1;
}
.stand-column.right {
	transform: scaleX(-1);
}

/* bearing */
.stand-bearing {
	transform: translate(-5.5em, 3.9em) rotate(-24.5deg);
}

.stand-bearing li:nth-of-type(1) {
	z-index: 1;
	width: 4em;
	height: .5em;
	transform: translate(5em, 14em);
	clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
	background-color: var(--primary-bearing-color);
}

.stand-bearing li:nth-of-type(2) {
	z-index: 1;
	width: 4em;
	height: .25em;
	transform: translate(5em, 13.8em);
	clip-path: polygon(5% 0, 95% 0, 100% 100%, 0% 100%);
	background-color: var(--secondary-bearing-color);
}

.stand-bearing li:nth-of-type(4) {
	width: 1.4em;
	height: .7em;
	transform: translate(6.3em, 13.3em);
	background-color: var(--primary-bearings-color);
}

.stand-bearing :is(li:nth-of-type(3), li:nth-of-type(5)) {
	width: .6em;
	height: .7em;
	border-radius: 50% 50% 0 0;
	background-color: var(--primary-bearings-color);
}
.stand-bearing li:nth-of-type(3) {
	transform: translate(5.5em, 13.3em);
}
.stand-bearing li:nth-of-type(5) {
	transform: translate(7.9em, 13.3em);
}

.stand-bearing li:nth-of-type(3)::after,
.stand-bearing li:nth-of-type(5)::after  {
	content:"";
	position:absolute;
	left:.1em;
	top:.1em;

	width:.4em;
	aspect-ratio:1/1;
	background-image:var(--bearing-gradient);
	border-radius:50%;

	animation: turning calc( var(--animation-duration) / 75) infinite linear;
}

.stand-column.left .stand-bearing li:nth-of-type(3)::after,
.stand-column.left .stand-bearing li:nth-of-type(5)::after {
	animation-direction: normal;
}

.stand-column.right .stand-bearing li:nth-of-type(3)::after,
.stand-column.right .stand-bearing li:nth-of-type(5)::after {
	animation-direction: reverse;
}

[data-direction="reverse"] .stand-column.left .stand-bearing li:nth-of-type(3)::after,
[data-direction="reverse"] .stand-column.left .stand-bearing li:nth-of-type(5)::after {
	animation-direction: reverse;
}

[data-direction="reverse"] .stand-column.right .stand-bearing li:nth-of-type(3)::after,
[data-direction="reverse"] .stand-column.right .stand-bearing li:nth-of-type(5)::after {
	animation-direction: normal;
}

[data-play-state="false"] .stand-bearing li:nth-of-type(3)::after,
[data-play-state="false"] .stand-bearing li:nth-of-type(5)::after {
	animation-play-state: paused;
}



/* pales */
.pale {
	z-index: -25;
}

.pale.left, .pale.right {
	width: .3em;
	display: flex;
	background-color: var(--primary-pale-color);
}
.pale.left {
	transform: translate(5.9em, 14em);
	height: 3.5em;
}
.pale.right {
	transform: translate(7.5em, 13em);
	height: 4.5em;
}

.pale.one, .pale.two, .pale.three, .pale.four, .pale.five {
	height: .2em;
	width: 1.7em;
	display: flex;
	background-color: var(--secondary-pale-color);
}
.pale.one {
	transform: translate(6em, 15.1em);
}
.pale.two {
	transform: translate(6em, 14.6em) rotate(-24.5deg);
}
.pale.three {
	transform: translate(5.6em, 16.55em) rotate(-55deg);
}
.pale.four {
	transform: translate(6.4em, 16.55em) rotate(55deg);
}
.pale.five {
	transform: translate(6em, 17em);
}