/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Marquee animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

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

/* Modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 50;
  align-items: center;
  justify-content: center;
}

/* ======================
   SERVICES ANIMATION
====================== */
.service-card {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.service-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ======================
   PORTFOLIO ANIMATION
====================== */
.portfolio-header {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.portfolio-header.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-card {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.portfolio-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Hero animations */
.hero-title,
.hero-subtitle,
.hero-actions {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

.hero-title.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-subtitle.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-actions.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* For cursor */
/* Precise Tech-Style Mouse Glow */
#cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  /* Smaller, more precise size */
  width: 200px;
  height: 200px;
  /* Sharper center highlight */
  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.25) 0%,
    rgba(37, 99, 235, 0.05) 60%,
    transparent 100%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  /* Reduced blur for a cleaner "light" effect */
  filter: blur(40px);
  will-change: transform;
  transition: opacity 0.4s ease;
  transform: translate3d(-100%, -100%, 0);
}