/* ==========================================================
   wallpaper.css — animated ZX-Spectrum inspired branded hexagon wallpaper
   ========================================================== */

:root{
  --space-bg: #010615;
  --space-bg-2: #041334;
  --space-blue: #1b7cff;
  --space-cyan: #95eeff;
  --space-glow: rgba(95, 196, 255, .28);
  --stars-layer-1: url("../img/wallpaper-stars-zx.svg");
  --stars-layer-2: url("../img/wallpaper-stars-zx-2.svg");
  --fractal-layer: url("../img/wallpaper-fractal-zx.svg");
  --earth-layer: url("../img/wallpaper-earth-zx.svg");
}

html, body{
  min-height: 100%;
  background: transparent !important;
}

body{ overflow-x: hidden; }

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

html::before{
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(1200px 900px at 14% 14%, rgba(31,125,255,.16), transparent 58%),
    radial-gradient(960px 760px at 84% 18%, rgba(149,238,255,.12), transparent 60%),
    radial-gradient(1200px 900px at 60% 112%, rgba(8,43,97,.44), transparent 58%),
    linear-gradient(180deg, var(--space-bg), var(--space-bg-2) 54%, #020918 100%),
    var(--stars-layer-1),
    var(--stars-layer-2);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-size: auto, auto, auto, auto, 520px 520px, 680px 680px;
  background-position: center, center, center, center, 0 0, 0 0;
  opacity: 1;
  animation: starsDriftA 140s linear infinite;
}

html::after{
  inset: -12%;
  z-index: -3;
  background:
    var(--fractal-layer),
    var(--fractal-layer),
    radial-gradient(46vw 46vw at 78% 20%, rgba(255,255,255,.06), transparent 58%),
    radial-gradient(42vw 42vw at 22% 72%, rgba(108,184,255,.08), transparent 56%);
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-size: 760px 760px, 1120px 1120px, auto, auto;
  background-position: 0 0, 180px 120px, center, center;
  opacity: .84;
  mix-blend-mode: screen;
  animation: fractalDrift 210s linear infinite;
}

body::before{
  z-index: -2;
  width: min(46vw, 650px);
  aspect-ratio: 1 / 1;
  left: 58%;
  top: 57%;
  background: var(--earth-layer) center / contain no-repeat;
  opacity: .99;
  filter:
    drop-shadow(0 0 20px rgba(109, 214, 255, .16))
    drop-shadow(0 0 52px rgba(27, 124, 255, .18));
  transform-origin: 50% 50%;
  animation: emblemDrift 13s ease-in-out infinite;
}

body::after{
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98,182,255,.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0));
  background-size: 100% 4px, 72px 72px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  opacity: .16;
  mix-blend-mode: screen;
  animation: gridPulse 14s ease-in-out infinite;
}

@keyframes starsDriftA{
  from{ background-position: center, center, center, center, 0 0, 0 0; }
  to{ background-position: center, center, center, center, -520px 240px, 220px -680px; }
}

@keyframes fractalDrift{
  from{ transform: translate3d(0, 0, 0) scale(1.02); background-position: 0 0, 180px 120px, center, center; }
  50%{ transform: translate3d(-1.2%, .8%, 0) scale(1.05); background-position: -140px 90px, 90px 180px, center, center; }
  to{ transform: translate3d(-2.6%, 1.8%, 0) scale(1.02); background-position: -280px 180px, 0 240px, center, center; }
}

@keyframes emblemDrift{
  0%,100%{ transform: translate(-50%, -50%) translateY(0) rotate(-1.4deg) scale(1); filter: drop-shadow(0 0 20px rgba(109,214,255,.16)) drop-shadow(0 0 52px rgba(27,124,255,.18)); }
  50%{ transform: translate(-50%, -50%) translateY(-10px) rotate(1.1deg) scale(1.018); filter: drop-shadow(0 0 24px rgba(109,214,255,.24)) drop-shadow(0 0 64px rgba(27,124,255,.22)); }
}

@keyframes gridPulse{
  0%,100%{ opacity: .14; }
  50%{ opacity: .22; }
}

@media (max-width: 980px){
  body::before{
    width: min(62vw, 560px);
    left: 60%;
    top: 58%;
    opacity: .96;
  }
}

@media (max-width: 720px){
  html::before{ background-size: auto, auto, auto, auto, 420px 420px, 560px 560px; }
  html::after{ background-size: 640px 640px, 920px 920px, auto, auto; opacity: .7; }
  body::before{
    width: min(82vw, 470px);
    left: 58%;
    top: 60%;
    opacity: .9;
  }
  body::after{ opacity: .12; }
}

@media (prefers-reduced-motion: reduce){
  html::before,
  html::after,
  body::before,
  body::after{ animation: none !important; }
}