/* =========================================================
   LEVELGT — FONDO GAMER DE PIXELES
   Capa separada para que el efecto pueda modificarse sin
   tocar el resto de la tienda.
   ========================================================= */

:root{
  --px-blue:#5fbded;
  --px-blue-2:#36aee8;
  --px-deep:#0a1722;
  --scroll-shift:0px;
}

body{
  background:linear-gradient(180deg,#091017 0%,#0d141b 48%,#091017 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 12%, rgba(54,174,232,.16), transparent 26%),
    radial-gradient(circle at 82% 30%, rgba(95,189,237,.10), transparent 30%),
    linear-gradient(180deg,#091017 0%,#0d141b 48%,#091017 100%);
}

.pixel-universe{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  perspective:900px;
}

/* Rejilla digital muy tenue */
.pixel-universe::before{
  content:"";
  position:absolute;
  inset:-15%;
  background-image:
    linear-gradient(rgba(95,189,237,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,189,237,.035) 1px, transparent 1px);
  background-size:42px 42px;
  transform:translate3d(0,calc(var(--scroll-shift) * -.18),0) rotateX(58deg) scale(1.4);
  transform-origin:50% 45%;
  opacity:.6;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 72%,transparent 100%);
}

/* Barrido luminoso */
.pixel-universe::after{
  content:"";
  position:absolute;
  inset:-30% -10%;
  background:linear-gradient(110deg,transparent 0 40%,rgba(54,174,232,.045) 48%,rgba(95,189,237,.10) 50%,rgba(54,174,232,.04) 53%,transparent 61%);
  transform:translateX(-55%);
  animation:digitalSweep 15s linear infinite;
}

.pixel-field{
  position:absolute;
  inset:-12vh -4vw -20vh;
  transform:translate3d(0,calc(var(--scroll-shift) * -.32),0);
  will-change:transform;
}

.pixel{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--s);
  height:var(--s);
  opacity:0;
  background:var(--px-blue);
  border-radius:1px;
  box-shadow:0 0 10px rgba(95,189,237,.55),0 0 24px rgba(54,174,232,.20);
  animation:
    pixelFloat var(--dur) linear var(--delay) infinite,
    pixelBlink var(--blink) steps(2,end) var(--delay) infinite;
  will-change:transform,opacity;
}
.pixel:nth-child(3n){background:var(--px-blue-2)}
.pixel:nth-child(5n){box-shadow:none;opacity:.3}
.pixel:nth-child(7n){border-radius:0;transform:rotate(45deg)}
.pixel[data-layer="far"]{filter:blur(.2px);opacity:.18}
.pixel[data-layer="near"]{box-shadow:0 0 14px rgba(95,189,237,.7),0 0 34px rgba(54,174,232,.28)}

/* pequeños fragmentos en forma de barras / datos */
.data-fragment{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:3px;
  background:linear-gradient(90deg,transparent,rgba(95,189,237,.7),transparent);
  opacity:0;
  animation:dataFall var(--dur) linear var(--delay) infinite;
  box-shadow:0 0 12px rgba(95,189,237,.35);
}

/* Cubos grandes que aparecen lentamente */
.pixel-cluster{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:44px;
  height:44px;
  opacity:.10;
  transform:translate3d(0,0,0) rotate(45deg);
  animation:clusterDrift var(--dur) ease-in-out var(--delay) infinite alternate;
}
.pixel-cluster::before,
.pixel-cluster::after{
  content:"";
  position:absolute;
  width:10px;height:10px;
  background:rgba(95,189,237,.75);
  box-shadow:
    16px 0 rgba(54,174,232,.45),
    0 16px rgba(54,174,232,.35),
    16px 16px rgba(95,189,237,.25),
    32px 16px rgba(54,174,232,.15),
    16px 32px rgba(95,189,237,.13);
}
.pixel-cluster::after{transform:translate(7px,7px);opacity:.25}

@keyframes pixelFloat{
  0%{transform:translate3d(0,55px,0) scale(.72);opacity:0}
  8%{opacity:.62}
  45%{transform:translate3d(var(--drift),-95px,0) scale(1);opacity:.75}
  84%{opacity:.24}
  100%{transform:translate3d(calc(var(--drift) * -.55),-260px,0) scale(.64);opacity:0}
}
@keyframes pixelBlink{
  0%,28%,100%{filter:brightness(.85)}
  29%,34%{filter:brightness(1.85)}
  35%,72%{filter:brightness(1)}
  73%,78%{filter:brightness(1.55)}
}
@keyframes dataFall{
  0%{transform:translate3d(-30px,-60px,0) scaleX(.35);opacity:0}
  8%{opacity:.38}
  55%{opacity:.12}
  100%{transform:translate3d(55px,420px,0) scaleX(1.25);opacity:0}
}
@keyframes clusterDrift{
  from{transform:translate3d(-18px,15px,0) rotate(45deg) scale(.85);opacity:.045}
  to{transform:translate3d(24px,-50px,0) rotate(45deg) scale(1.18);opacity:.16}
}
@keyframes digitalSweep{
  from{transform:translateX(-60%)}
  to{transform:translateX(65%)}
}

/* En tema claro se conserva el efecto, pero muy tenue */
html[data-theme="light"] .pixel-universe{opacity:.28}
html[data-theme="light"] body::before{
  background:
    radial-gradient(circle at 20% 10%, rgba(54,174,232,.13), transparent 30%),
    linear-gradient(180deg,#f4f7fa,#edf4f8);
}

@media (max-width:700px){
  .pixel-universe::before{background-size:30px 30px;opacity:.5}
  .pixel-cluster{display:none}
}

@media (prefers-reduced-motion:reduce){
  .pixel,.data-fragment,.pixel-cluster,.pixel-universe::after{animation:none!important}
  .pixel{opacity:.18}
}

body > header, body > main, body > footer, body > aside{position:relative;}
body > main, body > footer{z-index:1;}
body > header{z-index:60;}
body > aside{z-index:90;}