/* 
   Luxury Golden Aurora Background 
   Translated from React/Tailwind to Vanilla CSS 
*/

:root {
  --white: #ffffff;
  --black: #000000;
  --transparent: transparent;
  
  /* Original Aurora Colors */
  --blue-500: #3b82f6;
  --indigo-300: #a5b4fc;
  --blue-300: #93c5fd;
  --violet-200: #ddd6fe;
  --blue-400: #60a5fa;

  --aurora-white: #fafafa; /* Zinc 50 approx */
  --aurora-dark: #18181b;  /* Zinc 900 approx */
}

.aurora-container {
  position: fixed;
  inset: 0;
  z-index: -10;
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: var(--aurora-white);
  color: #020617; /* Slate 950 */
  transition: background-color 0.5s ease;
  overflow: hidden;
  pointer-events: none;
}

/* Dark mode support */
body.dark .aurora-container {
  background-color: var(--aurora-dark);
}

.aurora-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.aurora-effect {
  position: absolute;
  inset: -10px;
  opacity: 0.5;
  will-change: transform;
  
  /* Gradients */
  --white-gradient: repeating-linear-gradient(100deg, var(--white) 0%, var(--white) 7%, var(--transparent) 10%, var(--transparent) 12%, var(--white) 16%);
  --dark-gradient: repeating-linear-gradient(100deg, var(--black) 0%, var(--black) 7%, var(--transparent) 10%, var(--transparent) 12%, var(--black) 16%);
  --aurora: repeating-linear-gradient(100deg, var(--blue-500) 10%, var(--indigo-300) 15%, var(--blue-300) 20%, var(--violet-200) 25%, var(--blue-400) 30%);

  background-image: var(--white-gradient), var(--aurora);
  background-size: 300% 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(10px) invert(1);
}

body.dark .aurora-effect {
  background-image: var(--dark-gradient), var(--aurora);
  filter: blur(10px) invert(0);
}

.aurora-effect::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--white-gradient), var(--aurora);
  background-size: 200% 100%;
  background-attachment: fixed;
  mix-blend-mode: difference;
  animation: aurora-drift 60s linear infinite;
}

body.dark .aurora-effect::after {
  background-image: var(--dark-gradient), var(--aurora);
}

/* Mask for radial gradient (ellipse at 100% 0%) */
.aurora-effect {
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
}

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

/* Ensure body is transparent to see the fixed background */
body {
  background-color: transparent !important;
}