:root {
  color-scheme: dark;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
}

.bg-aurora {
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(56, 189, 248, 0.16), transparent 60%),
    radial-gradient(1000px 700px at 85% 15%, rgba(232, 121, 249, 0.16), transparent 55%),
    radial-gradient(900px 650px at 70% 85%, rgba(52, 211, 153, 0.12), transparent 55%),
    linear-gradient(180deg, #070A12 0%, #070A12 35%, #05060B 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .bg-aurora {
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    animation: auroraShift 18s ease-in-out infinite alternate;
  }
}

@keyframes auroraShift {
  from {
    filter: saturate(1) contrast(1);
    transform: translateZ(0);
  }
  to {
    filter: saturate(1.08) contrast(1.04);
    transform: translateZ(0);
  }
}

/* Reveal animation (JS toggles .is-visible) */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px) scale(0.99);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Hover tilt uses CSS variables set by JS */
.service-card {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .service-card {
    transform: none !important;
  }
}