/* ============================================================================
   strecker.uk — atmósfera y material.

   Deriva del sistema construido para el sitio de Frame Performance Analyzer
   (partículas tipo NebulaField + material tipo Liquid Glass) pero está
   recalculado para este sitio: la base es casi negra en vez de verde oscuro,
   el campo pesa menos, y el verde SOLO vive arriba: es la atmósfera iluminada
   desde la que se leen las partículas, y hacia abajo la oscuridad se impone.

   Este archivo va PRIMERO: es la capa de sistema (tokens + fondo + material).
   styles.css aporta la maquetación.

   Orden de capas:
     -2  .backdrop      campo, cielo, rejilla y canvas de partículas
      0+ contenido, .scan y el header sticky (z-index 20)
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Base: más profunda que el #050505 anterior --- */
  --bg: #030303;
  --panel: #0a0a0a;
  --text: #f3f3f3;
  --muted: #929292;
  --line: #1c1c1c;
  --green: #8dde00;
  --green-base: #76b900;
  --max: 1160px;

  /* --- Marca: los tres verdes del propio logo.svg --- */
  --brand-top: #7dff57;
  --brand-mid: #22e63a;
  --brand-deep: #0aae22;

  /* --- Atmósfera ---
     El verde vive ARRIBA: --sky marca dónde está el foco dentro de la capa de
     luz, y strecker-atmosphere.js repite la misma idea en su constante SKY
     (0.12) para que el brillo del fondo y el peso de las partículas sean la
     misma cosa vista desde dos sitios. De ahí hacia abajo sólo queda oscuridad. */
  --field: #030303;
  --sky: 15%;
  --sky-core: rgba(125, 255, 87, .18);
  --sky-band: rgba(34, 230, 58, .12);
  --sky-spill: rgba(10, 174, 34, .075);

  /* --- Material: el mismo vocabulario que FPA, oscurecido --- */
  --scrim: rgba(5, 8, 6, .44);
  /* El header es la pieza más transparente del sitio y tiene que seguir
     siéndolo: la barra flotante enmarca la atmósfera, no la tapa. El resto de
     superficies conservan su scrim. */
  --bar: rgba(5, 8, 6, .18);
  --island: rgba(255, 255, 255, .060);
  --well: rgba(0, 0, 0, .20);

  /* Borde claro con transición vertical (relación 1 : .63 : .31) */
  --rim-top: rgba(255, 255, 255, .17);
  --rim-mid: rgba(255, 255, 255, .107);
  --rim-low: rgba(255, 255, 255, .053);
  --highlight: .09;
  --hairline: rgba(0, 0, 0, .05);

  --blur-panel: 16px;
  --blur-bar: 12px;
  --blur-control: 18px;

  /* --- Tipografía (se mantiene la del sitio) --- */
  --github-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --ui-font: var(--github-font);
  --body-font: var(--github-font);
}

/* ===========================================================================
   BACKDROP
   ========================================================================= */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--field);
}

/* Rejilla técnica del sitio, dentro del backdrop y apagándose hacia abajo. */
.backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .017) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .42) 54%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .42) 54%, transparent 90%);
}

/* EL CIELO. La capa va anclada al BORDE SUPERIOR del viewport: arriba está la
   atmósfera iluminada y de ahí hacia abajo sólo queda oscuridad. Tres elipses
   concéntricas (núcleo, banda y derrame) más un levantamiento vertical: el foco
   tiene centro pero no tiene borde, y nunca aparece una línea dura ni una pared
   de degradado. Los radios verticales van en vh para que guarde la misma
   proporción en un móvil que en un 4K.
   El verde sale de los dos extremos del gradiente del propio logo: #7DFF57 en
   el núcleo, #22E63A en el derrame. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 54% 18vh at 50% var(--sky), rgba(125, 255, 87, .20), rgba(34, 230, 58, .08) 48%, transparent 76%),
    radial-gradient(ellipse 92% 38vh at 50% 8%, rgba(34, 230, 58, .12), rgba(10, 174, 34, .045) 55%, transparent 82%),
    linear-gradient(180deg,
      rgba(23, 95, 30, .28) 0%,
      rgba(10, 64, 20, .18) 18%,
      rgba(5, 30, 11, .10) 36%,
      rgba(3, 8, 4, .035) 58%,
      rgba(3, 3, 3, 0) 76%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0, 0, 0, .55) 68%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0, 0, 0, .55) 68%, transparent 92%);
}


.backdrop-particles {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ===========================================================================
   MATERIAL
   ========================================================================= */

.glass {
  position: relative;
  border: 1px solid transparent;
  background-image:
    linear-gradient(var(--scrim), var(--scrim)),
    linear-gradient(180deg, var(--rim-top) 0%, var(--rim-mid) 50%, var(--rim-low) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(135%);
  backdrop-filter: blur(var(--blur-panel)) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, var(--highlight)),
    0 1px 2px rgba(0, 0, 0, .38),
    0 12px 30px rgba(0, 0, 0, .30);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.glass > * { position: relative; }

/* ===========================================================================
   HEADER — un carril sticky de altura constante con una cápsula dentro.
   La geometría de la cápsula (y su compactación) vive en styles.css; aquí está
   la posición, el material y los dos estados visuales.
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header-inner {
  isolation: isolate;
}

.site-header-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  background-origin: border-box;
  background-clip: padding-box, padding-box, border-box;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.008)),
    linear-gradient(var(--bar), var(--bar)),
    linear-gradient(180deg,
      rgba(255, 255, 255, .16) 0%,
      rgba(255, 255, 255, .08) 52%,
      rgba(255, 255, 255, .026) 100%);
  -webkit-backdrop-filter: blur(var(--blur-bar)) saturate(150%);
  backdrop-filter: blur(var(--blur-bar)) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(255, 255, 255, .018),
    0 10px 28px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: scale(.985) translateY(-1px);
  transition:
    opacity 140ms linear,
    transform 980ms cubic-bezier(.16, .82, .18, 1),
    box-shadow 220ms ease;
}

/* Arriba sólo queda un filete. Al hacer scroll desaparece mientras el mismo
   header se encoge y materializa el vidrio. */
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent 4%, var(--line) 18%, var(--line) 82%, transparent 96%);
  pointer-events: none;
  opacity: .85;
  transition: opacity 140ms linear, transform 380ms ease;
}

.site-header.is-scrolled .site-header-inner::before { opacity: 1; transform: scale(1) translateY(0); }
.site-header.is-scrolled::after { opacity: 0; transform: scaleX(.94); }

/* ===========================================================================
   BOTONES
   ========================================================================= */

.button,
.project-cta,
.nav-cta {
  --glass-tint: rgba(141, 222, 0, .022);
  --glass-tint-strong: rgba(141, 222, 0, .050);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.00065);
  -webkit-backdrop-filter: blur(.28px) saturate(132%) brightness(1.015);
  backdrop-filter: blur(.28px) saturate(132%) brightness(1.015);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.010),
    0 6px 18px rgba(0,0,0,.058);
  transition:
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    transform .22s ease,
    backdrop-filter .22s ease,
    -webkit-backdrop-filter .22s ease;
}

/* Único aro refractivo: más físico y elegante, sin doble anillo. */
.button::before,
.project-cta::before,
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.85px;
  border-radius: inherit;
  pointer-events: none;
  box-sizing: border-box;
  background:
    radial-gradient(92px 48px at var(--lens-x, 50%) var(--lens-y, 18%), rgba(255,255,255,.72), rgba(255,255,255,.16) 32%, transparent 66%),
    conic-gradient(from 212deg at 50% 50%,
      rgba(255,255,255,.12),
      rgba(255,255,255,.68) 11%,
      rgba(214,255,220,.18) 20%,
      rgba(255,255,255,.05) 36%,
      rgba(255,255,255,.30) 51%,
      rgba(255,255,255,.08) 67%,
      rgba(214,255,220,.13) 80%,
      rgba(255,255,255,.58) 91%,
      rgba(255,255,255,.12));
  -webkit-backdrop-filter: blur(5.4px) saturate(205%) brightness(1.06) contrast(1.07);
  backdrop-filter: blur(5.4px) saturate(205%) brightness(1.06) contrast(1.07);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .88;
  filter: blur(.06px);
  transition: opacity .22s ease, filter .22s ease, backdrop-filter .22s ease, -webkit-backdrop-filter .22s ease;
}

/* Brillo interno suave, sin formar un segundo aro visible. */
.button::after,
.project-cta::after,
.nav-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 0%, rgba(255,255,255,.085) 0%, rgba(255,255,255,.022) 22%, rgba(255,255,255,0) 48%),
    radial-gradient(110% 120% at 50% 115%, var(--glass-tint-strong) 0%, var(--glass-tint) 20%, transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0) 34%);
  opacity: .30;
  mix-blend-mode: screen;
  transition: opacity .22s ease;
}
.button,
.nav-cta {
  border-radius: 999px;
}

.button.primary,
.project-cta {
  --glass-tint: rgba(141, 222, 0, .020);
  --glass-tint-strong: rgba(141, 222, 0, .042);
  color: #edf9ea;
}

.button.secondary,
.nav-cta {
  --glass-tint: rgba(255,255,255,.010);
  --glass-tint-strong: rgba(255,255,255,.022);
  color: rgba(243, 247, 243, .96);
}

.button:hover,
.project-cta:hover,
.nav-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.0009);
  -webkit-backdrop-filter: blur(.34px) saturate(138%) brightness(1.022);
  backdrop-filter: blur(.34px) saturate(138%) brightness(1.022);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,255,255,.012),
    0 9px 20px rgba(0,0,0,.065);
}

.button:hover::before,
.project-cta:hover::before,
.nav-cta:hover::before {
  opacity: .96;
  filter: blur(.04px) brightness(1.08);
  -webkit-backdrop-filter: blur(6.2px) saturate(220%) brightness(1.08) contrast(1.08);
  backdrop-filter: blur(6.2px) saturate(220%) brightness(1.08) contrast(1.08);
}

.button:hover::after,
.project-cta:hover::after,
.nav-cta:hover::after {
  opacity: .38;
}

.button:active,
.project-cta:active,
.nav-cta:active {
  transform: translateY(0);
  -webkit-backdrop-filter: blur(.22px) saturate(128%) brightness(1.01);
  backdrop-filter: blur(.22px) saturate(128%) brightness(1.01);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 1px 2px rgba(0,0,0,.06);
  transition-duration: .14s;
}

.project-cta {
  border-radius: 12px;
}

.nav-cta {
  min-width: 92px;
  justify-content: center;
}

/* ===========================================================================
   SUPERFICIES DEL SITIO
   ========================================================================= */

.project-card {
  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, padding-box, border-box;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,0)),
    linear-gradient(rgba(5, 8, 6, .46), rgba(5, 8, 6, .46)),
    linear-gradient(180deg, rgba(255,255,255,.19) 0%, rgba(255,255,255,.075) 48%, rgba(255,255,255,.025) 100%);
  -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(140%);
  backdrop-filter: blur(var(--blur-panel)) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.015),
    0 18px 48px rgba(0,0,0,.30);
}

.interest-grid {
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)), rgba(5, 8, 6, .28);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(255,255,255,.018);
}

/* ===========================================================================
   FOCO
   ========================================================================= */

.button:focus-visible,
.project-cta:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* ===========================================================================
   RESPONSIVE — menos blur donde es caro, más scrim donde hace falta leer.
   ========================================================================= */

@media (max-width: 820px) {
  :root {
    --blur-panel: 10px;
    --blur-bar: 9px;
    --blur-control: 12px;
  }
}

@media (max-width: 520px) {
  :root {
    --blur-panel: 0px;
    --blur-bar: 8px;
    --blur-control: 10px;
    --scrim: rgba(6, 7, 6, .80);
    /* En pantalla pequeña hay menos blur que compensar: el vidrio tiene que
       volver a apoyarse en el scrim para no perder legibilidad. */
    --bar: rgba(5, 8, 6, .26);
  }
  .project-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ===========================================================================
   MOVIMIENTO REDUCIDO — el campo queda colocado y quieto; sin transiciones
   decorativas. styles.css ya apaga además .scan y las animaciones.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .button,
  .project-cta,
  .nav-cta { transition: none; }
  .button::before,
  .button::after,
  .project-cta::before,
  .project-cta::after,
  .nav-cta::before,
  .nav-cta::after { transition: none; }
  /* El cambio de estado del header es funcional, no decorativo: se aplica al
     instante en lugar de animarse. */
  .site-header,
  .site-header-inner,
  .site-header-inner::before,
  .nav { transition: none; }
}

/* ===========================================================================
   FALLBACK sin backdrop-filter: superficies oscuras y opacas.
   ========================================================================= */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --scrim: rgba(6, 7, 6, .94);
    --bar: rgba(6, 7, 6, .95);
    --island: rgba(255, 255, 255, .09);
  }
  .glass,
  .button,
  .project-cta,
  .nav-cta,
  .project-card,
  .interest-grid,
  .site-header-inner::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .button, .project-cta, .nav-cta { background: rgba(8, 12, 9, .72); }
}