/* ============================================
   BASE.CSS — Variables, reset, tipografía,
              fondo GIF, estilo retro-tech
   ============================================ */

/* ─── FUENTES LOCALES: NOW ─── */

@font-face {
  font-family: 'Now';
  src: url('../assets/fonts/Now-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Now';
  src: url('../assets/fonts/Now-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ─── FUENTES GOOGLE: SILKSCREEN + OUTFIT (fallback) ─── */
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Outfit:wght@500;900&display=swap');

/* ─── VARIABLES ─── */
:root {
  /* Paleta del vision board */
  --red:        #831a31;
  --red-hover:  #a82040;
  --black:      #393131;
  --black-deep: #1e1a1a;
  --white:      #dfdfdf;
  --blue:       #9ca0ab;

  /* Superficies */
  --surface:    rgba(57, 49, 49, 0.88);
  --glass:      rgba(223, 223, 223, 0.03);
  --border:     rgba(131, 26, 49, 0.5);
  --border-dim: rgba(131, 26, 49, 0.18);
  --scanline:   rgba(0, 0, 0, 0.15);

  /* Tipografías:
     Now (local) con Outfit como fallback de Google.
     Silkscreen para números, códigos, labels extra. */
  --font-display: 'Now', 'Outfit', sans-serif;
  --font-mono:    'Silkscreen', 'Courier New', monospace;
}

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

html, body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--black-deep);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 500;
}

/* ─── FONDO GIF ─── */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('../assets/gif cv.gif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Capa oscura para legibilidad */
.bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(30, 26, 26, 0.18) 0%,
    rgba(20, 17, 17, 0.14) 50%,
    rgba(30, 26, 26, 0.22) 100%
  );
}

/* Scanlines CRT encima del GIF */
.bg-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    var(--scanline) 0px,
    var(--scanline) 1px,
    transparent    1px,
    transparent    3px
  );
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar        { width: 3px; }
::-webkit-scrollbar-track  { background: var(--black-deep); }
::-webkit-scrollbar-thumb  { background: var(--red); border-radius: 0; }
*                          { scrollbar-width: thin; scrollbar-color: var(--red) var(--black-deep); }

/* ─── SELECCIÓN DE TEXTO ─── */
::selection { background: var(--red); color: var(--white); }

/* ─── ANIMACIONES ─── */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bubblePop {
  0%   { transform: scale(0.06) translateY(120px); opacity: 0; }
  65%  { transform: scale(1.03) translateY(-3px);  opacity: 1; }
  100% { transform: scale(1)    translateY(0);     opacity: 1; }
}
@keyframes skillGrow {
  from { width: 0; }
  to   { width: var(--pct); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes starSpin {
  from { transform: rotate(0deg) scale(1);   }
  50%  { transform: rotate(180deg) scale(1.1); }
  to   { transform: rotate(360deg) scale(1);  }
}
@keyframes scanMove {
  from { background-position: 0 0; }
  to   { background-position: 0 100%; }
}