/* VIVO — Experimento 001 — Todo vivo */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');

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

:root {
  --font: 'Plus Jakarta Sans', sans-serif;
  --bg:  #000000;
  --fg:  #ffffff;
  --fg2: rgba(255,255,255,0.4);
  --red: #e51b4b;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
}

#vivo {
  position: fixed;
  inset: 0;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  overflow: hidden;
  transition: color 1.2s ease;
  cursor: none;
}

/* ── CANVAS ────────────────────────────────────────────────────────────────── */
#breath {
  position: absolute;
  inset: 0;
  pointer-events: none; /* mouse handled on document */
  z-index: 1;
}

/* ── INTRO TEXTS ───────────────────────────────────────────────────────────── */
#intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

#intro .intro-line {
  font-size: clamp(1.5rem, 3.5vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--fg);
  opacity: 0;
  text-align: center;
  max-width: 700px;
  padding: 0 2rem;
  will-change: opacity, transform;
  line-height: 1.2;
}

/* ── CHARACTER SPRINGS ─────────────────────────────────────────────────────── */
.vivo-word {
  display: inline-block;
  white-space: nowrap; /* evita que el browser parta palabras a mitad */
}
.vivo-word-sep {
  display: inline;
}
.vivo-char {
  display: inline-block;
  will-change: transform;
  /* NO transition — JS controls directly */
}

/* ── INPUT PHASE ───────────────────────────────────────────────────────────── */
#phase-input {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
}

#phase-input.active { pointer-events: all; }

/* ── INPUT MODES (voz primero / escribir secundario) ──────────────────────── */
.input-mode {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.input-mode.active { display: flex; }

/* ── VOICE-FIRST VIEW ──────────────────────────────────────────────────────── */
#voice-hint {
  font-size: clamp(0.72rem, 1.6vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg2);
  margin-bottom: 2.5rem;
  text-align: center;
  transition: opacity 0.3s ease;
}

#voice-transcript {
  font-size: clamp(1.4rem, 4vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--fg);
  text-align: center;
  max-width: 800px;
  min-height: 1.4em;
  margin-bottom: 1.5rem;
}

#voice-main-btn, #second-mic-btn {
  background: transparent;
  border: 1px solid var(--fg2);
  border-radius: 50%;
  width: 128px;
  height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--fg);
  cursor: none;
  transition: border-color 0.2s, background 0.2s;
}

#voice-main-btn:hover, #second-mic-btn:hover { border-color: var(--fg); }

.voice-btn-label {
  font-family: var(--font);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  max-width: 90px;
  line-height: 1.3;
}

#voice-main-btn.active, #second-mic-btn.active {
  background: var(--red);
  border-color: var(--red);
  animation: vivo-pulse 1.6s ease-in-out infinite;
}

@keyframes vivo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,27,75,0.35); }
  50%      { box-shadow: 0 0 0 16px rgba(229,27,75,0); }
}

#voice-state-label, #second-state-label {
  font-family: var(--font);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg2);
  margin-top: 1.4rem;
}

#prefer-write, #second-prefer-write {
  background: transparent;
  border: none;
  color: var(--fg2);
  font-family: var(--font);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: none;
  transition: color 0.2s;
  margin-top: 1.6rem;
}
#prefer-write:hover, #second-prefer-write:hover { color: var(--fg); }

#input-hint {
  font-size: clamp(0.72rem, 1.6vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg2);
  margin-bottom: 2.5rem;
  text-align: center;
}

#main-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--fg2);
  color: var(--fg);
  font-family: var(--font);
  font-size: clamp(1.4rem, 4vw, 3.2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.25;
  width: 100%;
  max-width: 800px;
  text-align: center;
  resize: none;
  outline: none;
  padding: 0.5rem 0 1rem;
  overflow: hidden;
  cursor: none;
  caret-color: var(--red);
  transition: border-color 0.3s ease;
}

#main-input::placeholder { color: var(--fg2); }
#main-input:focus { border-bottom-color: var(--fg); }

#input-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  opacity: 0.5;
}

#mic-btn {
  background: transparent;
  border: 1px solid var(--fg2);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: none;
  transition: border-color 0.2s, background 0.2s;
  color: var(--fg);
}

#mic-btn:hover { border-color: var(--fg); }
#mic-btn.active { background: var(--red); border-color: var(--red); }

#input-enter {
  font-family: var(--font);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg2);
}

/* ── WORDS PHASE ───────────────────────────────────────────────────────────── */
#phase-words {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 15;
  pointer-events: none;
}

#words-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  max-width: 90vw;
  will-change: transform;
}

.word-item {
  font-family: var(--font);
  font-size: clamp(0.9rem, 2.5vw, 1.4rem);
  font-weight: 300;
  color: var(--fg);
  opacity: 0;
  display: inline-block;
  will-change: transform, opacity;
  transform-origin: center center;
  white-space: nowrap;
}

#reveal-word {
  position: absolute;
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0;
  text-align: center;
  line-height: 1;
  pointer-events: none;
}

/* ── INTERPRETATION PHASE ──────────────────────────────────────────────────── */
#phase-interp {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  z-index: 20;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
}

#phase-interp.active { pointer-events: all; }

.interp-line {
  font-size: clamp(1.15rem, 2.6vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fg);
  text-align: center;
  line-height: 1.3;
  opacity: 0;
  max-width: 900px;
  transition: font-size 0.6s ease, opacity 0.6s ease, color 0.6s ease;
}

.interp-line span { opacity: 0; }

/* Tras hablarse, la línea se asienta en un tamaño de lectura — no desaparece */
.interp-line.settled {
  font-size: clamp(0.8rem, 1.5vw, 1.05rem);
  font-weight: 400;
  opacity: 0.55;
}

