:root {
  --frame-color: #555;
  --ship-color: #1a1a1a;
  --interior-color: #7a7979;
  --interior-light: rgb(128, 98, 0);

  /* controlpanel */

  --button-color: crimson;
  --button-depth-color: rgb(150, 13, 40);
  --button-font-color: white;
}

@font-face {
  font-family: 'SpaceFont'; 
  src: url('fonts/deltha/Deltha.otf') format('opentype'); 
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  /* Diep donkerblauw naar zwart */
  background: radial-gradient(circle at center, #000a1a 0%, #000000 80%);
  overflow: hidden;
  position: relative;
}

h1{
  color: white;
  transform: rotate(180deg);
  text-align: center;
  font-family: "SpaceFont";
  padding: 0.2rem;
}



/* *MARK: planet */
/* BRON: Nils Binder - https://codepen.io/enbee81/pen/wvOVypZ?editors=1100
 */
@property --p-hue { syntax: "<number>"; inherits: true; initial-value: 120; }
@property --p-size { syntax: "<number>"; inherits: true; initial-value: 200; }
@property --p-top { syntax: "<number>"; inherits: true; initial-value: 30; }
@property --p-left { syntax: "<number>"; inherits: true; initial-value: 60; }

@keyframes planet-rng {
  from { --p-hue: 0; --p-size: 100; --p-top: 30; --p-left: 20; }
  to { --p-hue: 360; --p-size: 150; --p-top: 35; --p-left: 80; }
}
/* De planeet container */
body {
  animation: planet-rng 0.1s linear infinite;
}

body > figure {
  width: calc(var(--fixed-size, 200) * 1px);
  height: calc(var(--fixed-size, 200) * 1px);
  top: calc(var(--fixed-top, 20) * 1%);
  left: calc(var(--fixed-left, 50) * 1%);
  
  background: radial-gradient(
    circle at 30% 30%, 
    hsl(var(--fixed-hue), 70%, 50%), 
    hsl(calc(var(--fixed-hue) + 40), 80%, 20%), 
    #000
  );
  
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  box-shadow: -10px -10px 30px rgba(0,0,0,0.8) inset;
  
  transform: translateX(calc(var(--steer, 0) * -8px));
}



/* Atmosfeer/Gloed */
body > figure > div {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, transparent 60%, rgba(0, 255, 255, 0.1) 100%);
  filter: blur(5px);
}



body:has(input[value="2"]:checked) {
  animation-play-state: running;
}

body:has(input[value="2"]:checked) > figure {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

body:not(:has(input[value="2"]:checked)) {
  --fixed-hue: var(--p-hue);
  --fixed-size: var(--p-size);
  --fixed-top: var(--p-top);
  --fixed-left: var(--p-left);
}

body:has(input[value="1"]:checked) {
  animation-play-state: paused;
  --fixed-hue: var(--p-hue);
  --fixed-size: var(--p-size);
  --fixed-top: var(--p-top);
  --fixed-left: var(--p-left);
}

body:has(input[value="1"]:checked) > figure {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-out; 
}

body:has(input[value="2"]:checked) > figure {
  opacity: 0;
  visibility: hidden;
  transition: opacity 3s ease-in-out;
}





/* *MARK: star  */

body>span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  animation: cruise var(--duration, 3s) linear infinite;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0.4, 1);
}


/* hoeken, snelheden en grote negatieve delays */

/* Kwadrant 1: Rechtsboven */
body>span:nth-of-type(12n+1) { --x: 40vw  --y: -40vh; --angle: 45deg; --duration: 2.1s; --initial-delay: -10s;}
body>span:nth-of-type(12n+2) { --x: 20vw; --y: -45vh; --angle: 20deg; --duration: 3.5s; --initial-delay: -45s;}
body>span:nth-of-type(12n+3) { --x: 45vw; --y: -20vh; --angle: 70deg; --duration: 2.8s; --initial-delay: -80s;}

