/* Motion layer inspired by finku-site.vercel.app - tuned for dark portfolio */

:root {
  --ka-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ka-ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
}

.ka-cursor-glow {
  pointer-events: none;
  position: fixed;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 92, 53, 0.12) 0%, transparent 68%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}

body.ka-cursor-active .ka-cursor-glow {
  opacity: 1;
}

.ka-hero-aurora {
  position: fixed;
  inset: 0 0 55% 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 15%, rgba(255, 92, 53, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(167, 139, 250, 0.06), transparent 55%);
  animation: kaAuroraShift 14s ease-in-out infinite alternate;
}

@keyframes kaAuroraShift {
  to {
    transform: scale(1.03);
    filter: hue-rotate(6deg);
  }
}

.ka-rv {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  filter: blur(8px);
  transition:
    opacity 0.85s var(--ka-ease-out-expo),
    transform 0.85s var(--ka-ease-spring),
    filter 0.85s var(--ka-ease-out-expo);
  transition-delay: var(--ka-d, 0s);
}

.ka-rv.ka-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

#root a.bg-ember,
#root [data-testid="nav-cta-button"],
#root .group.border-line.bg-frame {
  transition: transform 0.35s var(--ka-ease-spring), box-shadow 0.35s var(--ka-ease-out-expo);
}

#root a.bg-ember:hover,
#root [data-testid="nav-cta-button"]:hover {
  transform: translateY(-1px) scale(1.02);
}

#root .group.border-line.bg-frame:hover img {
  transform: scale(1.03);
}

#root .group.border-line.bg-frame img {
  transition: transform 1.2s var(--ka-ease-out-expo);
}

@media (max-width: 1023px) {
  .ka-cursor-glow,
  .ka-hero-aurora {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ka-rv {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .ka-hero-aurora {
    animation: none;
  }

  .ka-cursor-glow {
    display: none !important;
  }
}