/*
   this animation came after many many tries to get it right. i scraped the original physics and elements for bee i found from a website.
   his name is fraiser or something, i don't remember exactly. he is based in new jersey which i remember. thank you :>
   and of course, this is not the first file as there were several drafts before this.
*/

/*
   it took lots and lots of tries to make this work properly and in the end, i am happy with the result.
   i also tried to reverse engineer some y8 games when i was in 9th grade. that did not work well,
   but it kept these ideas in my mind for later.
   although i will not be working on animation and game-based projects for now, as i am not enjoying it anymore,
   i am probably moving towards something else.
   i am thinking about quant finance, and i am reading books and writing articles about it,
   but i do not think i will stick to this for very long either, as it seems very monotonous.
   so lets see.
*/

/* scene */
.scene {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  perspective: 700px;
  perspective-origin: 50% 50%;
}


/* start button << very minimal */
#start-button {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 24px;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  font-weight: normal;
  letter-spacing: 2px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  z-index: 1000;
  transition: opacity 0.3s ease;
  opacity: 1;
}

#start-button:hover {
  transform: translate(-50%, -50%);
  color: #fff;
  border-color: rgba(255,255,255,0.9);
}

#start-button:active {
  transform: translate(-50%, -50%) scale(0.97);
}

#start-button.fade-out {
  opacity: 0;
  pointer-events: none;
}


/* ====== BEE ====== */
.bee {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 28%;
  z-index: 100;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: shake 6s ease-in-out infinite;
}

.bee_face {
  position: absolute;
  width: 280px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: saturate(1.2);
}

.bee_face.top {
  background: var(--bee-top) center / cover no-repeat;
  transform: translateY(-100px) rotateX(90deg) rotateZ(90deg);
  box-shadow: inset 0 0 70px 0px rgb(0 0 0 / 70%);
}

.bee_face.bottom {
  background: var(--bee-bottom) center / cover no-repeat;
  transform: translateY(100px) rotateX(90deg) rotateZ(90deg);
  box-shadow: inset 0 0 70px 0px rgb(0 0 0 / 70%);
}

.bee_face.right {
  background: var(--bee-right) center / cover no-repeat;
  transform: translateX(100px) rotateY(90deg);
  box-shadow: inset 0 0 70px 0px rgb(0 0 0 / 70%);
}

.bee_face.left {
  background: var(--bee-left) center / cover no-repeat;
  transform: translateX(-100px) rotateY(-90deg);
  box-shadow: inset 0 0 70px 0px rgb(0 0 0 / 70%);
}

.bee_face.front {
  background: var(--bee-front) center / contain no-repeat;
  transform: translateZ(140px);
  width: 200px;
  height: 200px;
}

.bee_face.back {
  background: var(--bee-back) center / cover no-repeat;
  transform: translateZ(-140px) rotateY(-180deg);
  width: 200px;
  height: 200px;
  box-shadow: inset 0 0 70px 0px rgb(0 0 0 / 70%);
}


/* antennas */
.antenna {
  position: absolute;
  width: 70px;
  height: 55px;
  background: var(--bee-antenna) center / cover no-repeat;
}

.antenna_right {
  transform: translate3d(50px, -71px, 170px) rotateY(90deg);
}

.antenna_left {
  transform: translate3d(-50px, -71px, 170px) rotateY(90deg);
}


/* legs */
.leg {
  position: absolute;
  width: 30px;
  height: 50px;
  background: var(--bee-leg);
  background-size: cover;
}

.leg_right_one   { transform: translate3d(50px, 125px, -30px) rotateX(-10deg); }
.leg_right_two   { transform: translate3d(50px, 125px, 30px) rotateX(-10deg); }
.leg_right_three { transform: translate3d(50px, 125px, 90px) rotateX(-10deg); }
.leg_left_one    { transform: translate3d(-50px, 125px, -30px) rotateX(-10deg); }
.leg_left_two    { transform: translate3d(-50px, 125px, 30px) rotateX(-10deg); }
.leg_left_three  { transform: translate3d(-50px, 125px, 90px) rotateX(-10deg); }


/* wings */
.wing {
  width: 300px;
  height: 200px;
}

.wing_left {
  background: var(--bee-wing) center / contain no-repeat;
  transform-origin: top right;
  transform: translate3d(-150px, -1px, 130px) rotateY(90deg) rotateX(90deg)
    scale3d(-1, 1, 1);
  animation: fly_left 120ms infinite linear;
}

.wing_right {
  background: var(--bee-wing) center / contain no-repeat;
  transform-origin: top left;
  transform: translate3d(150px, -1px, -65px) rotateY(90deg) rotateX(90deg)
    scale3d(-1, -1, 1);
  animation: fly_right 120ms infinite linear;
}


/* stinger */
.stinger {
  width: 50px;
  height: 30px;
  background-color: #1d1d25;
  transform: translateZ(-160px) rotateY(90deg);
  position: absolute;
}