/* Kwadrant 2: Rechtsonder */
body>span:nth-of-type(12n+4) { --x: 40vw; --y: 40vh; --angle: 135deg; --duration: 4.2s; --initial-delay: -30s;}
body>span:nth-of-type(12n+5) { --x: 45vw; --y: 15vh; --angle: 110deg; --duration: 1.9s; --initial-delay: -110s;}
body>span:nth-of-type(12n+6) { --x: 15vw; --y: 45vh; --angle: 160deg; --duration: 3.1s; --initial-delay: -65s;}

/* Kwadrant 3: Linksonder */
body>span:nth-of-type(12n+7) { --x: -40vw; --y: 40vh; --angle: 225deg; --duration: 2.5s; --initial-delay: -15s;}
body>span:nth-of-type(12n+8) { --x: -15vw; --y: 45vh; --angle: 200deg; --duration: 3.0s; --initial-delay: -90s;}
body>span:nth-of-type(12n+9) { --x: -45vw; --y: 20vh; --angle: 250deg; --duration: 2.2s; --initial-delay: -55s;}

/* Kwadrant 4: Linksboven */
body>span:nth-of-type(12n+10) { --x: -40vw; --y: -40vh; --angle: 315deg; --duration: 3.8s; --initial-delay: -20s;}
body>span:nth-of-type(12n+11) { --x: -45vw; --y: -15vh; --angle: 290deg; --duration: 2.7s; --initial-delay: -105s;}
body>span:nth-of-type(12n+12) { --x: -10vw; --y: -45vh; --angle: 340deg; --duration: 3.2s; --initial-delay: -40s;}

body>span:nth-of-type(even) {
  animation-delay: -40s;
}
body>span:nth-of-type(3n) {
  animation-delay: -75s;
}

/* Maakt sommige sterren groter feller */
body>span:nth-of-type(3n) {
  width: 1px;
  height: 1px;
  opacity: 0.5;
}
body>span:nth-of-type(5n) {
  box-shadow: 0 0 10px 2px white;
}

body>span:nth-of-type(5n) {
  width: 3px;
  height: 3px;
  box-shadow: 0 0 8px white;
}


@keyframes cruise {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
transform: translate(
        calc(-50% + var(--x) + (var(--steer, 0) * -2px)), 
        calc(-50% + var(--y))
      ) scale(2);
    opacity: 0;
  }
}



/* *MARK: Ship styling  */

/* master div */
body>div:first-of-type {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* top exteriorship */
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8vh;
  background: var(--ship-color);
  clip-path: polygon(0% 100%, 0% 40%, 12% 0%, 87% 0%, 100% 40%, 100% 100%);
  border-top: 4px solid #333;
  transform: rotate(180deg);
  z-index: 1;
}

/* bottom exterior ship */
body>div>section:not(:first-of-type) {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 26vh;
  background: var(--ship-color);
  clip-path: polygon(0% 100%, 0% 40%, 20% 0%, 80% 0%, 100% 40%, 100% 100%);
  border-top: 4px solid #333;
  z-index: 1;

}


/* Zorgt dat button en hendel klikbaar zijn */
section {
  pointer-events: auto;
  z-index: 15;
}

/* controlpanel backdrop */
section>div:first-child {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 23vh;
  background: var(--interior-color);
  clip-path: polygon(0% 100%, 0% 40%, 20% 0%, 80% 0%, 100% 40%, 100% 100%);
  box-shadow: 0px 10px 20px 0px var(--interior-light) inset;

  border-top: 4px solid #333;
  z-index: 1;
}

/* controlpanel container */
section>div:first-child>section {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vw;
  padding-top: 2vh;

}

body>div {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;

}

/* crack in windshield */
img {
  height: 300px;
  width: 300px;
  position: absolute;
  top: 20%;
  left: 60%;

  filter: invert(1) brightness(2) contrast(1.5) drop-shadow(0 0 5px white);
  opacity: 0.3;
}


