/* ==========================================================================
   URSY.FM — AURORA
   Copied from URSY.CLOUD, not reinterpreted. Anatomy, outward in:
     washes  two blurred ellipses on screen blend, counter-drifting
     orbs    bloom + sphere body + screen core + drifting specular
     vig     scrim, vignette, veil, then a bg settle at .38
   Four containment layers are what guarantee AA text contrast anywhere.
   ========================================================================== */

.u-aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .6;
}

/* ---- washes ---- */
.u-aurora__washes {
  position: absolute;
  inset: -20%;
  mix-blend-mode: screen;
  animation: u-hue 90s linear infinite;
}
.u-aurora__wash { position: absolute; display: block; border-radius: 50%; }
.u-aurora__wash--a {
  inset-inline-start: -6%;
  inset-block-start: -8%;
  width: 74%; height: 78%;
  opacity: .4;
  filter: blur(96px);
  background: radial-gradient(circle at 42% 40%, var(--o2) 0%, var(--o4) 44%, transparent 72%);
  animation: u-aurora-a 38s ease-in-out infinite;
}
.u-aurora__wash--b {
  inset-inline-end: -8%;
  inset-block-end: -10%;
  width: 68%; height: 72%;
  opacity: .34;
  filter: blur(104px);
  background: radial-gradient(circle at 58% 56%, var(--o1) 0%, var(--o3) 46%, transparent 74%);
  animation: u-aurora-b 46s ease-in-out infinite;
}

/* ---- orbs ---- */
.u-aurora__orbs { position: absolute; inset: 0; animation: u-hue 90s linear infinite; }
.u-orb { position: absolute; }
.u-orb > span { position: absolute; display: block; border-radius: 50%; }

.u-orb__bloom {
  inset: -34%;
  opacity: .8;
  filter: blur(64px);
  background: radial-gradient(circle, var(--o2) 0%, var(--o4) 36%, transparent 68%);
  animation: u-bloom 5s ease-in-out infinite;
}
.u-orb__body {
  inset: 0;
  background: radial-gradient(circle at 36% 30%, var(--o3) 0%, var(--o4) 28%, var(--o2) 58%, color-mix(in oklab, var(--o2) 32%, black) 100%);
  box-shadow: 0 0 160px -14px var(--o2), inset -22px -26px 52px -20px rgba(0, 0, 0, .6);
  animation: u-throb 3.4s ease-in-out infinite;
}
.u-orb__core {
  inset: 20%;
  filter: blur(18px);
  mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 55%, var(--o3) 0%, var(--o4) 36%, transparent 68%);
  animation: u-core 3.6s ease-in-out infinite;
}
.u-orb__spec {
  inset-inline-start: 20%;
  inset-block-start: 15%;
  width: 26%; height: 20%;
  filter: blur(5px);
  mix-blend-mode: screen;
  background: radial-gradient(circle at 40% 38%, var(--spec) 0%, rgba(255, 255, 255, .35) 42%, transparent 72%);
  animation: u-spec 7s ease-in-out infinite;
}

.u-orb--1 {
  inset-inline-start: 14%;
  inset-block-start: 6%;
  width: 32vh; height: 32vh;
  animation: u-roam-1 70s ease-in-out infinite;
}
.u-orb--2 {
  inset-inline-end: 12%;
  inset-block-start: 24%;
  width: 14vh; height: 14vh;
  animation: u-roam-2 84s ease-in-out infinite -7s;
}
.u-orb--2 .u-orb__bloom { filter: blur(48px); animation-duration: 4.2s; }
.u-orb--2 .u-orb__body { box-shadow: 0 0 90px -12px var(--o1), inset -10px -12px 26px -10px rgba(0, 0, 0, .6); animation-duration: 2.6s; }
.u-orb--2 .u-orb__core { filter: blur(12px); animation-duration: 3s; }

.u-orb--3 {
  inset-inline-start: 52%;
  inset-block-start: 40%;
  width: 20vh; height: 20vh;
  animation: u-roam-3 78s ease-in-out infinite -13s;
}
.u-orb--3 .u-orb__bloom { filter: blur(60px); animation-duration: 5.6s; }
.u-orb--3 .u-orb__body { box-shadow: 0 0 120px -14px var(--o4), inset -18px -20px 40px -16px rgba(0, 0, 0, .6); }
.u-orb--3 .u-orb__spec { animation-delay: -2s; }

/* ---- containment ---- */
.u-aurora__vig { position: absolute; inset: 0; background: var(--vig); }
.u-aurora__veil {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(34px) saturate(126%);
  -webkit-backdrop-filter: blur(34px) saturate(126%);
}
.u-aurora__settle { position: absolute; inset: 0; background: var(--bg); opacity: .38; }

@keyframes u-hue {
  0% { filter: hue-rotate(0deg) saturate(1.15); }
  25% { filter: hue-rotate(90deg) saturate(1.35); }
  50% { filter: hue-rotate(180deg) saturate(1.15); }
  75% { filter: hue-rotate(270deg) saturate(1.35); }
  100% { filter: hue-rotate(360deg) saturate(1.15); }
}
@keyframes u-aurora-a {
  0%, 100% { transform: translate3d(-14%, -10%, 0) scale(1.1) rotate(0deg); }
  50% { transform: translate3d(16%, 12%, 0) scale(1.38) rotate(14deg); }
}
@keyframes u-aurora-b {
  0%, 100% { transform: translate3d(12%, 14%, 0) scale(1.28) rotate(0deg); }
  50% { transform: translate3d(-16%, -12%, 0) scale(1.04) rotate(-16deg); }
}
@keyframes u-bloom { 0%, 100% { opacity: .62; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.22); } }
@keyframes u-throb { 0%, 100% { transform: scale(.86); } 35% { transform: scale(1.12); } 62% { transform: scale(.94); } }
@keyframes u-core { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes u-spec {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .95; }
  50% { transform: translate3d(22%, 18%, 0) scale(.74); opacity: .45; }
}
@keyframes u-roam-1 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  20% { transform: translate3d(46%, 28%, 0) scale(1.14); }
  42% { transform: translate3d(88%, -18%, 0) scale(.86); }
  66% { transform: translate3d(26%, -46%, 0) scale(1.2); }
  84% { transform: translate3d(-32%, -10%, 0) scale(.94); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes u-roam-2 {
  0% { transform: translate3d(0, 0, 0) scale(1.06); }
  24% { transform: translate3d(-72%, 34%, 0) scale(.88); }
  48% { transform: translate3d(-30%, 68%, 0) scale(1.22); }
  70% { transform: translate3d(34%, 26%, 0) scale(.92); }
  100% { transform: translate3d(0, 0, 0) scale(1.06); }
}
@keyframes u-roam-3 {
  0% { transform: translate3d(0, 0, 0) scale(.94); }
  22% { transform: translate3d(58%, -44%, 0) scale(1.18); }
  46% { transform: translate3d(-24%, -72%, 0) scale(.88); }
  72% { transform: translate3d(-62%, -16%, 0) scale(1.1); }
  100% { transform: translate3d(0, 0, 0) scale(.94); }
}

/* Phones: drop the veil's backdrop-filter and pre-blur the orbs instead. */
@media (max-width: 860px) {
  .u-aurora__veil { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .u-aurora__orbs { filter: blur(22px) saturate(122%); transform: scale(1.14); }
}