aurora.css

/*
 * aurora-glass — the Aurora material (optional but recommended).
 *
 * The JS engine sets each surface's `backdrop-filter` (the refraction). This stylesheet
 * supplies the rest of the Aurora look — a cool low-saturation tint, a soft specular rim,
 * an adjustable frost veil, and the cursor-tracking light — as plain, tweakable CSS.
 *
 *   <div class="aurora-glass aurora-glass--interactive">…</div>   // interactive = cursor glow
 *
 * Tunables (custom properties):
 *   --ag-radius, --ag-tint-a, --ag-tint-b, --ag-rim, --ag-glow, --ag-glow-size,
 *   --lg-frost (0..1, also written by the JS engine).
 */
.aurora-glass {
  --ag-radius: 1.6rem;
  --ag-tint-a: 150, 190, 255; /* cool blue */
  --ag-tint-b: 190, 160, 255; /* soft violet */
  --ag-rim: 255, 255, 255;
  --ag-glow: 255, 255, 255;
  --ag-glow-size: 240px;

  position: relative;
  isolation: isolate;
  border-radius: var(--ag-radius);
  /* top layer = adjustable frost veil (dark dimming scaled by --lg-frost, ~35% cap);
     under it, a faint cool infusion so the wallpaper shows through. */
  background:
    linear-gradient(rgba(6, 9, 16, calc(var(--lg-frost, 0) * 0.35)), rgba(6, 9, 16, calc(var(--lg-frost, 0) * 0.35))),
    linear-gradient(135deg, rgba(var(--ag-tint-a), 0.06), rgba(255, 255, 255, 0.015) 48%, rgba(var(--ag-tint-b), 0.05));
  /* fallback for non-Chromium engines (no url() refraction) — still reads as glass;
     the JS engine overrides this inline with the displacement filter on Chromium. */
  backdrop-filter: blur(6px) saturate(150%);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.36),
    0 1px 4px rgba(0, 0, 0, 0.20),
    inset 0 1px 1px rgba(var(--ag-rim), 0.20);
}

/* soft, cool specular rim — a hairline gradient border revealed only at the edge */
.aurora-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(
    150deg,
    rgba(var(--ag-rim), 0.55),
    rgba(180, 210, 255, 0.12) 30%,
    rgba(var(--ag-rim), 0.03) 60%,
    rgba(200, 180, 255, 0.28) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* cursor-tracking specular light — needs the JS PointerGlow (Aurora attaches it by default) */
.aurora-glass--interactive::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    var(--ag-glow-size) circle at var(--lg-glow-x, 50%) var(--lg-glow-y, 50%),
    rgba(var(--ag-glow), 0.22),
    rgba(190, 215, 255, 0.08) 38%,
    transparent 70%
  );
  opacity: var(--lg-glow, 0);
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}

/* springy lift on hover — the fluid interaction feel */
.aurora-glass--interactive {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
.aurora-glass--interactive:hover {
  transform: translateY(-2px);
  box-shadow:
    0 26px 60px rgba(120, 170, 255, 0.24),
    0 2px 8px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(var(--ag-rim), 0.34);
}

/* no cursor chase under reduced motion — a gentle static highlight instead */
@media (prefers-reduced-motion: reduce) {
  .aurora-glass--interactive::before {
    opacity: 1;
    background: radial-gradient(200px circle at 22% 0%, rgba(var(--ag-glow), 0.14), transparent 62%);
  }
  .aurora-glass--interactive {
    transition: none;
  }
}

/*
 * Optional ambient background: a slow, calm colour drift to sit BEHIND your glass (e.g. a
 * full-screen element with class="aurora-bg" at the back). Motion stops under
 * prefers-reduced-motion.
 */
.aurora-bg {
  background:
    radial-gradient(50% 60% at 18% 22%, rgba(56, 140, 255, 0.28), transparent 60%),
    radial-gradient(46% 58% at 82% 30%, rgba(150, 90, 255, 0.24), transparent 60%),
    radial-gradient(52% 60% at 60% 82%, rgba(40, 200, 180, 0.22), transparent 62%);
  filter: blur(30px);
  opacity: 0.75;
}
@media (prefers-reduced-motion: no-preference) {
  .aurora-bg {
    background-size: 200% 200%, 220% 220%, 240% 240%;
    animation: aurora-drift 34s ease-in-out infinite alternate;
  }
}
@keyframes aurora-drift {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%; }
  50% { background-position: 30% 40%, 60% 20%, 40% 70%; }
  100% { background-position: 0% 100%, 100% 60%, 60% 40%; }
}