/* De gebogen frames */
/*  De tweede div in de master container */
body>div:first-of-type>div:first-of-type {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  &::before,
  &::after {
    content: "";
    position: absolute;
    bottom: -5vh;
    width: 45vw;
    height: 130vh;
    border: 6px solid var(--frame-color);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    top: -15vh;
  }

  /* Linker frame */
  &::before {
    right: -26vw;
    top: -54vh;
    border-radius: 100% 0 0 0;
    border-right: none;
    border-bottom: none;
  }

  /* Rechter frame */
  &::after {
    left: -26vw;
    top: -54vh;
    border-radius: 0 100% 0 0;
    border-left: none;
    border-bottom: none;
  }
}


/* *MARK: Header */

/* BRON: https://codepen.io/oliviale/pen/xxboXzo */
/* De container van de hendel */
body > div:first-of-type > section:first-of-type {
  position: absolute;
  top: 0;
  left: 70%;
  z-index: 100;
  pointer-events: auto;
}

/* De Checkbox */
body > div:first-of-type > section:first-of-type input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

/* De Hendel (het label) */
body > div:first-of-type > section:first-of-type label {
  width: 7em; 
  height: 3em;
  background: #2e394d;
  display: block;
  border-radius: 50px;
  position: relative;
  border: 2px solid #333;
  
  transform-origin: 20% center; 
  transition: all .3s ease;
  cursor: pointer;
}

/* Het Bolletje  */
body > div:first-of-type > section:first-of-type label span {
  content: '';
  display: block;
  position: absolute;
  width: 2.3em;
  height: 2.3em;
  top: .25em;
  left: .25em;
  border-radius: 2em;
  border: 2px solid #88cf8f;
  background: #fff;
  
  transition: 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}


body > div:first-of-type > section:first-of-type:has(input:checked) label {
  transform: rotate(90deg);
}

body > div:first-of-type > section:first-of-type:has(input:checked) label span {
  transform: translateX(4.3em); 
  transition-delay: .2s; 
  border-color: #ffcc00;
}


body:has(input[name="theme"]:checked) {
  background: radial-gradient(circle at center, #001500 0%, #000000 100%);
  transition-delay: 0.7s;
}

body:has(input[name="theme"]:checked) > span {
  background: #00ff00;
  box-shadow: 0 0 8px #00ff00;
  filter: blur(0.5px);
  transition-delay: 0.7s;
}

body:has(input[name="theme"]:checked) > figure {
  filter: brightness(1.5) grayscale(1) sepia(1) hue-rotate(80deg) saturate(4);
  box-shadow: 0 0 40px rgba(0, 255, 0, 0.5);
  transition-delay: 0.7s;
}


body:has(input[name="theme"]:checked)::after {
  content: "";
  position: fixed;
  inset: 0;

  /* GEMINI */
  /* Een patroon van horizontale lijnen en een subtiele korrel */ 
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 255, 0, 0.05) 50%
  ), 
  linear-gradient(90deg, rgba(255, 0, 0, 0), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0));
  background-size: 100% 4px, 3px 100%;
  z-index: 5; 
  pointer-events: none;
  animation: flicker 1s infinite;
}

@keyframes flicker {
  0% { opacity: 0.9; }
  50% { opacity: 1; }
  100% { opacity: 0.95; }
}







/* *MARK:Ruitenwisser*/
body > div > aside {
  position: absolute;
  bottom: 26vh;       
  left: 50%;
  width: 8px;
  height: 45vh;      
  background: #222;
  border: 1px solid #444;
  border-radius: 5px;
  z-index: 5;
  
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(-90deg);
  
  transition: transform 0.6s ease-in-out;
  pointer-events: none;
}

/* Het rubberen gedeelte  */
body > div > aside::after {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 12px;
  height: 90%;
  background: #111;
  border-radius: 3px;
  box-shadow: inset -2px 0 5px rgba(255,255,255,0.1);
}