/* ── SECOND QUESTION ───────────────────────────────────────────────────────── */
#phase-second {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  z-index: 20;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
}

#phase-second.active { pointer-events: all; }

#second-q {
  font-size: clamp(1.2rem, 3vw, 2.8rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-align: center;
  max-width: 650px;
  line-height: 1.25;
}

#second-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--fg2);
  color: var(--fg);
  font-family: var(--font);
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  font-weight: 300;
  width: 100%;
  max-width: 600px;
  text-align: center;
  outline: none;
  padding: 0.5rem 0 0.8rem;
  cursor: none;
  caret-color: var(--red);
}

#second-transcript {
  font-family: var(--font);
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  font-weight: 300;
  color: var(--fg);
  text-align: center;
  max-width: 650px;
  min-height: 1.4em;
  margin-bottom: 1.5rem;
}

#second-close {
  background: transparent;
  border: none;
  color: var(--fg2);
  font-family: var(--font);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: none;
  transition: color 0.2s;
  margin-top: 0.5rem;
}
#second-close:hover { color: var(--fg); }

/* ── FORMULARIO DE CONTACTO ────────────────────────────────────────────────── */
#phase-contact {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  z-index: 20;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
}
#phase-contact.active { pointer-events: all; }

#contact-intro {
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-align: center;
  max-width: 560px;
  line-height: 1.3;
}

#contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  max-width: 380px;
}

.contact-field {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--fg2);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 300;
  width: 100%;
  text-align: center;
  outline: none;
  padding: 0.4rem 0 0.6rem;
  cursor: none;
  caret-color: var(--red);
}
.contact-field::placeholder { color: var(--fg2); }
.contact-field:focus { border-bottom-color: var(--fg); }

#contact-error {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--red);
  text-align: center;
  min-height: 1em;
}

#contact-submit { margin-top: 0.4rem; }

/* ── BOTONES COMPARTIDOS (redondeados, mismo estilo en todo VIVO) ────────────── */
.vivo-btn {
  display: inline-block;
  background: transparent;
  border: 1.5px solid var(--fg2);
  border-radius: 10px;
  color: var(--fg);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 0.85rem 1.8rem;
  cursor: none;
  transition: border-color 0.2s, background 0.2s, color 0.2s, opacity 0.2s;
}
.vivo-btn:hover { border-color: var(--fg); background: var(--fg); color: var(--bg); }

.vivo-btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}
.vivo-btn-primary:hover { opacity: 0.88; background: var(--red); border-color: var(--red); color: #ffffff; }

.vivo-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.6rem;
}

/* ── VISUAL STATES ─────────────────────────────────────────────────────────── */
.state-red  { --bg: #e51b4b; --fg: #ffffff; --fg2: rgba(255,255,255,0.45); }
.state-white{ --bg: #f0f0ee; --fg: #111111; --fg2: rgba(0,0,0,0.35);      }
.state-black{ --bg: #080808; --fg: #ffffff; --fg2: rgba(255,255,255,0.35); }
.state-void { --bg: #0a0a0a; --fg: #ffffff; --fg2: rgba(255,255,255,0.2);  }

/* ── LOGO ──────────────────────────────────────────────────────────────────── */
#vmark {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 40px;
  height: 40px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

#vmark.visible {
  opacity: 0.55;
  pointer-events: all;
  cursor: none;
}

#vmark:hover { opacity: 1; }

/* ── SOUND BUTTON ──────────────────────────────────────────────────────────── */
#sound-btn {
  position: fixed;
  top: 2rem;
  right: 2rem;
  background: transparent;
  border: none;
  color: var(--fg2);
  font-family: var(--font);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 100;
  cursor: none;
  transition: color 0.2s;
}

#sound-btn:hover, #sound-btn.on { color: var(--fg); }

/* ── VOICE CONTROLS (estado + mute respuesta + repetir) ───────────────────── */
#voice-controls {
  position: fixed;
  top: 2rem;
  left: 2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  z-index: 100;
  color: var(--fg2);
  font-family: var(--font);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#mute-btn, #replay-btn, #restart-btn {
  background: transparent;
  border: none;
  color: var(--fg2);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: color 0.2s, opacity 0.2s;
}
#mute-btn:hover, #replay-btn:hover, #restart-btn:hover { color: var(--fg); }

#replay-btn {
  opacity: 0.35;
  pointer-events: none;
}
#replay-btn.enabled {
  opacity: 1;
  pointer-events: all;
}

#mute-btn .icon-speaker-off { display: none; }
#mute-btn.muted .icon-speaker-on { display: none; }
#mute-btn.muted .icon-speaker-off { display: inline-block; }
#mute-btn.muted { color: var(--red); }

/* ── CURSOR CROSSHAIR ──────────────────────────────────────────────────────── */
#cursor-tracker {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-999px, -999px);
}

#cursor-tracker::before,
#cursor-tracker::after {
  content: '';
  position: absolute;
  background: var(--fg);
  opacity: 0.45;
}

#cursor-tracker::before {
  width: 18px; height: 1px;
  left: -9px; top: 0;
}

#cursor-tracker::after {
  width: 1px; height: 18px;
  left: 0; top: -9px;
}

#cursor-coords {
  position: absolute;
  top: 10px; left: 8px;
  font-family: monospace;
  font-size: 8px;
  color: rgba(255,255,255,0.25);
  white-space: nowrap;
  letter-spacing: 0.05em;
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #cursor-tracker { display: none; }
  #vivo { cursor: default; }
  #main-input, #second-input, .contact-field { cursor: text; }
  #voice-main-btn, #second-mic-btn, #prefer-write, #second-prefer-write, #mute-btn, #replay-btn, #restart-btn, .vivo-btn { cursor: pointer; }
}