/* ================= GLOBAL CUSTOM STYLES ================= */
:root {
  --primary-orange: #e06738;
  --primary-orange-hover: #c8562a;
  --dark-slate: #1e2432;
  --card-dark: #363946;
}

/* Glassmorphism Header */
.glass-nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Hero Background Glow */
.hero-glow {
  position: absolute;
  inset: -1rem;
  background: linear-gradient(to top right, rgba(224, 103, 56, 0.2), rgba(99, 102, 241, 0.1));
  border-radius: 9999px;
  filter: blur(40px);
  opacity: 0.7;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.group:hover .hero-glow {
  opacity: 1;
}

/* About Ambient Glow */
.about-glow {
  position: absolute;
  right: -5rem;
  bottom: -5rem;
  width: 20rem;
  height: 20rem;
  background-color: rgba(224, 103, 56, 0.1);
  border-radius: 9999px;
  filter: blur(60px);
  pointer-events: none;
}

/* ================= SCROLL REVEAL ANIMATION ================= */
.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Delay Staggering */
.delay-100 {
  transition-delay: 100ms;
}

.delay-200 {
  transition-delay: 200ms;
}

.delay-300 {
  transition-delay: 300ms;
}

/* ================= FLOATING KEYFRAMES ================= */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.animate-float {
  animation: floatSlow 4s ease-in-out infinite;
}

/* ================= ACCESSIBILITY ================= */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .animate-float {
    animation: none;
  }

  .hero-glow,
  .about-glow {
    transition: none;
  }
}