section > div:first-child > section > label:first-of-type {
  width: 70px;
  height: 50px;
  position: relative;
  display: block;
  cursor: pointer;
  z-index: 11;
}

section > div:first-child > section > label:first-of-type div:first-of-type {
  width: 100%;
  height: 100%;
  background: var(--button-color);
  font-size: 2rem;
  color: var(--button-font-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7mm;
  outline: 2px solid rgb(36, 38, 34);
  transition: 0.2s;
  position: relative;
  z-index: 2;
}

section > div:first-child > section > label:first-of-type div:last-of-type {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--button-depth-color);
  top: 10px;
  left: 0;
  border-radius: 7mm;
  outline: 2px solid rgb(36, 38, 34);
  z-index: 1;
}



body:has(section > div:first-child > section > label:first-of-type input:checked) > div:first-of-type > aside:first-of-type {
  animation: wipe-animation 1s ease-in-out 2 alternate forwards;
}

section > div:first-child > section > label:first-of-type:has(input:checked) div:first-of-type {
  animation: button-press ease-in-out 0.5s;
}
section > div:first-child > section > label:first-of-type input[type="checkbox"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
}


body > div:first-of-type > aside:first-of-type {
  animation: wipe-off 1s ease-in-out 2 alternate forwards;
}

body:has(section > div:first-child > section > label:first-of-type input:checked) > div:first-of-type > aside:first-of-type {
  animation: wipe-on 1s ease-in-out 2 alternate forwards;
}
@keyframes wipe-on {
  0% { transform: translateX(-50%) rotate(-90deg); }
  100% { transform: translateX(-50%) rotate(85deg); }
}

@keyframes wipe-off {
  0% { transform: translateX(-50%) rotate(-90deg); }
  100% { transform: translateX(-50%) rotate(85deg); }
}

section > div:first-child > section > label:first-of-type:has(input) div:first-of-type {
  animation: button-press-v2 0.5s ease-in-out;
}

section > div:first-child > section > label:first-of-type:has(input:checked) div:first-of-type {
  animation: button-press-v1 0.5s ease-in-out;
}

@keyframes button-press-v1 { 50% { transform: translateY(10px); } }
@keyframes button-press-v2 { 50% { transform: translateY(10px); } }




















/* *MARK: speedhendel */
section>div:first-child>section>div:nth-of-type(1) {
  width: 50px;
  height: 120px;
  background: #111;
  border: 3px solid #444;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  flex-shrink: 0;
  z-index: 10;

  /* De visuele Hendel-Knop (het rode blokje) */
  &::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 40px;
    height: 30px;
    background: var(--button-color);
    border: 2px solid #000;
    border-radius: 5px;
    box-shadow:
      inset 0 0 8px rgba(255, 255, 255, 0.4),
      0 5px 10px rgba(0, 0, 0, 0.5);
    z-index: 11;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  /* De Radio Buttons  */
  &>input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 50%;
    margin: 0;
    cursor: pointer;
    z-index: 12;
    position: relative;
  }

  /*schuif de hendel omlaag */
  &:has(input[value="1"]:checked)::after {
    transform: translateY(75px);
  }
}


/* Cruise Speed (Sloom) */
body:has(input[value="1"]:checked)>span {
  animation-duration: 160s;
}









/* *MARK: Stuur */
section > div:first-child > section > aside {
  width: 120px;
  height: 80px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 500px;
  z-index: 20;
}

/* De handvatten  */
aside > div > div {
  position: absolute;
  width: 25px;
  height: 60px;
  background: #222;
  border: 4px solid #111;
  top: -25px;
  border-radius: 15px;
}

/* Links handvat */
aside > div > div:first-child { left: -15px; }
/* Rechts handvat */
aside > div > div:last-child { right: -15px; }



/* Het draaiende deel van het stuur */
aside > div {
  width: 100px;
  height: 20px;
  background: #333;
  border: 4px solid #111;
  border-radius: 10px;
  position: relative;
  transform: rotate(calc(var(--steer) * 1deg)); 
  transition: transform 0.1s ease-out;
}


