/* ====== Base ====== */
:root{
  --bg:#0f0f0f; 
  --matrix:#e0e0e0;
  --matrix-dim:#8a8a8a;
  --text:#f2f2f2;
  --glow:0 0 12px #ffffff, 0 0 28px #bdbdbd88, 0 0 48px #7a7a7a55;
}

*{box-sizing:border-box}
html,body{height:100%;}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow:hidden;
}

/* ====== Canvas full-screen ====== */
#matrix{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  display:block;
  background:radial-gradient(1200px 800px at 70% 30%, #073c2a22, transparent 60%);
}

.branding{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.20em;
  filter: drop-shadow(0 4px 24px #00ff8833);
}

/* ====== Overlay content ====== */
.overlay{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none; /* evita bloquear clics a nada, excepto redes */
  padding: clamp(16px, 2vw, 40px);
}

@keyframes pulse{
  0%,100%{transform:scale(1); filter:brightness(1)}
  50%{transform:scale(1.08); filter:brightness(1.2)}
}

h1#loading{
  margin:0 0 .4rem;
  font-size: clamp(60px, 10vw, 150px);
  font-weight:400;
  color:var(--text);
  text-shadow: var(--glow);
  letter-spacing:.30em;
  white-space:nowrap;
  animation: flicker 3.4s infinite steps(60);
  position: relative;
  /* sutil efecto CRT */
  --scan: linear-gradient(transparent 0%, transparent 48%, #ffffff22 50%, transparent 52%, transparent 100%);
  background-image: var(--scan);
  background-size: 100% 8px;
  -webkit-background-clip: text;
  background-clip: text;
}

.brand{
  margin:0;
  opacity:.8;
  font-size: clamp(12px, 1.6vw, 16px);
  letter-spacing:.28em;
}

/* Flicker/scanline estilo CRT*/
@keyframes flicker{
  0%{opacity:.92; text-shadow: var(--glow)}
  8%{opacity:1}
  16%{opacity:.9}
  32%{opacity:.95}
  50%{opacity:1}
  65%{opacity:.88}
  82%{opacity:.98}
  100%{opacity:.92}
}

/* ====== Redes ====== */
.social{
  position:fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  display:flex;
  gap:12px;
  pointer-events:auto; /* habilita clics */
}

.icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  border:1px solid #2e2e2e;
  border-radius:12px;
  background:linear-gradient(145deg,#1a1a1a,#0f0f0f);
  box-shadow: inset 0 0 14px #90909055;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}

.icon:hover{ 
  transform: translateY(-2px) scale(1.02);
  border-color:#cfcfcf;
  box-shadow: var(--glow);
}

.icon svg{
  width:22px;height:22px;
  fill:var(--matrix);
  filter: drop-shadow(0 0 6px #d0d0d0cc);
}

/* ====== Accesibilidad ======*/
@media (prefers-reduced-motion: reduce){
  .logo-dot, h1#loading{ animation:none }
}