/* Weird Gentleman Works — estilos
   Los colores y tipografías se cambian aquí, en un solo sitio. */
:root {
  --paper: #ffffff;   /* fondo; igual que el blanco de la imagen */
  --ink: #14120f;     /* texto */
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --fade: 0.7s;
}

* { box-sizing: border-box; }
html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-text-size-adjust: 100%;
}

::selection { background: var(--ink); color: var(--paper); }

/* ---------- Escena fija ---------- */
.stage {
  --w: min(100vw, 150vh);   /* ancho del marco de la imagen (proporción 3:2) */
  --x: 0px;                 /* desplazamiento horizontal del marco */
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
}
@supports (height: 100svh) {
  .stage { --w: min(100vw, 150svh); }
}

/* En pantallas anchas el esqueleto se desplaza un poco más a la izquierda.
   Cambia el 0.07 para mover más (0.12) o menos (0) el esqueleto. */
@media (min-aspect-ratio: 16/10) {
  .stage { --x: calc(var(--w) * -0.07); }
}

.frame {
  position: absolute;
  top: 50%;
  left: var(--x);
  width: var(--w);
  aspect-ratio: 3 / 2;
  transform: translateY(-50%);
}

.skeleton {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- Textos ----------
   Viven dentro de una ventana de lectura: empieza justo bajo el nombre fijo
   (la posición la calcula main.js) y llega casi al borde inferior. Los textos
   cortos se centran a la altura de la boca; los largos suben con el scroll
   mientras su título se queda quieto. */
.voices {
  position: absolute;
  left: calc(var(--x) + var(--w) * 0.66);
  right: 4.5vw;
  top: var(--win-top, 8rem);
  bottom: 1.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 0.9rem, #000 calc(100% - 1.6rem), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 0.9rem, #000 calc(100% - 1.6rem), transparent 100%);
}

.voice {
  --dy: 1.4rem;               /* "aún no ha llegado": abajo */
  position: absolute;
  top: var(--top, 0px);       /* main.js lo calcula en escritorio */
  right: 0;
  width: 100%;
  max-width: 32rem;           /* la columna se pega a la derecha */
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--dy));
  transition: opacity var(--fade) ease, transform var(--fade) ease, visibility 0s linear var(--fade);
}
.voice::after { content: ""; display: block; height: 1.6rem; }

.voice.is-past { --dy: -1.4rem; } /* "ya pasó": arriba */

.voice.is-active {
  --dy: 0rem;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Solo sube el texto; el título queda fijo y el texto se desliza bajo él. */
.voice > :not(h1):not(h2) { translate: 0 calc(var(--sy, 0px) * -1); }

.voice h1,
.voice h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 1rem 0 0.55rem;
  background: var(--paper);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.voice h1::after,
.voice h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.9rem;
  background: linear-gradient(var(--paper), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.voice h1 { font-size: clamp(2rem, 4.6vw, 5rem); }
.voice h2 { font-size: clamp(1.6rem, 3.3vw, 3.4rem); }

.voice p {
  margin: 0 0 0.8em;
  font-size: clamp(0.95rem, 1.35vw, 1.3rem);
  line-height: 1.55;
}

.voice a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.voice a:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.voice a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.links a { margin-right: 1.1em; }

/* ---------- Palabra "subrayada" con marcador negro (como al seleccionar texto) ---------- */
.hl {
  background: var(--ink);
  color: var(--paper);
  padding: 0 0.1em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.hl::selection { background: var(--paper); color: var(--ink); }

/* ---------- Nombre fijo (aparece al salir del primer bloque) ---------- */
.brand {
  position: absolute;
  top: max(1.2rem, env(safe-area-inset-top));
  right: 4.5vw;
  z-index: 2;
  color: inherit;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: right;
  width: min-content;           /* una palabra por línea: Weird / Gentleman / Works */
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fade) ease, visibility 0s linear var(--fade);
}
.brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
body.has-scrolled .brand {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ---------- Indicación de scroll ---------- */
.hint {
  position: absolute;
  bottom: max(1.4rem, env(safe-area-inset-bottom));
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  font-style: italic;
  font-size: 0.95rem;
  transition: opacity 0.5s ease;
}
body.has-moved .hint { opacity: 0; }

/* ---------- Pasos de scroll (invisibles) ---------- */
.step { height: calc(100vh + var(--extra, 0px)); height: calc(100svh + var(--extra, 0px)); }

/* ---------- Móvil y pantallas verticales ---------- */
@media (max-aspect-ratio: 1/1), (max-width: 640px) {
  .stage { --x: 0px; --img-h: 42svh; }   /* altura del esqueleto en móvil: sube o baja este valor */

  .frame {
    top: 0;
    left: 0;
    width: 100vw;
    height: 42vh;
    height: var(--img-h);
    aspect-ratio: auto;
    transform: none;
  }
  .skeleton { object-position: 72% 50%; }

  /* Ventana de lectura bajo el esqueleto. Deja libre abajo el sitio de "Desliza". */
  .voices {
    left: 7vw;
    right: 7vw;
    top: calc(var(--img-h) + 0.8rem);
    bottom: calc(3.2rem + env(safe-area-inset-bottom));
  }
  .voice { top: 0; max-width: none; }

  .voice h1 { font-size: clamp(2rem, 9.5vw, 3.6rem); }
  .voice h2 { font-size: clamp(1.6rem, 7vw, 2.6rem); }
  .voice p  { font-size: 1rem; line-height: 1.5; }

  .brand { right: 7vw; font-size: clamp(1.15rem, 5.2vw, 1.5rem); }
}

/* ---------- Respeta a quien pide menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .voice { transition: opacity 0.2s linear; --dy: 0rem !important; }
}