/* ============================================================
   Slayy Studio — Aurora Background
   Visual port of Aceternity's <AuroraBackground />.
   Reference: https://ui.aceternity.com/components/aurora-background
   ------------------------------------------------------------
   Note: the original uses `filter: invert + mix-blend-difference`
   to compose two layered patterns. That trick relies on grouping
   that isn't possible with a single CSS multi-background and
   bleeds onto page content when split across pseudo-elements.
   So we paint the aurora colors directly (no invert, no diff)
   and animate the same pattern, masked to the top-right corner.
   Same palette, same gradient stripes, same 60s linear keyframes.
   ============================================================ */

:root{
  --aurora-white:       #ffffff;
  --aurora-transparent: transparent;
  /* Original Aceternity palette — Tailwind blue / indigo / violet */
  --aurora-blue-500:    #3b82f6;
  --aurora-indigo-300:  #a5b4fc;
  --aurora-blue-300:    #93c5fd;
  --aurora-violet-200:  #ddd6fe;
  --aurora-blue-400:    #60a5fa;

  --aurora-white-gradient: repeating-linear-gradient(
    100deg,
    var(--aurora-white) 0%,
    var(--aurora-white) 3.5%,
    var(--aurora-transparent) 5%,
    var(--aurora-transparent) 6%,
    var(--aurora-white) 8%
  );

  /* Second vertical white-stripe layer at the same 100deg angle but
     with finer spacing — interleaves extra white bands inside each
     color wave for more variation along the band's length. */
  --aurora-white-fine: repeating-linear-gradient(
    100deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.45) 1.5%,
    var(--aurora-transparent) 2.5%,
    var(--aurora-transparent) 3.5%,
    rgba(255,255,255,0.45) 4.5%
  );

  --aurora: repeating-linear-gradient(
    100deg,
    var(--aurora-blue-500)   5%,
    var(--aurora-indigo-300) 7.5%,
    var(--aurora-blue-300)   10%,
    var(--aurora-violet-200) 12.5%,
    var(--aurora-blue-400)   15%
  );

  /* Top-right radial mask — exact Aceternity default. Most of the
     viewport is visible; it just falls off toward the far corner. */
  --aurora-mask: radial-gradient(
    ellipse at 100% 0%,
    #000 10%,
    transparent 70%
  );
}

body.aurora-bg{
  background:#fafafa !important;          /* zinc-50 base */
}

body.aurora-bg::before{
  content:"";
  position:fixed;
  inset:-10px;
  z-index:-1;
  pointer-events:none;
  /* Two vertical white-stripe layers (different scale) over the aurora
     for richer banding along each color wave. */
  background-image:
    var(--aurora-white-gradient),
    var(--aurora-white-fine),
    var(--aurora);
  background-size:
    200% 100%,
    260% 100%,
    300% 200%;
  background-position:
    50% 50%,
    50% 50%,
    50% 50%;
  background-repeat: repeat;
  filter: blur(8px);                      /* slightly sharper bands */
  opacity: 0.68;
  will-change: background-position;
  /* Promote to its own GPU layer & contain repaint so the aurora's
     constant animation doesn't force the chat-widget popup (or any
     other fixed overlay) to flicker every frame. */
  transform: translateZ(0);
  contain: layout paint style;
  isolation: isolate;
  -webkit-mask-image: var(--aurora-mask);
          mask-image: var(--aurora-mask);
  animation: slayy-aurora 86s linear infinite;
}

/* Same keyframes as the Aceternity globals.css */
@keyframes slayy-aurora{
  /* All three layers drift horizontally; the fine layer travels at a
     slightly different rate so it slips against the main bands and
     keeps the texture alive. */
  from { background-position:  50% 50%,  50% 50%,  50% 50%; }
  to   { background-position: 350% 50%, 280% 50%, 350% 50%; }
}

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