:root {
  /* Omgeving */
  --omgeving-kleur:#6d715d;
  --paden-kleur: #5D5D53;;
  --gras-kleur:#BFBC8F;
  --stenen-kleur: #D0CBC8;


  /* Struisvogel */

  /* Hoofd */
  --snavel-kleur: linear-gradient(6deg, rgb(96 17 30), rgb(235 91 98));

  /* Oog */
  --oog-kleur: #ffffff;
  --pupil-kleur: #191919;
  
  --nek-kleur: linear-gradient(6deg, rgb(209 152 140), rgb(236 206 198));

  /* Lichaam */
  --lichaam-kleur: linear-gradient(6deg, rgb(11 11 11), rgb(59 59 59));
  --vleugel-kleur: linear-gradient(6deg, rgba(162 157 157), rgb(169 164 164));
  --poot-kleur: linear-gradient(6deg, rgb(209 152 140), rgb(236 206 198) 60%, rgb(163 89 76));
  --voet-kleur: linear-gradient(6deg, rgb(163 89 76) 43%, rgb(209 161 150));
  --staart-kleur: linear-gradient(6deg, rgb(11 11 11), rgb(59 59 59));

	/* nek */
	--nek-kleur: linear-gradient(6deg, rgb(209 152 140), rgb(236 206 198));

	/* ei */
	--ei-kleur:#fffcec;
}





/***********/
/* GENERAL */
/***********/
*, *::after, *::before {
  box-sizing:border-box;  
	list-style: none;
	margin:0;
	padding:0;
}

html, body {
  height:100%;
  margin:0;
  overflow: hidden;
  background-color: var(--omgeving-kleur);
}





/***********/
/* TEXTURE */
/***********/
.noisy {
	position: fixed;
	inset:0;
	z-index: 100;

  background-image: url("../images/noise.png");
  mix-blend-mode: multiply;

  pointer-events: none; 
}





/*********/
/* STAGE */
/*********/
main {
  position: fixed;
	inset:0;

	display: grid;
	place-items: center;
	place-content: center;
}





/***************/
/* STRUISVOGEL */
/***************/
.struisvogel {
  position: absolute;
  z-index: 5;

	width: 300px;
  height: 530px;
	display:grid;
	align-content: start;
}





/* HOOFD */
.hoofd {
	justify-self:start;
}

.snavel {
	position: absolute;
  right:100%;
  top: 30px;

  width: 65px;
  height: 30px;

  background: var(--snavel-kleur);
  border-radius: 15px 0 0 15px;
}

.nek {
  width: 60px;
  height: 200px;
	padding:12px;
	
  background: var(--nek-kleur);
  border-radius: 110px 110px 0 0;
}

.oog {
  width: 36px;
  aspect-ratio:1;
	padding:8px;

  background: var(--oog-kleur);
  border-radius: 50%;
  box-shadow:
		0 1px 1px rgb(209 152 140), 
		0 2px 2px rgb(209 152 140), 
		0 4px 4px rgb(209 152 140), 
		0 8px 8px rgb(209 152 140),
		0 16px 16px rgb(209 152 140);
  z-index: 3;
}

.pupil {
  width: 20px;
  aspect-ratio:1;

	background: var(--pupil-kleur);
  border-radius:inherit;
}

