/* Custom Styles for BeeVibe */

*,
**:before,
*::after {
  box-sizing: inherit;
}

body {
  /* --c1: #470601;
  --c2: #ffc436;
  display: grid;
  place-content: center;
  height: 100vh;
  box-sizing: border-box;
  background-color: #fff;
  overflow: hidden; */
}

:root {
  --c1: #170e0c;
  --c2: #fbc02d;
}

.bee-animation {
  --s: 15%;
  position: relative;
  container-type: inline-size;
  width: 45vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: 0 15%;
  -webkit-animation: fly 1s ease-in-out alternate infinite;
  animation: fly 1s ease-in-out alternate infinite;
}
@-webkit-keyframes fly {
  to {
    translate: 0 -5%;
  }
}
@keyframes fly {
  to {
    translate: 0 -5%;
  }
}
.bee-animation::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, var(--c1) 75%, #080100);
  box-shadow: inset 0 60cqw 0 -40cqw var(--c2), inset 0 80cqw 0 -40cqw var(--c1), inset 0 110cqw 0 -40cqw var(--c2);
}
.bee-animation::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset -30cqw 0cqw 0 -20cqw rgba(255, 255, 255, 0.5);
  mix-blend-mode: overlay;
}

.head {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 65cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset -27cqw 0cqw 0 -20cqw color-mix(in srgb, var(--c1), rgb(167, 156, 6) 15%);
  background-color: var(--c1);
  translate: -50% -45%;
}
@-webkit-keyframes blink {
  2% {
    scale: 1 0.2;
  }
  4%,
  100% {
    scale: 1;
  }
}
@keyframes blink {
  2% {
    scale: 1 0.2;
  }
  4%,
  100% {
    scale: 1;
  }
}
.head::before,
.head::after {
  content: '';
  position: absolute;
  aspect-ratio: 1/1.5;
  border-radius: 50%;
  background-color: #fff;
  -webkit-animation: blink 3s infinite 1s;
  animation: blink 3s infinite 1s;
}
.head::before {
  top: 18%;
  left: 25%;
  width: 6cqw;
}
.head::after {
  top: 14%;
  right: 25%;
  width: 9cqw;
}

.antenna {
  /* Credits Temani Afif https://css-shape.com/arc/ */
  --b: 5cqw;
  --a: 80deg;
  position: absolute;
  z-index: -2;
  bottom: 45%;
  left: -30%;
  width: 45cqw;
  aspect-ratio: 1;
  padding: var(--b);
  box-sizing: border-box;
  border-radius: 50%;
  background-color: var(--c1);
  --_g: /var(--b) var(--b) no-repeat radial-gradient(closest-side at 50% 50%, #000 calc(100% - 1px), #0000);
  -webkit-mask: top var(--_g), calc(50% + 50% * sin(var(--a))) calc(50% - 50% * cos(var(--a))) var(--_g),
    linear-gradient(#0000 0 0) content-box, conic-gradient(#000 var(--a), #0000 0);
  -webkit-mask-composite: source-in, xor;
  mask: top var(--_g), calc(50% + 50% * sin(var(--a))) calc(50% - 50% * cos(var(--a))) var(--_g),
    linear-gradient(#0000 0 0) content-box intersect, conic-gradient(#000 var(--a), #0000 0);
}
.antenna:nth-of-type(2) {
  --b: 7cqw;
  scale: -1 1;
  bottom: 53%;
  left: 65%;
}

.sting {
  --w: 30cqw;
  position: absolute;
  z-index: -1;
  top: 100%;
  left: 50%;
  width: var(--w);
  aspect-ratio: 1/1.5;
  border-radius: 50%;
  border-right: 20cqw solid #0a0101;
  translate: calc(-50% - var(--w) / 2) -70%;
}

.wings::before,
.wings::after {
  content: '';
  position: absolute;
  top: 30%;
  z-index: -1;
  width: 55cqw;
  aspect-ratio: 150/70;
  border-radius: 33% 33% 50% 50%/15% 15% 85% 85%;
  background-color: #dcdac6;
  -webkit-animation: wing 0.06s infinite alternate;
  animation: wing 0.06s infinite alternate;
}
.wings::before {
  right: 90%;
  transform: rotate(25deg);
  transform-origin: center right;
  box-shadow: -1cqw -1cqw 0 0 color-mix(in srgb, #dcdac6, black 2.5%),
    inset -0.5cqw -0.5cqw 0 0 color-mix(in srgb, #dcdac6, white 50%);
}
.wings::after {
  left: 90%;
  transform: rotate(-25deg);
  transform-origin: center left;
  box-shadow: 1cqw -1cqw 0 0 color-mix(in srgb, #dcdac6, black 2.5%),
    inset 0.5cqw -0.5cqw 0 0 color-mix(in srgb, #dcdac6, white 50%);
}
@-webkit-keyframes wing {
  to {
    transform: rotate(0deg);
  }
}
@keyframes wing {
  to {
    transform: rotate(0deg);
  }
}

#bee {
  width: 267px;
  height: auto;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #302222;
}

::-webkit-scrollbar-thumb {
  background: #3d2b2b;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ffdc08;
}

/* Glassmorphism Utilities */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animations */
@keyframes pulse-slow {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.1);
  }
}

.animate-pulse-slow {
  animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Text Selection */
::selection {
  background: #ffdc08;
  color: #302222;
}

/* Utilities */
.text-stroke {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
  color: transparent;
}
.flip-XY {
    display: inline;
    transform: scaleX(-1) scaleY(-1) !important;
    transform-origin: center;
    transform-box: content-box;
    position: absolute;
    margin-inline: 1.5rem;
    line-height: 1.5;
    letter-spacing: 0.0125em;
}