/* ─── Hero SVG — ambient floating circles ─── */
@keyframes orbit-slow {
  from { transform: rotate(0deg) translateX(70px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(70px) rotate(-360deg); }
}
@keyframes orbit-mid {
  from { transform: rotate(120deg) translateX(110px) rotate(-120deg); }
  to   { transform: rotate(480deg) translateX(110px) rotate(-480deg); }
}
@keyframes orbit-fast {
  from { transform: rotate(240deg) translateX(50px) rotate(-240deg); }
  to   { transform: rotate(600deg) translateX(50px) rotate(-600deg); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-20px); }
}
@keyframes float-y2 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(18px); }
}
@keyframes pulse-ring {
  0%, 100% { opacity: 0.15; r: 8; }
  50%       { opacity: 0.4;  r: 12; }
}

.hero-svg {
  width: 100%;
  max-width: 480px;
  height: 400px;
}
.hero-svg__orbit-center {
  /* all orbiting dots revolve around this group's center */
}
.dot-orbit-1 { animation: orbit-slow 14s linear infinite; }
.dot-orbit-2 { animation: orbit-mid  18s linear infinite; }
.dot-orbit-3 { animation: orbit-fast 22s linear infinite; }
.dot-float-1 { animation: float-y  3.5s ease-in-out infinite; }
.dot-float-2 { animation: float-y2 4.5s ease-in-out infinite; }
.ring-pulse   { animation: pulse-ring 4s ease-in-out infinite; }

/* ─── Scroll-reveal via AOS ─── */
/* AOS styles are in vendor/aos.css — we just customize timing */

/* ─── Navbar scroll-shadow ─── */
.navbar.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

/* ─── Card hover (already in components.css, kept here for animation group) ─── */

/* ─── Hero SVG: hide on mobile ─── */
@media (max-width: 900px) {
  .hero__svg-wrap { display: none !important; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  main { animation: none; opacity: 1; }
  .dot-orbit-1, .dot-orbit-2, .dot-orbit-3,
  .dot-float-1, .dot-float-2, .ring-pulse { animation: none; }
  .btn, .service-card, .navbar__cta {
    transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
  }
  .btn:hover, .btn:active,
  .service-card:hover,
  .navbar__cta:hover, .navbar__cta:active { transform: none; filter: none; }
}

/* ─── Contact form success animation ─── */
@keyframes _circle-draw {
  from { stroke-dashoffset: 160; }
  to   { stroke-dashoffset: 0; }
}
@keyframes _check-draw {
  from { stroke-dashoffset: 50; }
  to   { stroke-dashoffset: 0; }
}
.success-circle {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: _circle-draw 0.55s ease-out 0.05s forwards;
}
.success-check {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: _check-draw 0.35s ease-out 0.55s forwards;
}