/* ============================================
   GSAP Initial States
   ============================================ */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
}

.hero__title-line {
  opacity: 0;
  transform: translateY(30px);
}

/* ============================================
   Hero Orbs
   ============================================ */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  will-change: transform;
}

.hero__orb--1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.35), transparent 70%);
  top: -100px;
  left: -100px;
}

.hero__orb--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.3), transparent 70%);
  bottom: -80px;
  right: -80px;
}

.hero__orb--3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.25), transparent 70%);
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
}

[data-theme="light"] .hero__orb {
  opacity: 0.3;
}

/* ============================================
   Hero Grid
   ============================================ */
.hero__grid {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(139, 92, 246, 0.05) 59px, rgba(139, 92, 246, 0.05) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(139, 92, 246, 0.05) 59px, rgba(139, 92, 246, 0.05) 60px);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
  opacity: 0.6;
}

[data-theme="light"] .hero__grid {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(124, 58, 237, 0.08) 59px, rgba(124, 58, 237, 0.08) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(124, 58, 237, 0.08) 59px, rgba(124, 58, 237, 0.08) 60px);
}

/* ============================================
   Custom Cursor
   ============================================ */
#cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}

.cursor__dot {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: -4px;
  left: -4px;
}

.cursor__outline {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  position: absolute;
  top: -18px;
  left: -18px;
  transition: width 0.2s ease, height 0.2s ease, top 0.2s ease, left 0.2s ease;
}

#cursor.hover .cursor__outline {
  width: 56px;
  height: 56px;
  top: -28px;
  left: -28px;
  border-color: rgba(139, 92, 246, 0.6);
}

#cursor.hover .cursor__dot {
  background: var(--accent);
  transform: scale(1.2);
}

#cursor.hidden {
  opacity: 0;
}

/* ============================================
   Typing Cursor Blink
   ============================================ */
.typing-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ============================================
   Star Animation
   ============================================ */
.star--filled svg {
  fill: #FBBF24;
  stroke: #FBBF24;
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fade-up,
  .hero__title-line {
    opacity: 1;
    transform: none;
  }

  .hero__orb {
    display: none;
  }

  #cursor {
    display: none;
  }

  .slider__track,
  .portfolio-slider__track {
    transition-duration: 0.01ms !important;
  }

  .card--featured::before {
    animation: none;
  }

  .contact__form,
  .contact__success {
    transition: none;
  }

  .contact__success-circle,
  .contact__success-check {
    animation: none;
    stroke-dashoffset: 0;
  }
}