/* ==========================================================================
   wallpaper.css — dark "bloom" wallpaper built only from gradients.
   <div class="wallpaper" aria-hidden="true"></div>
   fills its positioned ancestor (or the viewport). Uses ::before/::after,
   so it must stay an empty element.
   ========================================================================== */

.wallpaper {
  --bloom-x: 58%;
  --bloom-y: 60%;
  --bloom-size: max(140vmin, 950px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  background:
    /* edge vignette */
    radial-gradient(130% 110% at var(--bloom-x) 52%, transparent 48%, rgba(0, 2, 10, 0.62) 100%),
    /* luminous halo behind the bloom */
    radial-gradient(46% 52% at var(--bloom-x) var(--bloom-y), rgba(48, 132, 255, 0.42) 0%, rgba(30, 86, 214, 0.18) 42%, transparent 72%),
    /* faint cyan haze, upper left */
    radial-gradient(60% 50% at 12% 8%, rgba(56, 152, 230, 0.16), transparent 70%),
    /* deep navy base */
    linear-gradient(162deg, #040a1d 0%, #061433 38%, #0a1f55 64%, #050c26 86%, #02050f 100%);
  background-color: #040a1d;
}

/* Petal layers: rotated sets of crisp-edged elliptical gradients (deep heart,
   luminous rim), screen-blended so overlaps glow like translucent fabric. */
.wallpaper::before,
.wallpaper::after {
  content: "";
  position: absolute;
  top: var(--bloom-y);
  left: var(--bloom-x);
  z-index: -1;
  width: var(--bloom-size);
  height: var(--bloom-size);
  margin-top: calc(var(--bloom-size) / -2);
  margin-left: calc(var(--bloom-size) / -2);
  border-radius: 50%;
  mix-blend-mode: screen;
}

.wallpaper::before {
  transform: rotate(-22deg);
  background:
    /* up + right: crisp front petals; left + down: soft, out-of-focus */
    radial-gradient(10.4% 23.2% at 49.2% 27.6%, rgba(16, 52, 170, 0.5) 0%, rgba(52, 132, 255, 0.55) 60%, rgba(170, 226, 255, 0.95) 95%, transparent 100%),
    radial-gradient(23.2% 10.0% at 72.4% 50.8%, rgba(16, 52, 170, 0.46) 0%, rgba(40, 112, 246, 0.5) 60%, rgba(150, 214, 255, 0.85) 95%, transparent 100%),
    radial-gradient(16.8% 8.0% at 34.0% 50.0%, rgba(16, 52, 170, 0.36) 0%, rgba(40, 112, 246, 0.38) 55%, rgba(150, 214, 255, 0.45) 82%, transparent 100%),
    radial-gradient(8.0% 15.2% at 50.8% 66.0%, rgba(16, 52, 170, 0.34) 0%, rgba(40, 112, 246, 0.36) 55%, rgba(150, 214, 255, 0.4) 82%, transparent 100%);
  -webkit-mask: radial-gradient(closest-side, #000 36%, rgba(0, 0, 0, 0.62) 80%, rgba(0, 0, 0, 0.5) 100%);
  mask: radial-gradient(closest-side, #000 36%, rgba(0, 0, 0, 0.62) 80%, rgba(0, 0, 0, 0.5) 100%);
}

.wallpaper::after {
  transform: rotate(26deg);
  background:
    /* hot core, then up-right / left / lower crisp petals and a soft right one */
    radial-gradient(3.6% 3.6% at 50% 50%, rgba(236, 248, 255, 0.95), rgba(170, 226, 255, 0.45) 55%, transparent 100%),
    radial-gradient(10.5% 10.5% at 50% 50%, rgba(110, 190, 255, 0.42), transparent 100%),
    radial-gradient(8.8% 19.2% at 50.8% 31.6%, rgba(16, 52, 170, 0.42) 0%, rgba(40, 112, 246, 0.48) 60%, rgba(150, 214, 255, 0.8) 95%, transparent 100%),
    radial-gradient(20.8% 9.6% at 30.0% 49.2%, rgba(16, 52, 170, 0.44) 0%, rgba(52, 132, 255, 0.5) 60%, rgba(170, 226, 255, 0.88) 95%, transparent 100%),
    radial-gradient(15.2% 7.6% at 65.2% 50.0%, rgba(16, 52, 170, 0.3) 0%, rgba(40, 112, 246, 0.34) 55%, rgba(150, 214, 255, 0.38) 82%, transparent 100%),
    radial-gradient(9.6% 20.0% at 50.0% 69.2%, rgba(16, 52, 170, 0.44) 0%, rgba(40, 112, 246, 0.5) 60%, rgba(150, 214, 255, 0.82) 95%, transparent 100%);
  -webkit-mask: radial-gradient(closest-side, #000 36%, rgba(0, 0, 0, 0.62) 80%, rgba(0, 0, 0, 0.5) 100%);
  mask: radial-gradient(closest-side, #000 36%, rgba(0, 0, 0, 0.62) 80%, rgba(0, 0, 0, 0.5) 100%);
}

/* Lock screen: dimmer and softer; the bloom drifts slightly larger. */
.wallpaper--lock {
  --bloom-size: max(152vmin, 1020px);
  filter: brightness(0.78) saturate(1.15);
}
.wallpaper--lock::before,
.wallpaper--lock::after {
  filter: blur(6px);
}

/* Sign-in state (PIN box shown): strong acrylic-like blur, as Windows does. */
.wallpaper--blur::before,
.wallpaper--blur::after {
  filter: blur(28px) brightness(0.8);
}

@media (prefers-reduced-motion: no-preference) {
  .wallpaper::before,
  .wallpaper::after {
    transition: filter var(--dur-slow) var(--ease);
  }
}

/* Small screens: keep the bloom on screen and in proportion. */
@media (max-width: 599px) {
  .wallpaper {
    --bloom-x: 55%;
    --bloom-y: 62%;
    --bloom-size: max(180vmin, 760px);
  }
}