#checkbox {
  display: none;
}

.toggle {
  position: relative;
  width: 30px;
  cursor: pointer;
  margin: auto;
  display: block;
  height: calc(4px * 3 + 11px * 2);
}

.bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: calc(4px / 2);
  background: #f9ba2f;
  color: inherit;
  opacity: 1;
  transition: none 0.35s cubic-bezier(0.5, -0.35, 0.35, 1.5) 0s;
}

/***** Tornado Animation *****/

.bar--top {
  bottom: calc(50% + 7px + 4px / 2);
  transition-property: bottom, transform;
  transition-delay: calc(0s + 0.35s) * 0.6;
}

.bar--middle {
  top: calc(50% - 4px / 2);
  transition-property: opacity, transform;
  transition-delay: calc(0s + 0.35s * 0.3);
}

.bar--bottom {
  top: calc(50% + 7px + 4px / 2);
  transition-property: top, transform;
  transition-delay: 0s;
}

#checkbox:checked + .toggle .bar--top {
  transform: rotate(-135deg);
  transition-delay: 0s;
  bottom: calc(50% - 4px / 2);
}

#checkbox:checked + .toggle .bar--middle {
  opacity: 0;
  transform: rotate(-135deg);
  transition-delay: calc(0s + 0.35s * 0.3);
}

#checkbox:checked + .toggle .bar--bottom {
  top: calc(50% - 4px / 2);
  transform: rotate(-225deg);
  transition-delay: calc(0s + 0.35s * 0.6);
}

.masked-text {
  color: transparent;
  background-image: url("https://images.unsplash.com/photo-1732535725600-f805d8b33c9c?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: 200%;
  background-position: 0 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-background 10s infinite alternate linear;
}

@keyframes animate-background {
  0% {
    background-position: 0 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 20s linear infinite;
}

/* loader animation */
@keyframes techBounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
    /* filter: drop-shadow(0 0 2px #f9ba2f); */
  }
  50% {
    transform: translateY(-10px) scale(1.1);
    /* filter: drop-shadow(0 0 10px #f9ba2f); */
  }
}
@keyframes techGlow {
  0%,
  100% {
    opacity: 0.6;
    /* filter: drop-shadow(0 0 2px #f9ba2f); */
  }
  50% {
    opacity: 1;
    /* filter: drop-shadow(0 0 15px #f9ba2f); */
  }
}

.animate-techBounce {
  animation: techBounce 1.5s infinite ease-in-out;
}
.animate-techGlow {
  animation: techGlow 2s infinite ease-in-out;
}