:root{
  --bg:#07090d;
  --panel:#0c1018;
  --panel2:#0a0e15;
  --text:#e6eefc;
  --muted:#8ea0bb;
  --line:#1a2233;
  --glow: 0 0 24px rgba(90,140,255,.15);

  --radius:16px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Accenti rosso/nero (NUOVI) */
  --red:#ff1535;
  --red2:#b3001b;
  --redDim: rgba(255,21,53,.12);
  --redMid: rgba(255,21,53,.22);
  --redHot: rgba(255,21,53,.40);

  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --ring: 0 0 0 1px rgba(255,21,53,.35), 0 0 24px rgba(255,21,53,.18);
  --ringSoft: 0 0 0 1px rgba(255,21,53,.22), 0 0 16px rgba(255,21,53,.10);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family: var(--mono);
  background: var(--bg);
  overflow-x: hidden;
}

/* LAYER: glow rosso animato + vignette */
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(900px 520px at 48% 28%, rgba(255,21,53,.18), transparent 62%),
    radial-gradient(700px 420px at 72% 68%, rgba(255,21,53,.10), transparent 60%),
    radial-gradient(900px 620px at 18% 78%, rgba(255,21,53,.08), transparent 60%),
    radial-gradient(1200px 800px at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.90));
  filter: saturate(1.1);
  opacity:.95;
  animation: redPulse 6.5s ease-in-out infinite;
}

/* LAYER: scanlines + flicker leggero */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.03),
      rgba(255,255,255,0) 22%,
      rgba(0,0,0,.35) 50%,
      rgba(255,255,255,0) 78%,
      rgba(0,0,0,.25)
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.00) 0px,
      rgba(0,0,0,.00) 2px,
      rgba(0,0,0,.12) 3px
    );
  mix-blend-mode: overlay;
  opacity:.18;
  animation: flicker 9s linear infinite;
}

.bg-noise{
  position:fixed; inset:0;
  pointer-events:none;
  z-index: 0;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: noiseDrift 7.5s steps(2,end) infinite;
}

.muted{ color:var(--muted); }

kbd{
  padding:.15rem .35rem;
  border:1px solid rgba(255,21,53,.22);
  border-bottom-color: rgba(0,0,0,.55);
  border-radius:10px;
  background: rgba(10,14,21,.88);
  color: var(--text);
  font-size: .85em;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}

@keyframes redPulse{
  0%   { opacity:.85; transform: translate3d(0,0,0) scale(1); }
  30%  { opacity:1;   transform: translate3d(0,-0.4%,0) scale(1.01); }
  60%  { opacity:.92; transform: translate3d(0,0.2%,0) scale(1.015); }
  100% { opacity:.85; transform: translate3d(0,0,0) scale(1); }
}

@keyframes flicker{
  0%,100% { opacity:.18; }
  7%      { opacity:.14; }
  9%      { opacity:.22; }
  27%     { opacity:.16; }
  31%     { opacity:.24; }
  66%     { opacity:.15; }
  71%     { opacity:.21; }
}

@keyframes noiseDrift{
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(-1%, 0.5%,0); }
  50%  { transform: translate3d(0.8%, -0.6%,0); }
  75%  { transform: translate3d(-0.6%, -0.2%,0); }
  100% { transform: translate3d(0,0,0); }
}

/* Accessibilità: riduci animazioni */
@media (prefers-reduced-motion: reduce){
  body::before, body::after, .bg-noise { animation: none !important; }
  * { scroll-behavior:auto !important; }
}
