*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

/* MARK: COLORS
/* -------- Variables colors --------  */
:root {  
  color-scheme:light dark;
	
  --color-bg:light-dark(#ebeef1, #1A1B1F);
  --color-text-bg:light-dark(#ebeef1, #232429);
  --color-text:light-dark(#b1b1b1, #FFb3de);
  --color-text-np:light-dark(#b1b1b1, #4f4f4f);
  --color-text-p:light-dark(#FF69B4, #FFb3de);
  --color-border:light-dark(#e5e5e5, #17181c);
  --color-bsdw-one:light-dark(#00000029, #101114);
  --color-bsdw-two:light-dark(#ffffffb3, #24252a);

  --color-cmd-yellow:light-dark(#000, #FFF021);
  --color-cmd-lavendel:light-dark(#000 ,#F0EBF0);
}

/* VRAAG!!: DEZE TOEVOEGEN AAN :ROOT HIERBOVEN? */
@media (prefers-color-scheme:light) {
  :root {
    --color-one: hsl(
			calc(360 * var(--hue, .9)) 
			calc(100% * var(--saturation, 1)) 
			calc(100% * var(--lightness, .5)) 
		);
  
    --color-two: hsl(
			calc(360 * var(--hue, .9) + 90) 
			calc(100% * var(--saturation, 1)) 
			calc(100% * var(--lightness, .5)) 
		);
  }
}

@media (prefers-color-scheme:dark) {
  :root {
    --color-one: hsl(
			calc(360 * var(--hue, .9)) 
			calc(100% * var(--saturation, 1)) 
			calc(100% * var(--lightness, .5)) 
		);
  
    --color-two: hsl(
			calc(360 * var(--hue, .9) + 80) 
			calc(100% * var(--saturation, 1)) 
			calc(100% * var(--lightness, .5)) 
		);
  }
}


/* MARK: Fonts
/* -------- TYPOGRAPHY TITLE --------  */
/* https://www.vectrotype.com/whoa */
@font-face {
  font-family: 'WHOA Spine';
  src: url(../fonts/WHOA-Spine-v0.4.1.ttf);

  font-weight: 100 900;
  letter-spacing: .1em .5em;
}

@font-face {
  font-family: 'WHOA Top';
  src: url(../fonts/WHOA-Top-v0.4.1.ttf);

  font-weight: 100 900;
}







/* MARK: Intro
/* -------- SECTION: INTRODUCTION --------  */
main > section:nth-of-type(1) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100dvw;
  height: 100dvh;

  border-bottom: 2px solid var(--color-border);

  & > p {
    color: var(--color-text-bg);
    text-shadow: 3px 3px 3px var(--color-bsdw-one),
                -2px -2px 2px var(--color-bsdw-two);

    font-size: clamp(3em,15vw,6em);
  }
}

h1 {
  font-family: 'WHOA Spine', sans-serif;
  font-size: clamp(10em, 25vw, 15em);

  font-weight: 200;
  letter-spacing: .1em;

  color: var(--color-one);

  animation: title-animation 4s infinite alternate ease-in-out;

  display: grid;
  grid-template-areas:
  "s    p    i1"
  "r    a    l"
  "i2   n    g";
  place-items: center;

  margin-bottom: .3em;

  & span {
    text-align: center;
    line-height: .5;

    &:nth-of-type(1) {
      grid-area: s;
    }

    &:nth-of-type(2) {
      grid-area: p;
    }

    &:nth-of-type(3) {
      grid-area: i1;
    }

    &:nth-of-type(4) {
      grid-area: r;
    }

    &:nth-of-type(5) {
      grid-area: a;
    }

    &:nth-of-type(6) {
      grid-area: l;
    }

    &:nth-of-type(7) {
      grid-area: i2;
    }

    &:nth-of-type(8) {
      grid-area: n;
    }

    &:nth-of-type(9) {
      grid-area: g;
    }
  }
}




/* MARK: General
/* -------- GENERAL LAY-OUT --------  */
body {
  font-family: 'WHOA Top', Arial, sans-serif;
  background-color: var(--color-bg);
}

h2 {
  font-size: clamp(2.5em,10vw, 3em);

  color: var(--color-text-bg);
  text-shadow: 2px 2px 2px var(--color-bsdw-one),
              -1px -1px 1px var(--color-bsdw-two);
}

h3 {
  font-size: clamp(1.5em,10vw,2.25em);
  color: var(--color-text);
}

main > section:nth-of-type(2) {
  display: grid;
  grid-template-areas: 
  "spirograph"
  "checkbox"
  "modes"
  "sliders";
  grid-auto-rows: min-content;
}






/* MARK: ANIMATION
/* -------- SECTION: ANIMATION SPIROGRAPH --------  */
section:nth-of-type(2) {
  & section:nth-of-type(2) {
    grid-area: spirograph;
    margin: 10em 0;
    display: grid;
    place-items: center;
  }

  & section:nth-of-type(2) > div {
    grid-area: 1/1;
    width: clamp(20em,50vw,40em);
    aspect-ratio: 1;
    
    --sbindex: sibling-index();    
  }

  & section:nth-of-type(2) div div {
    width: 100%;
    aspect-ratio: calc(var(--ratio) + 1);

    /*  https://9elements.github.io/fancy-border-radius/#30.36.30.43--.  */
    /*  https://codepen.io/shooft/pen/dyOXrpZ  */
    /*   border-radius: 36% 64% 57% 43% / 30% 30% 70% 70%; */
    /*  !! GEMINI voor berekening van border-radius. Vraag: hoe ik met behulp van sibling-index() elk kind net een andere vorm kan geven. Toen heb ik zelf de waardes veranderd en ook een calc voor de andere toegevoegd (niet alleen eerste).*/
    /*  Met ertussen iets meer random blobs achtig:  */
    /*  !! ChatGPT gevraagd om me te helpen met het meer random maken van de blob  */
    border-radius:
    calc(50% * var(--shape) + 3%)
    calc(50% * var(--shape) + 21%)
    calc(50% * var(--shape) + 19%) 
    calc(50% * var(--shape) + 14%)  
    /
    calc(100% * var(--shape) - 7%)
    calc(100% * var(--shape) + 11%)
    calc(100% * var(--shape) - 18%)
    calc(100% * var(--shape) + 11%);    
  }
}

/* Zodat de sibling geerfd wordt: */
@property --sbindex {
  syntax:"<integer>";
  inherits:true;
  initial-value: 1;
}



/* MARK: CHECKBOX
/* -------- SECTION: OPTIONS (open or closed) --------  */
section:nth-of-type(2) section:nth-of-type(1) {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin: 1em 1em .5em 1em;
}

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch */
section:nth-of-type(2) section:nth-of-type(1) > label {
  grid-area: checkbox;
  font-size: 1.5em;
 

  position: relative;
  display: grid;
  grid-template-areas:
  "toggle text";
  place-items: center;
  
  height: 1.5em;

  &:nth-of-type(1) {
    width: 6.75em;
  }

  &:nth-of-type(2) {
    width: 9.5em;
    margin-bottom: .5em;
  }
  

  & span:nth-of-type(2) {
    grid-area: text;
    color: var(--color-text-np);
  }

  & input {
    opacity: 0;

    &:checked ~ span:nth-of-type(2) {
      color: var(--color-text-p);
      transition: .4s;
    }

    &:checked + span:before {
      transform: translateX(1.75em);
    }
  }

  & span:nth-of-type(1) {
    grid-area: toggle;
    position: absolute;
    inset: 0;
    transition: .4s;
    width: 3em;
    box-shadow: 8px 8px 8px 0 var(--color-bsdw-one),
                -8px -8px 8px 0 var(--color-bsdw-two);
    border: .25px solid var(--color-border);
    border-radius: 5rem;

    &::before {
      position: absolute;
      top: .1em;
      content: "";
      height: 1.2em;
      aspect-ratio: 1;
      border-radius: 50%;
      place-items: center;

      background-color: var(--color-bg);
      box-shadow: 3px 3px 6px var(--color-bsdw-one),
                  -3px -3px 6px var(--color-bsdw-two);

      transition: .4s;

    }
  }  
}



/* MARK: MODES
/* -------- SECTION: MODES --------  */
section:nth-of-type(2) section:nth-of-type(3) {
  grid-area: modes;
  min-height: 30svh;
  width: 90svw;
  border-radius: 1.5rem;
  border: .25px solid var(--color-border);

  box-shadow: 10px 10px 10px 0 var(--color-bsdw-one),
              -10px -10px 10px 0 var(--color-bsdw-two);
  
  margin: .75em 1em;
  padding: .75em;

  & div {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 1em;
  }

  & div div {
    box-shadow: 8px 8px 8px 0 var(--color-bsdw-one),
                -8px -8px 8px 0 var(--color-bsdw-two);
    border: .25px solid var(--color-border);
    font-size: 1rem;
    width: 10em;
    height: 1em;
    place-content: center;
    border-radius: 5rem;
    padding: 1.5em;
    margin-bottom: 1em;

    position: relative;
    
    color: var(--color-text-np);
    
    background: var(--color-bg);
    
    transition: all .5s ease;

    &:has(input:checked) {
      box-shadow: inset 5px 5px 7px 0 var(--color-bsdw-one),
                  inset -5px -5px 7px 0 var(--color-bsdw-two);
      color: var(--color-text-p);
      border: .25px solid var(--color-border);
    }

    &:hover,
    &:focus {
      box-shadow: 5px 5px 5px 0 var(--color-bsdw-one),
                  -3px -3px 3px 0 var(--color-bsdw-two);
    }
  }

  & input[type="radio"] {
    display: none;
  }

  & label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}

/* MARK: SLIDERS
/* -------- SECTION: SLIDERS --------  */
section:nth-of-type(2) section:nth-of-type(4) {
  grid-area: sliders;

  min-height: 60svh;
  width: 90svw;
  border-radius: 1.5rem;

  box-shadow: 10px 10px 10px 0 var(--color-bsdw-one),
              -10px -10px 10px 0 var(--color-bsdw-two);
  
  margin: .75em 1em;
  padding: 1em;

  & label {
    display: grid;
    grid-template-columns: minmax(4em, 5em) clamp(5em, 30vw, 10em);
    gap: .5em;
    align-items: center;
    font-size: clamp(1.6em,5vw,2em);

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

  /* hoe je de standaard vormgeving uitzet: https://codepen.io/davidpetrey/pen/ZEORRRj */
  & input[type="range"] {
    appearance: none;

    border-radius: 5rem;
    box-shadow: 2px 2px 2px 0 var(--color-bsdw-one),
                -2px -2px 2px 0 var(--color-bsdw-two);

    accent-color: var(--color-text-p);
    border: .25px solid var(--color-border);
    background: var(--color-bg);
  }
}





/* MARK: CHECKBOXES VALUES
/* -------- SECTION: MODES --------  */
html:has([value="solid"]:checked) {
	--solid:true;
}

html:has([value="dotted"]:checked) {
	--dotted:true;
}

html:has([value="random"]:checked) {
	--random:true;
}

html:has([value="cmd"]:checked) {
	--cmd:true;
}

html:has([value="2D"]:checked) {
	--2D:true;
}

html:has([value="3D"]:checked) {
	--3D:true;
}

/* -------- SECTION: TOGGLE --------  */
html:has([value="options"]:not(:checked)) {
  --options:false;
}

html:has([value="options"]:checked) {
  --options:true;
}

html:has([value="pause"]:checked) {
  --pause:true;
}



/* -------- SOLID --------  */
@container style(--solid:true) {
  section:nth-of-type(2) div div {
    border: calc(var(--border-size) * 1px) solid;
  }
}

/* -------- DOTTED --------  */
@container style(--dotted:true) {
  section:nth-of-type(2) div div {
    border: calc(var(--border-size) * 1px) dotted;
  }
}

/* -------- RANDOM COLORS --------  */
@container style(--random:true) {
  section:nth-of-type(2) section:nth-of-type(2) div div {
    /* !!ChatGPT: hoe mix ik twee kleuren, gebruik makend van sibling-index() variabele  */
    --mix-ratio: calc(var(--sbindex) * 5%);
    
    border-color: color-mix(
      in oklch, 
      var(--color-one), 
      var(--color-two) var(--mix-ratio)
    );
  }
}

/* -------- CMD COLORS --------  */
@container style(--cmd:true) {
  section:nth-of-type(2) section:nth-of-type(2) div div {
    --mix-ratio: calc(var(--sbindex) * 5%);

    border-color: color-mix(
      in oklch, 
      var(--color-cmd-yellow), 
      var(--color-cmd-lavendel) var(--mix-ratio)
    );
  }

  section:nth-of-type(2) section:nth-of-type(4) {
    & h3:nth-of-type(1) {
      display:none; 
    }
    
    & label:nth-of-type(1),
      & label:nth-of-type(2),
      & label:nth-of-type(3) {
      display:none;
    }
  }
}

/* -------- 2D --------  */
@container style(--2D:true) {
  section:nth-of-type(2) {
    & section:nth-of-type(2) > div {
      transform: 
        translateZ(calc(var(--sbindex) * .25em))
        rotate(calc(var(--sbindex) * 10deg * var(--rotate)))
        scale(calc(1 - var(--sbindex) * 0.025 * var(--scale)));
    }

    & section:nth-of-type(2) div div {    
      animation: --rotate-self calc(var(--speed) * 1s) infinite alternate ease-in-out;
      animation-delay: calc(-.15s * var(--sbindex));
    }
  }
}

/* -------- 3D --------  */
@container style(--3D:true) {
  section:nth-of-type(2) {
    & section:nth-of-type(2) {
      transform:
        rotateY(calc(var(--rotate) * 360deg));
      transition: transform 0.2s linear;
    }

    & section:nth-of-type(2) div {
      width: clamp(10em, 35vw, 40em);
      
      perspective: 100em;
      transform-style: preserve-3d;
      animation: --po calc(var(--speed) * 5s) infinite alternate ease-in-out;
    }

    & section:nth-of-type(2) div div {    
      animation: --rotate-3d calc(var(--speed) * 1s) infinite alternate ease-in-out;
      /* animation-delay: calc(-.15s * var(--sbindex)); */
      
      border-radius:
      calc(50% * var(--shape) + 1%)
      calc(50% * var(--shape) + 2%)
      calc(50% * var(--shape) + 4%) 
      calc(50% * var(--shape) + 3%)  
      /
      calc(100% * var(--shape) - 7%)
      calc(100% * var(--shape) + 2%)
      calc(100% * var(--shape) - 4%)
      calc(100% * var(--shape) + 4%);   
      }
  }

  section:nth-of-type(2) section:nth-of-type(4) {
    & h3:nth-of-type(1) {
      display:none; 
    }
    
    & label:nth-of-type(1),
      & label:nth-of-type(2),
      & label:nth-of-type(3) {
      display:none;
    }
  }


}

/* -------- EASTER EGG --------  */
@property --angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}


@container style(--speed:0) and style(--rotate:1) and style(--border-size:1) {
  section:nth-of-type(2) section:nth-of-type(2) div div {
    /*  Nils heeft me geholpen met het maken van de animatie.  */
    mask-image: conic-gradient(#000 var(--angle), #0000 0deg);
    
    animation: draw 1s linear forwards;
    animation-delay: calc(var(--sbindex) * 1s);

    transform:
      rotate(calc(var(--sbindex) * 2deg))
      scale(calc(1 + var(--sbindex) * 0.01));
  }
}

/* -------- OPTIONS --------  */
@container style(--options:false) {
  main > section:nth-of-type(2) {
    height: 100svh;

    grid-template-areas:
    "spirograph"
    "checkbox";

    grid-template-rows: 90svh 1fr;
  }

  section:nth-of-type(2) section:nth-of-type(3),
  section:nth-of-type(2) section:nth-of-type(4) {
    display:none;
  }
}

@container style(--pause:true) { 
  section:nth-of-type(2) section:nth-of-type(2) div div {
    animation-play-state: paused;
  }
}







/* MARK: Animaties
/* -------- TITLE ANIMATION --------  */
@keyframes title-animation {
  from {
    font-variation-settings: "hrzn" 0, "vert" -1000, "rota" -45, "zoom" -1000;
  }
  to {
    font-variation-settings: "hrzn" 400, "vert" 1000, "rota" 45, "zoom" 50;
  }
}

/* -------- 2D ANIMATION SPIROGRAPH --------  */
@keyframes --rotate-self {
  0% {
    transform: 
      rotate(0turn);
  }
  100% {
    transform: 
      rotate(2turn);
  }
}

/* -------- 3D ANIMATION SPIROGRAPH --------  */
@keyframes --rotate-3d {
  0% {
    transform:
    rotate(calc(var(--sbindex) * 2deg))
    translatez(1em)
    rotatex(0turn)
    rotatey(0turn)
    scale(calc(1 + var(--sbindex) * var(--scale) * 0.01));
  }
  100% {
    transform:
    rotate(calc(var(--sbindex) * 6deg))
    translatez(3em)
    rotatex(3turn)
    rotatey(3turn)
    scale(calc(1 + var(--sbindex) * var(--scale) * 0.03));
  }
}

/* -------- EASTER EGG ANIMATION --------  */
@keyframes draw {
  to {
    --angle: 360deg;
  }
}





/* MARK: BIG SCREEN
/* -------- MEDIA QUERY --------  */
@media screen and (min-width: 30em) {
  section:nth-of-type(2) section:nth-of-type(1) {
    flex-direction: row;
    gap: .5em;
  }
}

@media screen and (min-width: 48em) {
  h1 {
    grid-template-areas:
    "s    p   i1  r   a   l   i2   n   g";


    margin-bottom: 0;
  }

  main > section:nth-of-type(2) {
    display: grid;
    grid-template-areas: 
    "checkbox spirograph"
    "modes    spirograph"
    "sliders  spirograph";
    grid-template-columns: minmax(15em,30em) 1fr;
    width: 100%;
    
  }

  /* MARK: Changing grid full screen
  /* -------- FULLSCREEN -------- */
  @container style(--options:false) { 
    main > section:nth-of-type(2) {
      height: 100svh;

      grid-template-areas:
      "checkbox checkbox"
      "spirograph spirograph";

      grid-template-rows: 1fr 90svh;
    }
  }
  
  @container style(--3D:true) {
    section:nth-of-type(2) section:nth-of-type(2) > div {
      width: clamp(10em, 25vw, 30em);
    }
  }
  

  /* MARK: Animatie divs
  /* -------- SECTION: ANIMATION SPIROGRAPH --------  */
  section:nth-of-type(2) section:nth-of-type(2) {
      place-self: center;
  }

  /* MARK: MODES
  /* -------- SECTION: MODES --------  */
  section:nth-of-type(2) section:nth-of-type(3) {
    height: 30svh; 
    width: clamp(25em, 27svw, 35em);  
  }


  /* MARK: SLIDERS
  /* -------- SECTION: SLIDERS --------  */
  section:nth-of-type(2) section:nth-of-type(4) {
    height: 55svh;
    width: clamp(25em, 27svw, 35em);

    & label {
      display: grid;
      grid-template-columns: 5em clamp(3.5em, 15vw, 10em);
      font-size: clamp(1em,3vw,1.65em);
    }
  }
}