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

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-section {
    background-attachment: scroll;
  }

  .hero-glow,
  .hero-beam,
  .hero-beam-2,
  .hero-particles {
    animation: none !important;
    transform: none !important;
  }
}

[x-cloak] {
  display: none !important;
}

/* Focus ring for keyboard users */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #6fbaf7;
  outline-offset: 2px;
}

/* Subtle pulse for phone call-to-action links */
a[href^="tel:"] {
  animation: phonePulse 2.8s ease-in-out infinite;
  will-change: transform, box-shadow;
}

@keyframes phonePulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.025);
  }
}

/* Hero background image */
.hero-section {
  background-image:
    linear-gradient(90deg, rgba(3, 7, 18, 0.94) 0%, rgba(3, 7, 18, 0.78) 48%, rgba(3, 7, 18, 0.58) 100%),
    url("./assets/rs-w-1279-m.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Hero ambient glow */
.hero-glow {
  background:
    radial-gradient(ellipse 55% 70% at 18% 48%, rgba(78, 163, 244, 0.16) 0%, transparent 72%),
    radial-gradient(ellipse 45% 55% at 82% 28%, rgba(46, 114, 221, 0.13) 0%, transparent 70%);
  animation: heroGlow 12s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes heroGlow {
  0% {
    opacity: 0.7;
    transform: scale(1) translate3d(-1%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1.08) translate3d(1%, -1%, 0);
  }
}

/* Soft atmospheric light instead of distracting full-height beams */
.hero-beam,
.hero-beam-2 {
  top: 18% !important;
  height: 48% !important;
  width: min(28vw, 360px) !important;
  filter: blur(34px);
  opacity: 0.18;
  transform: rotate(-18deg);
  border-radius: 999px;
  animation: heroLight 10s ease-in-out infinite alternate;
}

.hero-beam-2 {
  top: 42% !important;
  transform: rotate(22deg);
  animation-delay: -5s;
}

@keyframes heroLight {
  0% {
    opacity: 0.08;
    transform: rotate(-18deg) translate3d(-18px, 12px, 0) scaleY(0.9);
  }
  100% {
    opacity: 0.24;
    transform: rotate(-18deg) translate3d(18px, -12px, 0) scaleY(1.1);
  }
}

/* Subtle drifting particles */
.hero-particles {
  background-image:
    radial-gradient(2px 2px at 12% 24%, rgba(111, 186, 247, 0.28), transparent 70%),
    radial-gradient(1px 1px at 27% 72%, rgba(111, 186, 247, 0.2), transparent 70%),
    radial-gradient(2px 2px at 48% 18%, rgba(78, 163, 244, 0.22), transparent 70%),
    radial-gradient(1px 1px at 68% 64%, rgba(111, 186, 247, 0.25), transparent 70%),
    radial-gradient(2px 2px at 86% 34%, rgba(78, 163, 244, 0.2), transparent 70%);
  animation: particleDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes particleDrift {
  0% { transform: translate3d(0, 0, 0); opacity: 0.55; }
  100% { transform: translate3d(0, -14px, 0); opacity: 1; }
}

/* Pulsing "Technicians standing by" badge */
.technician-badge {
  animation: technicianBadgePulse 2.4s ease-in-out infinite;
  will-change: transform, box-shadow;
}

@keyframes technicianBadgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(111, 186, 247, 0);
  }
  50% {
    transform: scale(1.035);
    box-shadow:
      0 0 24px 4px rgba(111, 186, 247, 0.18),
      0 0 0 4px rgba(111, 186, 247, 0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .technician-badge {
    animation: none;
  }
}

/* Scroll reveal animation */
.reveal-target {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-target.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

#home h1 span {
  background-size: 200% auto;
  animation: shimmer 5s linear infinite;
}

#services article:hover .w-14 {
  animation: iconBounce 700ms ease both;
}

@keyframes iconBounce {
  0%, 100% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.16) rotate(-6deg); }
  70% { transform: scale(1.08) rotate(4deg); }
}

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

  #home h1 span,
  #services article:hover .w-14,
  a[href^="tel:"] {
    animation: none;
  }
}