/* ====== CUBE ====== */
.cube {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 45%;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: spin 30s linear infinite;
}

.cube_face {
  position: absolute;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: saturate(1.2);
  box-shadow: inset 0 0 70px 0px rgb(0 0 0 / 70%);
}

.cube_face.front {
  background: var(--cube-sides) center / cover no-repeat;
  transform: translateZ(150px);
}
.cube_face.back {
  background: var(--cube-sides) center / cover no-repeat;
  transform: translateZ(-150px) rotateZ(0deg);
}
.cube_face.right {
  background: var(--cube-sides) center / cover no-repeat;
  transform: translateX(-150px) rotateY(-90deg);
}
.cube_face.left {
  background: var(--cube-sides) center / cover no-repeat;
  transform: translateX(150px) rotateY(90deg);
}
.cube_face.top {
  background: var(--cube-top) center / cover no-repeat;
  transform: translateY(-150px) rotateX(90deg);
}
.cube_face.bottom {
  background: var(--cube-bottom) center / cover no-repeat;
  transform: translateY(150px) rotateX(-90deg);
}


/* rose on top of cube */
.rose {
  width: 60px;
  height: 600px;
  position: relative;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rose_part {
  position: absolute;
  width: 100px;
  height: 180px;
  filter: saturate(1.2);
}

.rose_first {
  background: var(--rose) center / contain no-repeat;
  transform: translateY(-240px);
}

.rose_second {
  background: var(--rose) center / contain no-repeat;
  transform: translateY(-240px) rotateY(90deg);
}


/* massive ground plane that rotates with the cube */
.ground {
  position: absolute;
  width: 3000px;
  height: 3000px;
  background: var(--cube-bottom) center / 300px 300px;
  box-shadow: inset 0 0 400px 150px rgb(0 0 0 / 90%);
  transform: translateY(150px) rotateX(90deg);
}


/* footer, i have tried to keep this simple as possible, i really like command type text fonts lately */
#author {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  color: rgba(255, 255, 255, 0.38);
  font-family: 'Georgia', serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 400;
  z-index: 10;
  border-top: none;
}

#author .author-links {
  display: flex;
  gap: 24px;
}

#author a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

#author a:hover {
  color: rgba(255, 255, 255, 0.75);
}

#author .author-credit {
  color: inherit;
}


/* cube spins, matches the angle of the huge ground floor */
@keyframes spin {
  0% {
    transform: translateY(-50px) rotateX(-25deg) rotateY(0deg)
      scale3d(var(--cube-scale), var(--cube-scale), var(--cube-scale));
  }
  50% {
    transform: translateY(-50px) rotateX(-25deg) rotateY(180deg)
      scale3d(var(--cube-scale), var(--cube-scale), var(--cube-scale));
  }
  100% {
    transform: translateY(-50px) rotateX(-25deg) rotateY(360deg)
      scale3d(var(--cube-scale), var(--cube-scale), var(--cube-scale));
  }
}

/* bee moves around and rotates full 360° showing all sides aswell */
@keyframes shake {
  0% {
    transform: translateY(0px) rotateY(0deg) rotateX(5deg)
      scale3d(var(--bee-scale), var(--bee-scale), var(--bee-scale));
  }
  50% {
    transform: translateY(-20px) rotateY(180deg) rotateX(15deg)
      scale3d(var(--bee-scale), var(--bee-scale), var(--bee-scale));
  }
  100% {
    transform: translateY(0px) rotateY(360deg) rotateX(5deg)
      scale3d(var(--bee-scale), var(--bee-scale), var(--bee-scale));
  }
}

/* right wing flaps */
@keyframes fly_right {
  0% {
    transform-origin: top left;
    transform: translate3d(150px, -1px, -65px) rotateY(90deg) rotateX(90deg)
      scale3d(-1, -1, 1);
  }
  50% {
    transform-origin: top left;
    transform: translate3d(150px, -1px, -65px) rotateY(90deg) rotateX(30deg)
      scale3d(-1, -1, 1);
  }
  100% {
    transform-origin: top left;
    transform: translate3d(150px, -1px, -65px) rotateY(90deg) rotateX(90deg)
      scale3d(-1, -1, 1);
  }
}

/* left wing flaps */
@keyframes fly_left {
  0% {
    transform-origin: top right;
    transform: translate3d(-150px, -1px, 130px) rotateY(90deg) rotateX(90deg)
      scale3d(-1, 1, 1);
  }
  50% {
    transform-origin: top right;
    transform: translate3d(-150px, -1px, 130px) rotateY(90deg) rotateX(160deg)
      scale3d(-1, 1, 1);
  }
  100% {
    transform-origin: top right;
    transform: translate3d(-150px, -1px, 130px) rotateY(90deg) rotateX(90deg)
      scale3d(-1, 1, 1);
  }
}

@media (max-height: 570px) {
  .bee {
    top: -20px;
  }
  .cube {
    top: 30%;
  }
}