section > div:first-child > section > aside input[type="range"] {
  position: absolute;
  inset: 0;
  opacity: 0; 
  z-index: 25; 
  cursor: ew-resize;
  width: 100%;
}
















/* *MARK: Display  */
section > div:first-child > section > div:nth-of-type(2) {
  width: 180px;
  height: 80px;
  background: #222;
  border: 4px solid #444;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', Courier, monospace;
  box-shadow: inset 0 0 15px rgba(0, 255, 255, 0.2);
  color: white;
  flex-shrink: 0;

  & > div:first-child {
    color: #0ff;
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 5px;
    text-shadow: 0 0 5px #0ff;
  }

  & > div:last-child::after {
    content: "cruise";
    color: rgb(5, 245, 37);
    font-size: 1.8rem;
    font-weight: bold;
    text-shadow: 0 0 10px #0ff;
  }
}


body:has(input[value="2"]:checked) section > div:first-child > section > div:nth-of-type(2) > div:last-child::after {
  animation: countdown 3s steps(1) forwards;
}

/* De Sterren Warp  */
body:has(input[value="2"]:checked)>span {
  filter: blur(1px);
  animation:warp-tunnel 0.5s linear infinite;
  animation-delay: 3s; 
  opacity: 1;
  animation-duration: 0.4s;

  opacity: 1;
}

body:has(input[value="2"]:checked)::before {
  animation: warp-shake 0.2s infinite 3s;
  opacity: 1;
  transition: opacity 0.2s 3s;
}

body:has(input[value="2"]:checked)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  z-index: 100;
  pointer-events: none;
  animation: warp-flash 0.5s ease-out 3s;
}

/* Blauwe gloed bij maximale snelheid */
body:has(input[value="2"]:checked)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 30%, rgba(0, 100, 255, 0.2) 100%);
  z-index: 0;
  pointer-events: none;
  animation: warp-shake 0.2s infinite;
}

/**MARK: warp animaties */

body:has(input[value="2"]:checked) section>div:first-child {
  animation: light-flicker 0.2s infinite;
}

@keyframes light-flicker {
  0%,
  100% {
    box-shadow: 0px 10px 20px 0px var(--interior-light) inset;
  }

  50% {
    box-shadow: 0px 10px 40px 5px rgba(255, 200, 0, 0.5) inset;
  }
}


@keyframes countdown {
  0% { content: "3"; color: orange; text-shadow: 0 0 10px orange; }
  33% { content: "2"; color: orange; }
  66% { content: "1"; color: red; text-shadow: 0 0 20px red; }
  100% { content: "50% C"; color: #fff; text-shadow: 0 0 20px #0ff; }
}

@keyframes warp-flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* De shake toepassen op de hele cockpit  */
body:has(input[value="2"]:checked) header,
body:has(input[value="2"]:checked) section,
body:has(input[value="2"]:checked) img,
body:has(input[value="2"]:checked) body>div {
  animation: warp-shake 0.1s infinite 3s;
}

@keyframes warp-shake {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(2px, -2px);
  }

  50% {
    transform: translate(-2px, 2px);
  }

  75% {
    transform: translate(-2px, -2px);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* Omdat de header al een transform (rotate) heeft */
body:has(input[value="2"]:checked) header {
  animation: warp-shake-header 0.1s infinite 3s;
}

@keyframes warp-shake-header {
  0% {
    transform: rotate(180deg) translate(0, 0);
  }

  50% {
    transform: rotate(180deg) translate(2px, 2px);
  }

  100% {
    transform: rotate(180deg) translate(0, 0);
  }
}


/* FOV en warp tunnel + fuel gauge blink (per ongeluk)*/
body:has(input[value="2"]:checked) span {
  animation:
    FOV 3s linear forwards,
    warp-tunnel 0.5s linear infinite 3s;
  opacity: 1;
}

 /*Animatie  */ 
 /* BRON: GEMINI */
@keyframes FOV {
  0% {
    transform: translate(calc(-50% + var(--x) * 0.5), calc(-50% + var(--y) * 0.6)) scale(0.8);
    opacity: 1;
  }

  100% {
    transform: translate(calc(-50% + var(--x) * 0.49), calc(-50% + var(--y) * 0.4)) scale(0.5);
    opacity: 0.9;
  }
}

/* Animatie 2: */
@keyframes warp-tunnel {
  0% {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scaleY(1);
    opacity: 1;
  }

  100% {

    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-100vh) scaleY(30) scaleX(0.1);
    opacity: 0;
  }
}

/* warp tunnel delays */
body:has(input[value="2"]:checked) span:nth-of-type(4n+1) {
  animation-delay: 0s, 3.0s;
}

body:has(input[value="2"]:checked) span:nth-of-type(4n+2) {
  animation-delay: 0s, 3.2s;
}

body:has(input[value="2"]:checked) span:nth-of-type(4n+3) {
  animation-delay: 0s, 3.4s;
}

body:has(input[value="2"]:checked) span:nth-of-type(4n+4) {
  animation-delay: 0s, 3.6s;
}



/* enter warp-flash */
body:has(input[value="2"]:checked)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  z-index: 99;
  pointer-events: none;
  animation: warp-flash 0.5s ease-out 3s;
}
/* exit warp-flash */
body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  z-index: 100;
  pointer-events: none;
  visibility: hidden;
}


