/* Pure-CSS HUD background demo */
:root{
  --bg:#0a0f16;          /* base background */
  --text:#d6f0ff;        /* text color */
  --accent:#00e0ff;      /* cyan */
  --accent-soft:rgba(0,224,255,.12);
}

html,body{
  height:100%;
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: "Titillium Web", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
}

/* full-viewport demo wrapper */
.viewport{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden;
}

/* Layer 1: subtle moving grid (no JS) */
.hud-grid{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
}
.hud-grid::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(90deg, var(--accent-soft) 1px, transparent 1px),
    linear-gradient(0deg,  var(--accent-soft) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  animation: gridMove 18s linear infinite;
}
@keyframes gridMove{ 0%{ transform: translate(0,0);} 100%{ transform: translate(40px,40px);} }

/* Layer 2: scan bar sweeping across */
.hud-scan{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
}
.hud-scan::before{
  content:""; position:absolute; left:-60%; top:0; bottom:0; width:60%;
  background: linear-gradient(90deg, transparent, rgba(0,224,255,.28), transparent);
  filter: blur(.4px);
  animation: scanH 3.2s ease-in-out infinite;
}
@keyframes scanH{ 0%{ left:-60%; } 100%{ left:100%; } }

/* Layer 3: diagonal flowing lines */
.hud-diag{
  position:fixed; inset:0; pointer-events:none; z-index:-2;
  background: repeating-linear-gradient(45deg, rgba(0,224,255,.06) 0 10px, transparent 10px 20px);
  animation: diagMove 14s linear infinite;
}
@keyframes diagMove{ 0%{ background-position:0 0;} 100%{ background-position:240px 240px;} }

/* Optional: corner reticle frame */
.reticle{ position:fixed; width:44px; height:44px; border:2px solid rgba(0,224,255,.6); z-index:1; }
.reticle.tl{ top:18px; left:18px; border-right:none; border-bottom:none; box-shadow:-2px -2px 10px rgba(0,224,255,.3); }
.reticle.tr{ top:18px; right:18px; border-left:none; border-bottom:none; box-shadow: 2px -2px 10px rgba(0,224,255,.3); }
.reticle.bl{ bottom:18px; left:18px; border-right:none; border-top:none; box-shadow:-2px  2px 10px rgba(0,224,255,.3); }
.reticle.br{ bottom:18px; right:18px; border-left:none; border-top:none; box-shadow: 2px  2px 10px rgba(0,224,255,.3); }

/* Demo card with same HUD bg effect (no JS) */
.hud-sci-fi-bg{
  position:relative; overflow:hidden; border:1px solid rgba(0,224,255,.3); border-radius:14px;
  background: linear-gradient(135deg, #000a1ef2 0%, #00050ffa 100%),
              radial-gradient(at 20% 20%, rgba(0,162,255,.1) 0%, transparent 50%),
              radial-gradient(at 80% 80%, rgba(0,255,162,.1) 0%, transparent 50%);
  box-shadow: 0 0 20px rgba(0,162,255,.2), inset 0 0 20px rgba(0,162,255,.08);
}
.hud-sci-fi-bg::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image: linear-gradient(90deg, rgba(0,162,255,.1) 1px, transparent 1px),
                    linear-gradient(0deg,  rgba(0,162,255,.1) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: gridMove 20s linear infinite;
}
.hud-sci-fi-bg::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background: linear-gradient(90deg, transparent, rgba(0,162,255,.22), transparent);
  transform: translateX(-100%);
  animation: scanH 3s ease-in-out infinite;
}

.content{
  position:relative; z-index:3; text-align:center; padding:28px; max-width:800px;
}
.title{ font-family: Orbitron, system-ui; font-size:28px; letter-spacing:.04em; margin:0 0 8px 0; }
.subtitle{ color:#8aa3b7; margin:0 0 12px 0; }
.cta{ display:inline-block; padding:10px 14px; margin:8px; border:1px solid rgba(0,224,255,.3); color:var(--text); text-decoration:none; border-radius:10px; }
.cta:hover{ color:var(--accent); border-color:var(--accent); box-shadow:0 0 12px rgba(0,224,255,.18); }