/* base.css — Variables CSS, reset, fondo de cuadrícula y animaciones globales
   Autor: Borja Iturregui — borjaiturregui.github.io */

:root {
  --black:   #000000;
  --card:    #161616;
  --border:  #1e1e1e;
  --red:     #7B1A2E;
  --red-hi:  #B22948;
  --red-dim: rgba(123, 26, 46, 0.18);
  --white:   #ffffff;
  --muted:   #a0a0a0;
  --dim:     #666666;
  --green:   #3fb950;
  --mono:    'Share Tech Mono', monospace;
  --display: 'Syne', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--mono);
  overflow-x: hidden;
  cursor: crosshair;
}

body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px);
  pointer-events: none; z-index: 100;
}

.hidden { display: none !important; }

.grid-bg {
  position: fixed; inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.35; z-index: 0; pointer-events: none;
}

/* ── KEYFRAMES ── */
@keyframes fadeup { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blink  { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pulse  { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── ANIMACIONES DE ENTRADA ── */
.fade-in  { animation: fadeup 0.8s ease both; }
.delay-1  { animation-delay: 0.10s; }
.delay-2  { animation-delay: 0.20s; }
.delay-3  { animation-delay: 0.35s; }
.delay-4  { animation-delay: 0.50s; }

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }