/* site.css — capa SITE-LEVEL (course-less): fuentes self-hosted, reset base y
   páginas soft (404/410/502). El CSS de cada curso vive en
   /assets/courses/<code>/ y se carga ADEMÁS de este. Sin estilos inline (CSP). */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: "Share Tech Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/share-tech-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  background: #000; overflow: hidden;
  font-family: "Share Tech Mono", ui-monospace, monospace;
}

/* ===== páginas soft (404 / 410 / error) — sin estilos inline (CSP estricta) =====
   Estética terminal/glitch: mismo lenguaje visual que la intro del attack-graph
   (grid roja + scanlines + RGB-split), pero autocontenido acá (site-level, jamás
   carga CSS de curso). Keyframes prefijados ag-soft- para no colisionar con
   graph.css cuando ambos convivan. */
.ag-soft {
  position: relative; overflow: hidden;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  color: #e6e6ea; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 26px; padding: 24px;
  background: radial-gradient(ellipse 80% 70% at 50% 44%, #0c0512, #040207 68%, #000);
}
/* rejilla ambiente + scanlines CRT */
.ag-soft::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,0,51,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,51,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 46%, #000 20%, transparent 82%);
  mask-image: radial-gradient(ellipse 65% 60% at 50% 46%, #000 20%, transparent 82%);
}
.ag-soft::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.4) 0, rgba(0,0,0,.4) 1px, transparent 1px, transparent 3px);
}
.ag-soft > * { position: relative; z-index: 1; }

/* kicker [ ERR_404 :: NOT_FOUND ] */
.ag-soft-tag {
  margin: 0; font-size: 13px; letter-spacing: .28em; color: #ff6b81;
  border: 1px solid rgba(255,0,51,.45); border-radius: 6px; padding: 8px 16px;
  text-shadow: 0 0 10px rgba(255,0,51,.5);
  animation: ag-soft-fade-up .5s ease .1s both;
}

/* título con glitch RGB-split (data-text + attr(), CSP-friendly) */
.ag-soft-glitch {
  position: relative; margin: 0; max-width: 100%;
  font-family: "JetBrains Mono", monospace; font-weight: 700;
  font-size: clamp(1.8rem, 7.5vw, 60px); line-height: 1.05;
  letter-spacing: .03em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 24px rgba(255,0,51,.85), 0 0 58px rgba(255,0,51,.4);
  animation: ag-soft-glitch-in .6s ease .25s both;
}
.ag-soft-glitch::before, .ag-soft-glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0;
  width: 100%; pointer-events: none; opacity: 0;
}
.ag-soft-glitch::before { color: #ff0033; animation: ag-soft-glitch-a 2.8s steps(1) 1s infinite; }
.ag-soft-glitch::after { color: #23e0ff; animation: ag-soft-glitch-b 2.8s steps(1) 1s infinite; }

/* cuerpo estilo prompt: "> mensaje" + cursor parpadeante */
.ag-soft-body {
  margin: 0; color: #9a9aa6; max-width: 52ch; line-height: 1.6;
  font-size: 16px; letter-spacing: .04em;
  animation: ag-soft-fade-up .5s ease .5s both;
}
.ag-soft-body::before { content: "> "; color: #ff3b57; text-shadow: 0 0 8px rgba(255,0,51,.6); }
.ag-soft-body::after {
  content: ""; display: inline-block; width: .55em; height: 1em;
  margin-left: .35em; vertical-align: text-bottom; background: #ff3b57;
  box-shadow: 0 0 8px rgba(255,0,51,.8);
  animation: ag-soft-blink 1.1s steps(1) infinite;
}

/* CTA neón rojo sangre (paleta única del sitio: cero verde en las soft pages) */
.ag-soft-cta {
  color: #ff3b57; border: 1px solid rgba(255,0,51,.6); padding: 13px 26px;
  text-decoration: none; border-radius: 6px; letter-spacing: .14em;
  text-shadow: 0 0 10px rgba(255,0,51,.5);
  box-shadow: 0 0 18px rgba(255,0,51,.15), inset 0 0 14px rgba(255,0,51,.06);
  transition: background .2s, border-color .2s, box-shadow .2s;
  animation: ag-soft-fade-up .5s ease .75s both;
}
.ag-soft-cta:hover {
  background: rgba(255,0,51,.12); border-color: #ff3b57;
  box-shadow: 0 0 28px rgba(255,0,51,.35), inset 0 0 14px rgba(255,0,51,.1);
}

@keyframes ag-soft-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ag-soft-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes ag-soft-glitch-in {
  0% { opacity: 0; transform: translateY(12px) skewX(-10deg); filter: blur(4px); }
  45% { opacity: 1; filter: blur(0); }
  55% { transform: translate(-4px) skewX(6deg); }
  70% { transform: translate(3px); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes ag-soft-glitch-a {
  0%, 92%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  93% { opacity: .8; transform: translate(-3px, -1px); clip-path: inset(12% 0 58% 0); }
  96% { opacity: .8; transform: translate(2px, 1px); clip-path: inset(62% 0 8% 0); }
}
@keyframes ag-soft-glitch-b {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  91% { opacity: .7; transform: translate(3px, 1px); clip-path: inset(40% 0 30% 0); }
  95% { opacity: .7; transform: translate(-2px, -1px); clip-path: inset(6% 0 66% 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ag-soft-tag, .ag-soft-glitch, .ag-soft-body, .ag-soft-cta { animation: none; opacity: 1; }
  .ag-soft-glitch::before, .ag-soft-glitch::after { animation: none; opacity: 0; }
  .ag-soft-body::after { animation: none; }
}