/* CSS adaptation of Aceternity UI's Aurora Background.
   Reference: https://ui.aceternity.com/components/aurora-background */
.hero { isolation: isolate; }

.contact { isolation: isolate; }
.contact__aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.contact__aurora .aurora {
  mask-image: radial-gradient(ellipse at 0% 100%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 0% 100%, #000 10%, transparent 75%);
}
.contact__glow { display: none; }

.hero__bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
}

.aurora {
  --aurora-stripes: repeating-linear-gradient(100deg,
    #fff 0%, #fff 7%, transparent 10%, transparent 12%, #fff 16%);
  --aurora-colors: repeating-linear-gradient(100deg,
    #3b82f6 10%, #a5b4fc 15%, #93c5fd 20%, #ddd6fe 25%, #60a5fa 30%);
  position: absolute;
  inset: -10%;
  opacity: 0.5;
  background-image: var(--aurora-stripes), var(--aurora-colors);
  background-size: 300% 200%;
  background-position: 50% 50%;
  filter: blur(10px) invert(1);
  mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 70%);
}

.aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--aurora-stripes), var(--aurora-colors);
  background-size: 200% 100%;
  background-position: 50% 50%;
  mix-blend-mode: difference;
  animation: aurora-drift 60s linear infinite;
}

html[data-theme="dark"] .aurora {
  --aurora-stripes: repeating-linear-gradient(100deg,
    #000 0%, #000 7%, transparent 10%, transparent 12%, #000 16%);
  opacity: 0.35;
  filter: blur(10px);
}

@keyframes aurora-drift {
  from { background-position: 50% 50%, 50% 50%; }
  to { background-position: 350% 50%, 350% 50%; }
}

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