/* Happ.market graphite wallpaper — restrained black/gray wireframe */
:root{
  --wall-bg: #050506;
  --wall-bg-2: #0b0b0d;
  --wall-bg-3: #15161a;
  --wall-blue: #71717a;
  --wall-cyan: #a1a1aa;
  --wall-ice: #f4f4f5;
  --wall-grid: url("../img/wallpaper-cyber-grid.svg");
  --wall-links: url("../img/wallpaper-cyber-links.svg");
  --wall-pulses: url("../img/wallpaper-cyber-pulses.svg");
}

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

body{
  overflow-x: hidden;
  position: relative;
}

html::before,
html::after,
body::before,
body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  will-change: transform, opacity, background-position;
}

html::before{
  z-index: -4;
  inset: -12%;
  background:
    radial-gradient(62vw 44vw at 14% 12%, rgba(113,113,122,.10), transparent 60%),
    radial-gradient(52vw 38vw at 84% 82%, rgba(161,161,170,.08), transparent 64%),
    radial-gradient(38vw 28vw at 58% 46%, rgba(113,113,122,.05), transparent 72%),
    linear-gradient(180deg, var(--wall-bg) 0%, var(--wall-bg-2) 48%, var(--wall-bg-3) 100%);
  opacity: 1;
}

html::after{
  z-index: -3;
  inset: -16%;
  background:
    var(--wall-grid),
    linear-gradient(126deg, transparent 24%, rgba(161,161,170,.06) 31%, transparent 38%),
    linear-gradient(126deg, transparent 60%, rgba(113,113,122,.05) 66%, transparent 72%);
  background-repeat: no-repeat;
  background-size: 150% 150%, 220% 180%, 210% 170%;
  background-position: 50% 52%, -24% 0%, 126% 0%;
  opacity: .56;
  transform: perspective(1700px) rotateX(70deg) rotateZ(-17deg) scale(1.30) translate3d(0, 7%, 0);
  transform-origin: 52% 58%;
  animation: wireFar 20s ease-in-out infinite alternate;
}

body::before{
  z-index: -2;
  inset: -15%;
  background:
    var(--wall-links),
    linear-gradient(132deg, transparent 10%, rgba(247,254,255,.06) 15%, transparent 22%),
    linear-gradient(132deg, transparent 58%, rgba(113,113,122,.08) 63%, transparent 70%);
  background-repeat: no-repeat;
  background-size: 142% 142%, 230% 180%, 220% 170%;
  background-position: 51% 49%, -30% 0%, 126% 0%;
  opacity: .78;
  transform: perspective(1750px) rotateX(16deg) rotateY(-11deg) rotateZ(7deg) scale(1.08);
  transform-origin: 56% 52%;
  animation: wireMid 14s cubic-bezier(.36,.03,.18,1) infinite alternate;
}

body::after{
  z-index: -1;
  inset: -18%;
  background:
    var(--wall-pulses),
    linear-gradient(130deg, transparent 0%, rgba(255,255,255,.10) 7%, transparent 13%),
    linear-gradient(130deg, transparent 48%, rgba(161,161,170,.10) 54%, transparent 60%),
    linear-gradient(130deg, transparent 74%, rgba(113,113,122,.11) 79%, transparent 85%);
  background-repeat: no-repeat;
  background-size: 136% 136%, 240% 180%, 220% 170%, 200% 160%;
  background-position: 50% 50%, -34% 0%, 126% 0%, 144% 0%;
  opacity: .93;
  transform: perspective(1500px) rotateX(7deg) rotateZ(-5deg) scale(1.02);
  animation: wireNear 9.5s ease-in-out infinite alternate, wireSweep 7s linear infinite;
}

@keyframes wireFar{
  0%{
    transform: perspective(1700px) rotateX(69deg) rotateZ(-18deg) scale(1.26) translate3d(-1.2%, 8%, 0);
    background-position: 48% 54%, -24% 0%, 126% 0%;
    opacity: .48;
  }
  100%{
    transform: perspective(1700px) rotateX(71deg) rotateZ(-15deg) scale(1.33) translate3d(1.6%, 4%, 0);
    background-position: 53% 48%, 120% 0%, -18% 0%;
    opacity: .60;
  }
}

@keyframes wireMid{
  0%{
    transform: perspective(1750px) rotateX(15deg) rotateY(-13deg) rotateZ(6deg) scale(1.05) translate3d(-1.1%, -.4%, 0);
    background-position: 49% 52%, -30% 0%, 126% 0%;
  }
  100%{
    transform: perspective(1750px) rotateX(18deg) rotateY(-8deg) rotateZ(9deg) scale(1.11) translate3d(1.5%, .8%, 0);
    background-position: 53% 47%, 124% 0%, -16% 0%;
  }
}

@keyframes wireNear{
  0%{
    opacity: .84;
    transform: perspective(1500px) rotateX(6deg) rotateZ(-6deg) scale(1) translate3d(-.8%, 0, 0);
  }
  100%{
    opacity: .98;
    transform: perspective(1500px) rotateX(8deg) rotateZ(-4deg) scale(1.04) translate3d(.8%, -.6%, 0);
  }
}

@keyframes wireSweep{
  0%{ background-position: 50% 50%, -34% 0%, 126% 0%, 144% 0%; }
  100%{ background-position: 50% 50%, 132% 0%, -20% 0%, -12% 0%; }
}

@media (max-width: 980px){
  html::after{
    background-size: 165% 165%, 235% 185%, 225% 175%;
    transform: perspective(1350px) rotateX(72deg) rotateZ(-17deg) scale(1.34) translate3d(0, 9%, 0);
  }
  body::before{ background-size: 156% 156%, 245% 190%, 230% 180%; }
  body::after{ background-size: 150% 150%, 250% 190%, 235% 180%, 220% 170%; }
}

@media (max-width: 720px){
  html::after{ opacity: .46; }
  body::before{ opacity: .70; }
  body::after{ opacity: .82; }
}

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