/* ===== Colores de la intro (cámbialos aquí) ===== */
:root {
  --intro-bg: #000;     /* fondo   → #fff para blanco */
  --intro-text: #fff;   /* texto   → #000 para negro  */
}

/* ===== General ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #fff;
  cursor: none;                 /* el cursor es el reloj de arena */
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: 'Pixelify Sans', monospace;
}

/* ===== Intro ===== */
#intro {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: var(--intro-bg);
}

#intro h1 {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  font-size: clamp(4.4rem, 12vw, 9rem);
  letter-spacing: .08em;
  color: var(--intro-text);
  user-select: none;
}

/* ===== Web que sube desde abajo ===== */
#site {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #06060c;
  transform: translateY(100%);
  transition: transform 1.2s cubic-bezier(.77, 0, .18, 1);
}

.entered #site {
  transform: translateY(0);
}

/* ===== Video de fondo: monocromo y pixelado ===== */
#bg {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;                   /* el original se oculta, se dibuja en #bgfx */
}

#bgfx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: grayscale(1) contrast(1.15) brightness(.85);
}

.scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #0000 0 2px, #0002 2px 3px);
}

/* ===== Tarjetas ===== */
.stack {
  --s: 1.5;                     /* escala de la card: 1 = original, 2 = doble */
  position: relative;
  z-index: 1;
  width: min(calc(440px * var(--s)), 94vw);
  display: flex;
  flex-direction: column;
  gap: calc(14px * var(--s));
  transform-style: preserve-3d;
  transition: transform .15s ease-out;
}

.card {
  position: relative;
  padding: calc(28px * var(--s));
  border-radius: calc(18px * var(--s));
  text-align: center;
  background: #0009;
  backdrop-filter: blur(14px);
  border: 1px solid #fff2;
  box-shadow: 0 0 40px #fff1;
}

/* Brillo que sigue al mouse */
main.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(250px circle at var(--mx, 50%) var(--my, 50%), #fff2, transparent 60%);
}

h2 {
  font-size: calc(1.6rem * var(--s));
  font-weight: 600;
  margin-bottom: calc(18px * var(--s));
  text-shadow: 0 0 12px #fff8;
}

.avatar {
  display: block;
  margin: 0 auto;
  width: calc(120px * var(--s) * 1.5);   /* x2 de la card y x1,5 extra */
  height: calc(120px * var(--s) * 1.5);
  border-radius: 50%;
  background: #000;
  object-fit: contain;
  padding: calc(10px * var(--s) * 1.5);
  border: 3px solid #fff4;
  box-shadow: 0 0 20px #7fff9f55;
}

.loc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6px * var(--s));
  margin-top: calc(16px * var(--s));
  font-size: calc(.9rem * var(--s));
  opacity: .85;
}

.loc svg { width: 1em; height: 1em; }

/* Frase con letras separadas */
.spaced {
  white-space: pre;             /* respeta los espacios tal cual */
  margin-top: calc(10px * var(--s));
  min-height: 1.3em;
  font-size: min(calc(.8rem * var(--s)), 2.8vw);
  opacity: .7;
}

#typed::after {
  content: "|";
  animation: blink 1s infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ===== Reproductor ===== */
/* Todo en una línea: play · fecha · 0:00 ──── 0:00 */
.player {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--s));
  padding: calc(16px * var(--s)) calc(22px * var(--s));
  font-size: calc(.7rem * var(--s));
}

.player button {
  background: none;
  border: 0;
  font-family: inherit;
  font-size: calc(1.1rem * var(--s));
  margin-right: calc(14px * var(--s));   /* doble espacio después del play */
}

.title {
  font-size: calc(.85rem * var(--s));
  white-space: nowrap;
  margin-right: calc(6px * var(--s));
}

#cur, #dur { opacity: .8; }

.player input {
  flex: 1;
  accent-color: #fff;
}

/* ===== Partículas del mouse ===== */
#c {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: blur(0.7px) saturate(1.35);
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  background: radial-gradient(circle, transparent 85%, rgba(0, 0, 0, 0.55) 100%);
}

/* ===== Cursor reloj de arena pixelado ===== */
#hg {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: 44px;                  /* tamaño: 11px de arte x4 */
  height: 64px;
  margin: -32px 0 0 -22px;      /* centra el reloj en la punta del mouse */
  pointer-events: none;
  opacity: 0;
}

#hg.on { opacity: 1; }

/* ===== Cursor flechas (SizeAll) después del click ===== */
#sa {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;      /* centrado en la punta del mouse */
  pointer-events: none;
  opacity: 0;
  display: none;
}

#sa.on { opacity: 1; }
#sa svg { width: 100%; height: 100%; display: block; }

/* Cambio de cursor al entrar */
.entered #hg { display: none; }
.entered #sa { display: block; }

/* ===== Versión celular ===== */
@media (max-width: 600px) {
  /* Título de la intro en dos líneas */
  #intro h1 {
    font-size: 14vw;
    line-height: 1.05;
    text-align: center;
    letter-spacing: .04em;
    padding: 0 16px;
  }

  .stack {
    --s: 1;
    width: calc(100vw - 32px);
  }

  .card { padding: 24px 18px; }

  .avatar {
    width: 150px;
    height: 150px;
    padding: 12px;
  }

  .spaced { font-size: 2.5vw; }

  /* Reproductor: play a la izquierda, fecha arriba, barra abajo */
  .player {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "play title title title"
      "play cur  bar   dur";
    column-gap: 8px;
    row-gap: 6px;
    padding: 14px 16px;
  }

  .player button { grid-area: play; margin-right: 6px; font-size: 1.4rem; }
  .title { grid-area: title; margin: 0; }
  #cur { grid-area: cur; }
  #bar { grid-area: bar; width: 100%; min-width: 0; }
  #dur { grid-area: dur; }
}

/* ===== Pantallas táctiles (sin mouse) ===== */
@media (hover: none) {
  /* Sin el recuadro azul al tocar ni selección de texto al mantener apretado */
  * {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* Pantalla fija: el dedo no scrollea ni hace zoom, solo dibuja destellos */
  html, body, #site {
    touch-action: none;
    overscroll-behavior: none;
  }

  .stack { transform: none !important; }   /* sin inclinación 3D */
  #sa { display: none !important; }        /* sin cursor de flechas */

  /* El reloj de arena queda fijo debajo del título, como "cargando" */
  #hg {
    left: 50%;
    top: auto;
    bottom: 18vh;
    margin: 0 0 0 -22px;
    transform: none !important;
    opacity: 1;
  }
}

/* ===== Celular: título + reloj como un solo bloque centrado ===== */
@media (max-width: 600px) and (hover: none) {
  :root {
    --gap: 55px;   /* distancia entre el título y el reloj */
    --up: 4vh;     /* cuánto sube el bloque respecto del centro */
  }

  #intro h1 {
    transform: translateY(calc(-1 * var(--up) - (var(--gap) + 64px) / 2));
  }

  #hg {
    bottom: auto;
    top: calc(50% - var(--up) + 14.7vw - (var(--gap) + 64px) / 2 + var(--gap));
  }
}

#hgc {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  /* contorno negro de 1px para que se vea sobre fondos claros */
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000)
          drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
}