.pupil.oog-kleiner {
	animation: oog-kleiner 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

@keyframes oog-kleiner {
  0%, 20%{
    scale:1;
  }
  21%, 99% {
    scale:0.5;
  }
  100% {
    scale:1;
  }
}





/* LICHAAM */
.lichaam {
	position: relative;
	z-index: 100;

  width: 300px;
  height: 150px;

	display:grid;
	place-items: start center;

  background: var(--lichaam-kleur);
  border-radius: 0 0 200px 200px;

	transform-style: preserve-3d;
}

.vleugel {
  width: 180px;
  height: 90px;

  background: var(--vleugel-kleur);
  border-radius:0 0 110px 110px;

  box-shadow: 
		0 1px 1px rgb(0 0 0 / .12), 
		0 2px 2px rgb(0 0 0 / .12), 
		0 4px 4px rgb(0 0 0 / .12), 
		0 8px 8px rgb(0 0 0 / .12),
		0 16px 16px rgb(0 0 0 / .12);
}

.staart {
  position: absolute;
  top:0;
	left: 260px;

  width: 100px;
  height: 50px;
	transform: translateZ(-1px);

  background: var(--staart-kleur);
  border-radius: 0 0 50px 50px;
}

.vleugel.vleugel-draaien,
.staart.staart-draaien {
	animation: draaien 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

@keyframes draaien {
	0% {
		rotate:0;
	}
	1%, 90% {
		rotate:-40deg;
	}
	100% {
		rotate:0;
	}
}





/* POOT */
.poot {
  position: relative;
	justify-self:center;
  
  width: 30px;
  height: 180px;
	translate: 0 -29px;
  background: var(--poot-kleur);
}

.voet {
  position: absolute;
  right:0;
  top: calc(100% - 1px);

  width: 60px;
  height: 30px;
  
	background: var(--voet-kleur);
  border-radius: 15px 0 0 15px;
}





/* EI */
.ei {
  position: absolute;
	align-self:center;
	justify-self: end;
	z-index: 3;

  width: 80px;
  height: 115px;

  background-color: var(--ei-kleur);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

	scale:.4;
}

.ei.leggen {
  animation: leggen 2s ease-in;
}

@keyframes leggen {
  0% {
    scale:.4;
		rotate: -60deg;
  }
	50%, 60% {
		scale:.6;
		rotate: -60deg;
		translate:0 0;
	}
	61% {
		scale:1;
		rotate: -20deg;
		translate:18px 0;
	}
  80%, 100% {
		scale:1;
		rotate: 180deg;
    translate:20px max(calc(50vh + 115px), 640px);
  }
}





/* SCHUDDEN */
.struisvogel:has(:hover) {
  animation: shake-horizontal 0.2s ease-in-out infinite;
	cursor: pointer;
}

.struisvogel:has(.leggen) {
	cursor: wait;
}

@keyframes shake-horizontal {
  0%, 100% {
		transform: translateX(0);  
  }
  10%,
  30%,
  50%,
  70% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60% {
    transform: translateX(10px);
  }
  80% {
    transform: translateX(8px);
  }
  90% {
    transform: translateX(-8px);
  }
}





/*************/
/* LANDSCHAP */
/*************/
.landschap {
  position: absolute;
	left:50%;
	top:50%;

}

.landschap * {
	position: absolute;
}

.landschap ul {
	display: grid;
	place-items:center;
	place-content:center;
}





/* PADEN */

.paden>* {
  position: absolute;
	width: 300px;
	height: 25px;

  background-color: var(--paden-kleur);
  border-radius: 500px;
}

/* 395 , 955 */

.pad1 {
  left: -575px;
  top: 335px;
}

.pad2 {
  left: 805px;
  top: 660px;

	left:-150px;
	top:265px;
}

.pad3 {
  left: 215px;
  top: 325px;
  height: 35px;
}

.pad4 {
  left: -275px;
  top: -15px;
  height: 20px;
}

.pad5 {
  left: 215px;
  top: 25px;
  height: 20px;
}

.pad6 {
  left: -510px;
  top: -150px;
  height: 20px;
}

.pad7 {
  left: 125px;
  top: -145px;
  width: 390px;
  height: 10px;
}


/* GRAS */

.gras>* {
  background-color: var(--gras-kleur);
  position: absolute;
  width: 150px;
  height: 100px;
}

.gras1{
  left: 55px;
  top: 385px;
  clip-path:polygon(20px 100px, 0px 20px, 40px 60px, 60px 0px, 70px 90px, 80px 50px, 100px 80px, 120px 30px, 150px 100px, 20px 100px);
}

.gras2{
  left: 215px;
  top: 96px;
  clip-path: polygon(100% 100%, 12% 100%, 0% 62%, 19% 83%, 27% 37%, 32% 82%, 48% 47%, 64% 84%, 69% 73%, 80% 90%, 86% 64%, 89% 90%, 100% 68%);
}

.gras3{
  left: -255px;
  top: 5px;
  clip-path: polygon(100% 100%, 8% 100%, 0% 62%, 14% 86%, 23% 75%, 24% 89%, 41% 49%, 43% 90%, 50% 75%, 63% 90%, 78% 63%, 91% 92%, 100% 66%);
}

.gras4{
  left: -505px;
  top: -335px;
  clip-path: polygon(73% 100%, 8% 100%, 0% 62%, 18% 94%, 18% 54%, 31% 94%, 39% 61%, 55% 93%, 57% 75%, 65% 91%, 69% 73%, 78% 93%, 90% 60%, 89% 94%, 100% 81%, 100% 100%);
}

.gras5{
  left: 225px;
  top: -289px;
  clip-path: polygon(73% 100%, 8% 100%, 0% 62%, 14% 86%, 17% 77%, 21% 93%, 32% 38%, 40% 90%, 49% 82%, 51% 94%, 61% 62%, 70% 92%, 81% 53%, 89% 94%, 100% 81%, 100% 100%);
}

.gras6{
  left: -55px;
  top: -289px;
  clip-path: polygon(73% 100%, 8% 100%, 0% 62%, 14% 86%, 20% 73%, 21% 93%, 38% 50%, 34% 93%, 45% 80%, 53% 93%, 67% 63%, 70% 92%, 84% 51%, 89% 94%, 100% 81%, 100% 100%);
}




/* STENEN */
.stenen>* {
  position: absolute;
  background-color: var(--stenen-kleur);
  border-radius: 200px 200px 0 0;
}

.steen1 {
  left: -190px;
  top: 345px;
  width: 70px;
  height: 40px;
}

.steen2 {
  left: -105px;
  top: 353px;
  width: 50px;
  height: 30px;
}

.steen3 {
  left: -305px;
  top: 155px;
  width: 55px;
  height: 30px;
}

.steen4 {
  left: -350px;
  top: 165px;
  width: 35px;
  height: 20px;
}

.steen5 {
  left: 130px;
  top: 175px;
  width: 35px;
  height: 20px;
}

.steen6 {
  left: 175px;
  top: 180px;
  width: 26px;
  height: 15px;
}

.steen7 {
  left: -405px;
  top: -45px;
  width: 35px;
  height: 20px;
}

.steen8 {
  left: 130px;
  top: -205px;
  width: 26px;
  height: 15px;
}

.steen9 {
  left: 170px;
  top: -210px;
  width: 35px;
  height: 20px;
}