/* authguards.com — home backdrop effects (example-read-only parity) */

.home-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.page-home[data-home-bg="aurora"] .site-grid-bg,
.page-home[data-home-bg="dots"] .site-grid-bg,
.page-home[data-home-bg="gradient"] .site-grid-bg {
  opacity: 0.35;
}

.page-home[data-home-bg="spotlight"] .site-grid-bg,
.page-home[data-home-bg="meteors"] .site-grid-bg {
  opacity: 0.5;
}

.home-fx__aurora {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%),
    radial-gradient(ellipse 60% 45% at 75% 55%, color-mix(in srgb, var(--accent-2) 28%, transparent), transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 80%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 45%);
  filter: blur(40px);
  animation: home-aurora 18s ease-in-out infinite alternate;
}

@keyframes home-aurora {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

.home-fx__spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--spot-x, 50%) var(--spot-y, 40%),
    color-mix(in srgb, var(--accent-2) 16%, transparent),
    transparent 55%
  );
  pointer-events: none;
}

.home-fx__meteors {
  position: absolute;
  inset: 0;
}

.home-fx__meteor {
  position: absolute;
  top: calc(var(--i) * 7% - 10%);
  left: calc(var(--i) * 8% + 5%);
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-2) 80%, #fff);
  animation: home-meteor 4s linear infinite;
  animation-delay: calc(var(--i) * -0.65s);
  opacity: 0;
}

@keyframes home-meteor {
  0% { transform: translate(0, 0) rotate(215deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-280px, 280px) rotate(215deg); opacity: 0; }
}

.home-fx__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
}

.home-fx__gradient {
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    125deg,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent 35%,
    color-mix(in srgb, var(--accent-2) 18%, transparent) 65%,
    transparent
  );
  animation: home-gradient-shift 14s ease-in-out infinite alternate;
  filter: blur(48px);
}

@keyframes home-gradient-shift {
  0% { transform: translate3d(-3%, 0, 0) rotate(0deg); }
  100% { transform: translate3d(4%, -2%, 0) rotate(8deg); }
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-muted);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.site-footer__social-link:hover {
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .home-fx__aurora,
  .home-fx__gradient,
  .home-fx__meteor {
    animation: none !important;
  }
}