/* ==========================================================================
   Ambient background — "crystal rain on a deep-blue grid"
   Purely decorative, sits behind everything (z-index:-1), never changes layout.
   Replace this single file to update the look on every page.
   ========================================================================== */

:root {
  --bgx-grid: 64px;                         /* grid cell size */
  --bgx-line: rgba(59, 110, 230, .17);      /* deep royal-blue grid lines */
  --bgx-clear: 400px;                       /* half-width of the clean centre column */
  --bgx-fade: 540px;                        /* where the side effects reach full strength */
}

html::before, html::after, body::before, body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
}

/* Only show effects on the left/right sides, keep the centre column clean */
html::after, body::before, body::after {
  -webkit-mask-image: linear-gradient(90deg,
      #000 0, #000 calc(50% - var(--bgx-fade)),
      transparent calc(50% - var(--bgx-clear)),
      transparent calc(50% + var(--bgx-clear)),
      #000 calc(50% + var(--bgx-fade)), #000 100%);
          mask-image: linear-gradient(90deg,
      #000 0, #000 calc(50% - var(--bgx-fade)),
      transparent calc(50% - var(--bgx-clear)),
      transparent calc(50% + var(--bgx-clear)),
      #000 calc(50% + var(--bgx-fade)), #000 100%);
}

/* 1) Deep sapphire edge glow — breathes (opacity only), does not drift */
html::before {
  inset: 0;
  background:
    radial-gradient(560px 700px at 0% 38%,   rgba(30, 64, 175, .55), transparent 70%),
    radial-gradient(560px 700px at 100% 62%, rgba(37, 99, 235, .42), transparent 70%),
    radial-gradient(460px 460px at 100% 0%,  rgba(67, 56, 202, .38), transparent 70%),
    radial-gradient(460px 460px at 0% 100%,  rgba(29, 78, 216, .40), transparent 70%);
  animation: bgxBreathe 9s ease-in-out infinite alternate;
}

/* 2) Crisp deep-blue grid */
body::before {
  inset: 0;
  background-image:
    linear-gradient(var(--bgx-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bgx-line) 1px, transparent 1px);
  background-size: var(--bgx-grid) var(--bgx-grid);
  background-position: center top;
}

/* 3) Crystal streaks falling down the grid lines: sapphire tail -> azure body -> ice-white tip.
      GPU transform only; a soft glow follows each streak. */
body::after {
  left: 0; right: 0; top: 0;
  height: 200vh;                    /* two tiles tall; we slide exactly one tile */
  background-image:
    linear-gradient(180deg, transparent 5%, rgba(30,64,175,0) 5%, rgba(30,64,175,.55) 12.7%, rgba(56,189,248,.9) 25.0%, rgba(224,242,255,1) 27%, transparent 27.5%),
    linear-gradient(180deg, transparent 52%, rgba(30,64,175,0) 52%, rgba(30,64,175,.55) 59.0%, rgba(37,99,235,.9) 70.0%, rgba(224,242,255,1) 72%, transparent 72.5%),
    linear-gradient(180deg, transparent 28%, rgba(30,64,175,0) 28%, rgba(30,64,175,.55) 36.4%, rgba(56,189,248,.9) 50.0%, rgba(224,242,255,1) 52%, transparent 52.5%),
    linear-gradient(180deg, transparent 74%, rgba(30,64,175,0) 74%, rgba(30,64,175,.55) 80.3%, rgba(37,99,235,.9) 90.0%, rgba(224,242,255,1) 92%, transparent 92.5%),
    linear-gradient(180deg, transparent 60%, rgba(30,64,175,0) 60%, rgba(30,64,175,.55) 67.7%, rgba(56,189,248,.9) 80.0%, rgba(224,242,255,1) 82%, transparent 82.5%),
    linear-gradient(180deg, transparent 38%, rgba(30,64,175,0) 38%, rgba(30,64,175,.55) 45.7%, rgba(37,99,235,.9) 58.0%, rgba(224,242,255,1) 60%, transparent 60.5%),
    linear-gradient(180deg, transparent 8%, rgba(30,64,175,0) 8%, rgba(30,64,175,.55) 15.0%, rgba(56,189,248,.9) 26.0%, rgba(224,242,255,1) 28%, transparent 28.5%),
    linear-gradient(180deg, transparent 64%, rgba(30,64,175,0) 64%, rgba(30,64,175,.55) 72.4%, rgba(56,189,248,.9) 86.0%, rgba(224,242,255,1) 88%, transparent 88.5%),
    linear-gradient(180deg, transparent 20%, rgba(30,64,175,0) 20%, rgba(30,64,175,.55) 26.3%, rgba(37,99,235,.9) 36.0%, rgba(224,242,255,1) 38%, transparent 38.5%),
    linear-gradient(180deg, transparent 82%, rgba(30,64,175,0) 82%, rgba(30,64,175,.55) 87.6%, rgba(56,189,248,.9) 96.0%, rgba(224,242,255,1) 98%, transparent 98.5%);
  background-position:
    calc(50% - 32px + -576px) 0,
    calc(50% - 32px + -448px) 0,
    calc(50% - 32px + -320px) 0,
    calc(50% - 32px + -192px) 0,
    calc(50% - 32px + -768px) 0,
    calc(50% - 32px + 576px) 0,
    calc(50% - 32px + 448px) 0,
    calc(50% - 32px + 320px) 0,
    calc(50% - 32px + 192px) 0,
    calc(50% - 32px + 768px) 0;
  background-size: 2px 50%;
  background-repeat: repeat-y;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, .75));
  animation: bgxFall 16s linear infinite;
  will-change: transform;
}

/* 4) Little crystals (diamonds) sparkling on grid intersections */
html::after {
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='256' viewBox='0 0 192 256'%3E%3Cdefs%3E%3ClinearGradient id='d' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgb(224,242,255)'/%3E%3Cstop offset='1' stop-color='rgb(37,99,235)'/%3E%3C/linearGradient%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='rgb(56,189,248)' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='rgb(56,189,248)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='96' cy='128' r='11' fill='url(%23h)'/%3E%3Cpolygon points='96,119 103,128 96,137 89,128' fill='url(%23d)'/%3E%3Cpolygon points='96,119 103,128 96,128' fill='white' fill-opacity='.55'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='256' viewBox='0 0 192 256'%3E%3Cdefs%3E%3ClinearGradient id='d' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='rgb(147,197,253)'/%3E%3Cstop offset='1' stop-color='rgb(30,64,175)'/%3E%3C/linearGradient%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='rgb(56,189,248)' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='rgb(56,189,248)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='96' cy='128' r='11' fill='url(%23h)'/%3E%3Cpolygon points='96,119 103,128 96,137 89,128' fill='url(%23d)'/%3E%3Cpolygon points='96,119 103,128 96,128' fill='white' fill-opacity='.55'/%3E%3C/svg%3E");
  background-size: 192px 256px, 256px 192px;
  background-position: calc(50% - 32px) 64px, calc(50% - 32px + 64px) 128px;
  background-repeat: repeat;
  animation: bgxTwinkle 6s ease-in-out infinite;
}

@keyframes bgxBreathe { from { opacity: .75; } to { opacity: 1; } }
@keyframes bgxFall    { from { transform: translate3d(0, -100vh, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes bgxTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Tablet / mobile: no side area to fill -> quiet, static, cheap */
@media (max-width: 900px) {
  html::before, html::after, body::after { display: none; }
  body::before {
    -webkit-mask-image: none; mask-image: none;
    opacity: .55;
  }
}

/* Respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  html::before, html::after, body::after { animation: none; }
}