body:has(input[value="1"]:checked)::after {
  animation: exit-flash 0.6s ease-out;
}

body:has(input[value="2"]:checked)::after {
  visibility: visible;
  animation: none;
  opacity: 0;
}

@keyframes exit-flash {
  0% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}











/* *MARK: Fuel gauge container  */
/* BRON: https://devsnap.me/css-toggle-switches */
section > div:first-child > section > label:last-of-type {
  cursor: pointer;
  position: relative; 
  transform: rotate(4deg);
  transition: all 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-family: 'Courier New', Courier, monospace;
  z-index: 10;
  display: block;

  /* Kantelen als checkbox uit staat */
  &:not(:has(input:checked)) {
    transform: rotate(-4deg);
    
    /* Naald valt naar links (E-kant) */
    & > div > div > div > div:last-child {
      margin-left: 0px; 
      transform: rotate(-5deg);
    }
  }

  input[type="checkbox"] {
    display: none;

    &:checked ~ div:last-child {
      transform:translate(100px);
    }
  }

  /* De grijze buitenrand */
  & > div > div {
    background-color: #444;
    width: 205px;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 10px;

    /* De zwarte binnenkant meter */
    & > div {
      background-color: #080808;
      display: flex;
      padding: 20px 40px;
      position: relative;

      /* Wit stripe container */
      & > div:nth-of-type(2) {
        display: flex;

        /* Algemene streepjes */
        & > span {
          color: white;
          width: 10px;
          position: relative;

          &::after {
            content: ' ';
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 25px;
            width: 2px;
            height: 10px;
            background: #8B8B8B;
            position: relative;
          }

          /* De grote streepjes met letters (E, 1/2, F) */
          &:nth-child(1), &:nth-child(6), &:nth-child(11) {
            text-align: center;
            font-size: 1rem;
            font-weight: bold;

            &::after {
              height: 15px;
              margin-top: 10px;
            }
          }

          /* De rode E */
          &:nth-child(1) { color: #CB3A3A; }
          /* De groene F */
          &:nth-child(11) { color: #03c703; }

          & small {
            font-size: 8px;
            font-weight: normal;
          }
        }
      }

      /* De indicator  */
      & > div:last-child {
        width: 10px;
        display: block;
        top: 0;
        bottom: 0;
        position: absolute;
        margin-left: 0px;
        transition: all 1.8s ease;
        background-color: rgba(250, 22, 22, 0.3);
        pointer-events: none;
      }
    }
  }
}