/* CRAZY ANIMATIONS - Enhanced Version */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.6), inset 0 0 20px rgba(34, 197, 94, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 50px rgba(34, 197, 94, 1), inset 0 0 30px rgba(34, 197, 94, 0.4);
    transform: scale(1.08);
  }
}

@keyframes bounce-wild {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-35px) rotate(8deg);
  }
  50% {
    transform: translateY(-70px) rotate(-8deg);
  }
  75% {
    transform: translateY(-25px) rotate(4deg);
  }
}

@keyframes float-spin {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-25px) rotate(180deg);
  }
  100% {
    transform: translateY(0) rotate(360deg);
  }
}

@keyframes lightning-flash {
  0%, 100% {
    opacity: 0.8;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.6) drop-shadow(0 0 30px rgba(56, 189, 248, 1));
  }
}

@keyframes morph {
  0% {
    border-radius: 20px;
    transform: scale(1);
  }
  50% {
    border-radius: 50%;
    transform: scale(1.15);
  }
  100% {
    border-radius: 20px;
    transform: scale(1);
  }
}

@keyframes wave {
  0%, 100% {
    transform: translateX(0) rotateZ(0deg);
  }
  25% {
    transform: translateX(12px) rotateZ(3deg);
  }
  50% {
    transform: translateX(-12px) rotateZ(-3deg);
  }
  75% {
    transform: translateX(6px) rotateZ(1.5deg);
  }
}

@keyframes shake-intense {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  10% {
    transform: translate(-6px, -6px) rotate(-1.5deg);
  }
  20% {
    transform: translate(6px, 6px) rotate(1.5deg);
  }
  30% {
    transform: translate(-4px, 6px) rotate(-1deg);
  }
  40% {
    transform: translate(5px, -5px) rotate(1deg);
  }
  50% {
    transform: translate(-7px, 4px) rotate(-2deg);
  }
  60% {
    transform: translate(7px, -3px) rotate(2deg);
  }
  70% {
    transform: translate(-5px, -4px) rotate(-1.2deg);
  }
  80% {
    transform: translate(4px, 5px) rotate(1.2deg);
  }
  90% {
    transform: translate(-3px, -2px) rotate(-0.5deg);
  }
}

@keyframes spin-colors {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes zoom-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.25);
    opacity: 0.6;
  }
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(65px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(65px) rotate(-360deg);
  }
}

@keyframes flip-vertical {
  0%, 100% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(180deg);
  }
}

@keyframes flip-horizontal {
  0%, 100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
}

@keyframes slide-up-bounce {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes rainbow-border {
  0% {
    border-color: #ff0000;
    filter: drop-shadow(0 0 10px #ff0000);
  }
  20% {
    border-color: #ff7f00;
    filter: drop-shadow(0 0 10px #ff7f00);
  }
  40% {
    border-color: #ffff00;
    filter: drop-shadow(0 0 10px #ffff00);
  }
  60% {
    border-color: #00ff00;
    filter: drop-shadow(0 0 10px #00ff00);
  }
  80% {
    border-color: #0000ff;
    filter: drop-shadow(0 0 10px #0000ff);
  }
  100% {
    border-color: #ff0000;
    filter: drop-shadow(0 0 10px #ff0000);
  }
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
}

@keyframes dance {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(-8px) rotate(-5deg);
  }
  50% {
    transform: translateX(8px) rotate(5deg);
  }
  75% {
    transform: translateX(-4px) rotate(-2deg);
  }
}

/* Apply animations to elements */

.logo__mark {
  animation: spin 5s linear infinite, pulse-glow 3s ease-in-out infinite;
}

.hero-orbit--1 {
  animation: bounce-wild 3.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite, spin-colors 8s linear infinite !important;
}

.hero-orbit--2 {
  animation: float-spin 5.5s ease-in-out infinite, pulse-glow 4s ease-in-out infinite, lightning-flash 2.5s ease-in-out infinite !important;
}

.hero-orbit--3 {
  animation: orbit 10s linear infinite, lightning-flash 2s ease-in-out infinite !important;
}

.hero-card {
  animation: wave 4s ease-in-out infinite, slide-up-bounce 3s ease-out infinite !important;
}

.hero-minimap {
  animation: shake-intense 3.5s ease-in-out infinite, heartbeat 2.5s ease-in-out infinite !important;
}

.hero-badge {
  animation: zoom-pulse 3.5s ease-in-out infinite, dance 4s ease-in-out infinite !important;
}

.btn--primary {
  animation: pulse-glow 2.5s ease-in-out infinite;
  position: relative;
  overflow: visible;
}

.btn--primary::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle at top left, rgba(74, 222, 128, 0.4), transparent 60%);
  animation: spin 6s linear infinite reverse;
  pointer-events: none;
  z-index: -1;
}

.btn--primary:hover {
  transform: translateY(-5px) scale(1.08) rotateZ(3deg) !important;
  box-shadow: 0 35px 80px rgba(34, 197, 94, 1), inset 0 0 25px rgba(255, 255, 255, 0.4) !important;
  filter: brightness(1.3) drop-shadow(0 0 20px rgba(74, 222, 128, 0.8));
}

.section__eyebrow {
  animation: wave 5s ease-in-out infinite;
}

.site-nav__links a::after {
  animation: spin-colors 3.5s linear infinite;
}

.hero__title {
  animation: shake-intense 7s ease-in-out infinite 0.1s both;
}

.split__progress-bar {
  animation: spin-colors 4.5s linear infinite;
}

.benefit:hover {
  animation: bounce-wild 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1;
}

.feature-card {
  transition: all 0.18s ease-out;
  position: relative;
}

.feature-card:hover {
  animation: morph 0.7s ease-in-out 1;
}

.split__bubble--1 {
  animation: bounce-wild 4.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite, spin-colors 12s linear infinite !important;
}

.split__bubble--2 {
  animation: float-spin 6.5s ease-in-out infinite, lightning-flash 3s ease-in-out infinite !important;
}

.testimonial {
  animation: flip-horizontal 10s ease-in-out infinite;
}

/* Extra crazy animations for enhanced effect */

.site-header {
  animation: slide-up-bounce 0.8s ease-out 0s 1;
}

.hero__content {
  animation: slide-up-bounce 1s ease-out 0.2s both;
}

.hero__visual {
  animation: slide-up-bounce 1.2s ease-out 0.4s both;
}

.section {
  animation: slide-up-bounce 1s ease-out;
}

.feature-card {
  animation: slide-up-bounce 0.8s ease-out;
}

.btn--ghost:hover {
  animation: heartbeat 0.6s ease-in-out;
}

/* Rainbow effect on hover for interactive elements */

a:not(.logo):not(.site-nav__links a):not(.site-footer__nav a) {
  position: relative;
  transition: all 0.3s ease-out;
}

a:not(.logo):not(.site-nav__links a):not(.site-footer__nav a):hover {
  animation: rainbow-border 0.8s linear;
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .logo__mark,
  .hero-orbit--1,
  .hero-orbit--2,
  .hero-orbit--3,
  .hero-card,
  .hero-minimap,
  .hero-badge,
  .btn--primary,
  .btn--primary::before,
  .section__eyebrow,
  .site-nav__links a::after,
  .hero__title,
  .split__progress-bar,
  .benefit:hover,
  .feature-card:hover,
  .split__bubble--1,
  .split__bubble--2,
  .testimonial,
  .site-header,
  .hero__content,
  .hero__visual,
  .section,
  .feature-card,
  .btn--ghost:hover,
  a:not(.logo):not(.site-nav__links a):not(.site-footer__nav a):hover {
    animation: none !important;
  }
}
