/* Add your global styles here */

@keyframes spider-web-drop {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes spider-descend {
  from {
    translate: 0 -120px;
    opacity: 0;
  }
  to {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes spider-sway {
  0%,
  11.67% {
    rotate: -10deg;
    animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  }
  26.67% {
    rotate: 4deg;
    animation-timing-function: linear;
  }
  45%,
  100% {
    rotate: 0deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__web,
  .home-hero__spider {
    animation: none;
    opacity: 1;
    translate: none;
    rotate: none;
    transform: none;
  }
}