/* Componentes de la historia. Todos los valores de diseño vienen de tokens.css. */

/* ---------- Escenas ---------- */
.scene { position: relative; height: calc(100vh + var(--len, 120) * 1vh); }
.sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  touch-action: pan-y; background: var(--color-bg);
}
.layers, .layers canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.layers canvas { display: block; }
/* Tinta viscosa: desenfoque + contraste funde las formas */
.layers canvas.ink {
  inset: calc(-1 * var(--ink-bleed));
  width: calc(100% + 2 * var(--ink-bleed)); height: calc(100% + 2 * var(--ink-bleed));
  filter: blur(var(--ink-blur)) contrast(var(--ink-contrast)); mix-blend-mode: multiply;
}
.nocursor { cursor: none; }

.copy {
  position: absolute; z-index: var(--z-copy);
  left: var(--gutter); top: var(--copy-top);
  max-width: min(34ch, 82vw);
  font-size: var(--text-story); line-height: var(--leading-story);
  /* El texto se puede seleccionar; el puntero sigue llegando a la escena porque los eventos suben al contenedor */
  user-select: text; -webkit-user-select: text; cursor: text;
}
.copy ::selection { background: var(--selection-bg); color: var(--selection-text); text-shadow: none; }
.copy .l {
  margin: 0 0 var(--flow-line);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  text-shadow: 0 0 8px var(--color-bg), 0 0 3px var(--color-bg), 0 0 1px var(--color-bg);
}
.copy .l.on { opacity: 1; transform: none; }
.copy em { font-style: normal; font-weight: var(--weight-bold); }
/* 10 · «bloques» y «clic» en rojo, saltan al ritmo de cada bloque que encaja */
.copy em.tick { display: inline-block; color: var(--color-accent); }
.copy em.tick.go { animation: tick 0.3s var(--ease); }
@keyframes tick { 40% { transform: translateY(-4px) scale(1.25); } 100% { transform: none; } }
/* 10 · poetry ⇄ poetic, en rojo */
.copy .morph { color: var(--color-accent); }
.copy .translated { font-size: var(--text-sm); }
.copy .big { font-family: var(--font-heavy); font-size: var(--text-display); line-height: var(--leading-none); margin-top: 0.2em; }
.red { color: var(--color-accent); }
/* Palabras clave: aparecen en tinta y, un instante después, se vuelven rojas */
.copy .k { transition: color var(--dur-slow) var(--ease) 0.5s; }
.copy .l.on .k { color: var(--color-accent); }
/* Última palabra atrapada del poema: roja y luego vuelve a la tinta */
.poem .fresh { color: var(--color-accent); animation: cool 2.4s var(--ease) forwards; }
@keyframes cool { 60% { color: var(--color-accent); } 100% { color: var(--color-text); } }

/* Texto bajo la inundación de tinta: cada línea se vuelve papel cuando la tinta la alcanza (el rojo sigue rojo) */
.flood .copy .l { text-shadow: none; }
.copy .l.under { color: var(--color-paper); text-shadow: none; transition: color var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.copy .l.under .k { color: var(--color-accent); }

.hint {
  position: absolute; z-index: var(--z-copy); right: var(--gutter-edge); top: var(--hint-top);
  font-size: var(--text-sm); color: var(--color-text-soft); pointer-events: none;
}
.flood .hint { color: var(--color-white); mix-blend-mode: difference; }

/* 01 · palabras musicales */
.music { color: var(--color-accent); }
.music .word { display: inline-block; }
.music .ch { display: inline-block; }
.music .ch.go { animation: pluck 0.7s var(--ease); }
@keyframes pluck {
  0% { transform: translateY(0); }
  25% { transform: translateY(-9px); }
  55% { transform: translateY(3px); }
  80% { transform: translateY(-1px); }
  100% { transform: none; }
}

/* 04 · el secreto */
.secret {
  pointer-events: auto; cursor: help; display: inline-block;
  font-size: var(--text-2xs); opacity: 0.45;
  transition: font-size 0.6s var(--ease), opacity 0.6s var(--ease);
}
.secret:hover, .secret:focus { font-size: 1em; opacity: 1; outline: none; }

/* 10 · poema recogido */
.poem {
  position: absolute; z-index: var(--z-copy); right: var(--gutter-poem); top: var(--copy-top);
  width: min(34ch, 38vw); min-height: 4em;
  padding-left: var(--space-xl); border-left: var(--border-strong) solid var(--color-ink);
  font-size: var(--text-lg); line-height: var(--leading-loose); white-space: pre-wrap;
}
.poem:empty::before { content: attr(data-empty); color: var(--color-text-soft); }

/* 15 · p03try */
.glitch {
  pointer-events: auto; cursor: default; display: inline-block;
  font-family: var(--font-heavy); font-size: var(--text-giant); line-height: var(--leading-none); margin-top: 0.15em;
  outline: none;
}

/* 17 · nombre en rojo, con la tipografía del texto */
.sig { position: relative; color: var(--color-accent); font-weight: var(--weight-bold); text-shadow: none !important; }
.sig .name { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 1.3s steps(19, end) 0.8s; }
.signed .sig .name { clip-path: inset(0 0 0 0); }
.sig .drop {
  position: absolute; left: 0.2em; top: 0.25em; width: var(--size-drop); height: var(--size-drop);
  background: var(--color-accent); border-radius: var(--radius-drop);
  opacity: 0; transform: translateY(-70vh) rotate(45deg);
}
.signed .sig .drop { animation: drop-fall 0.85s var(--ease-drop) forwards; }
@keyframes drop-fall {
  0% { opacity: 1; transform: translateY(-70vh) rotate(45deg); }
  88% { opacity: 1; transform: translateY(0.2em) rotate(45deg); }
  100% { opacity: 0; transform: translateY(0.25em) rotate(45deg) scale(2.2, 0.4); }
}
/* 18 · el primer bloque (saludo e introvertido) se recoge al llegar el mensaje final */
[data-scene="hello"] .copy .l.intro { max-height: 12em; transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), max-height var(--dur-slow) var(--ease), margin var(--dur-slow) var(--ease); }
[data-scene="hello"].cleaned .copy .l.intro { opacity: 0; max-height: 0; margin: 0; overflow: hidden; }
/* 18 · «pensamientos palabras letras» se tachan en rojo, una tras otra; queda «números» */
.copy s.strike { text-decoration: none; background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat 0 58% / 0 var(--border-strong); transition: background-size 0.35s var(--ease), color 0.35s var(--ease); }
.copy .l.on s.strike { background-size: 100% var(--border-strong); color: var(--color-text-soft); }
.copy .l.on s.strike:nth-of-type(1) { transition-delay: 0.6s; }
.copy .l.on s.strike:nth-of-type(2) { transition-delay: 1.1s; }
.copy .l.on s.strike:nth-of-type(3) { transition-delay: 1.6s; }
/* 18 · enlaces dentro del texto («CV», «pensamientos», «proyectos») */
.copy a.in { pointer-events: auto; color: inherit; text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: var(--underline-offset); transition: color var(--dur-fast) var(--ease); }
.copy a.in:hover, .copy a.in:focus-visible { color: var(--color-accent); }
/* 13 · aquí se mantiene pulsado: que no se seleccione texto ni salga el menú del toque largo */
[data-scene="poetry"] .sticky, [data-scene="poetry"] .copy { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.links { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: 1em !important; }
.links a {
  pointer-events: auto; padding: var(--space-xs) var(--space-2xl); font-size: var(--text-base);
  border: var(--border-ink) solid var(--color-ink); border-radius: var(--radius-pill); cursor: default;
  color: inherit; text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.links a[href] { cursor: pointer; }
.links a[href]:hover { background: var(--color-ink); color: var(--color-paper); }
/* los botones no llevan el halo claro del texto de la historia (al ponerse negros parecía un brillo) */
.copy .links a { text-shadow: none; }
/* Roles, justo debajo de los botones */
.copy .roles {
  margin-top: var(--flow-block); padding-top: var(--flow-rule); border-top: var(--border-ink) solid var(--color-ink);
  font-size: var(--text-roles); font-weight: var(--weight-medium); line-height: var(--leading-loose); color: var(--color-text);
}

/* ---------- Indicador de progreso (siempre por encima de las animaciones) ---------- */
.progress {
  position: fixed; z-index: var(--z-chrome); left: 50%; transform: translateX(-50%);
  bottom: calc(var(--progress-bottom) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-lg); border-radius: var(--radius-pill);
  background: var(--color-bg); border: var(--border-hair) solid var(--color-rule);
  font-size: var(--text-xs); color: var(--color-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: opacity var(--dur-base) var(--ease);
}
.progress .bar {
  position: relative; width: var(--progress-track); height: 3px; overflow: hidden;
  border-radius: var(--radius-track); background: var(--color-rule);
}
.progress .fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--color-ink); }
.progress .arrow { opacity: 0.25; transition: opacity var(--dur-fast) var(--ease); }
.progress.ready .arrow { opacity: 1; color: var(--color-ink); animation: nudge 1.1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(3px); } }
.at-end .progress { opacity: 0; pointer-events: none; }

/* ---------- Indicación inicial: en el centro, el ratón y la palabra «desliza» ---------- */
.scroll-cue {
  position: fixed; z-index: var(--z-chrome); left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-md);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
.scroll-cue .label {   /* solo texto: no es un botón */
  color: var(--color-accent);
  font-size: var(--text-base); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.scroll-cue .msg {
  width: min(var(--cue-msg-w), calc(100vw - 2 * var(--gutter-edge))); text-align: center;
  font-size: var(--text-sm); line-height: var(--leading-story); color: var(--color-text-soft);
  background: var(--color-bg); padding: var(--space-2xs) var(--space-xs);
}
/* hueco donde se coloca el ratón mientras está en el centro */
.scroll-cue .mouse-slot { width: var(--mouse-w); height: var(--mouse-h); }

/* El ratón dibujado: cable, dos botones y la rueda (roja) que baja una y otra vez */
.cue-mouse {
  position: fixed; z-index: var(--z-chrome); left: var(--cue-x, 50%); top: var(--cue-y, 50%);
  width: var(--mouse-w); height: var(--mouse-h); overflow: visible; pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left var(--dur-slow) var(--ease), top var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), opacity var(--dur-base) var(--ease);
}
.cue-mouse .body { fill: var(--color-bg); stroke: var(--color-ink); stroke-width: 2.5; }
.cue-mouse .cord, .cue-mouse .split { fill: none; stroke: var(--color-ink); stroke-width: 2; stroke-linecap: round; }
.cue-mouse .wheel { fill: var(--color-accent); animation: wheel var(--dur-wheel) var(--ease) infinite; }
@keyframes wheel {
  0% { opacity: 0; transform: translateY(0); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}
/* al deslizar, el ratón se va a la esquina superior derecha (más pequeño, junto a la «i») y sigue girando la rueda */
.scrolled .cue-mouse {
  left: calc(100% - var(--gutter-edge) - var(--info-size) - var(--space-sm)); top: var(--hint-top);
  transform: translate(-100%, 0) scale(var(--cue-corner-scale)); transform-origin: top right;
}
.at-end .cue-mouse { opacity: 0; }
/* las pistas de cada escena dejan sitio a la «i» y, al deslizar, también al ratón de la esquina */
.hint { right: calc(var(--gutter-edge) + var(--info-size) + var(--space-sm)); }
@media (pointer: fine) { .scrolled .hint { right: calc(var(--gutter-edge) + var(--info-size) + var(--space-sm) + var(--cue-corner-space)); } }

/* Escena del trombón: palabras en rojo que se mueven (al ritmo del bajo / con el trombón) */
.copy .beat { display: inline-block; margin-inline: 0.12em; transform-origin: 50% 60%; will-change: transform; }
.copy .tb { display: inline-block; transform-origin: 0 60%; will-change: transform; }
/* los dos tubos de la vara, entre «trom» y «bone»: crecen con el movimiento del trombón */
.copy .tb-rail {
  display: inline-block; width: 0; height: 0.36em; vertical-align: 0.14em;
  border-top: var(--border-strong) solid currentColor; border-bottom: var(--border-strong) solid currentColor;
}

/* ---------- Escena del trombón: invita a activar el sonido (flecha hacia el botón de sonido, arriba a la derecha) ---------- */
/* el botón de sonido de la barra late en rojo mientras no está activado */
.sound-nudge .sound { opacity: 1; color: var(--color-accent); animation: sound-pulse var(--dur-wheel) var(--ease) infinite; }
@keyframes sound-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* ---------- Ayuda «i»: arriba a la derecha; al pasar el ratón (o tocar) explica cómo funciona la web ---------- */
.info { position: fixed; z-index: var(--z-chrome); right: var(--gutter-edge); top: calc(var(--hint-top) - var(--space-2xs)); }
.info-btn {
  width: var(--info-size); height: var(--info-size); padding: 0; border-radius: 50%;
  border: var(--border-strong) solid var(--color-ink); background: var(--color-bg); color: var(--color-ink);
  font: var(--weight-bold) var(--text-sm) / 1 var(--font-mono); cursor: help;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.info-btn:hover, .info-btn:focus-visible, .info-btn[aria-expanded="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-paper); outline: none; }
.info-panel {
  position: absolute; right: 0; top: calc(100% + var(--space-xs));
  width: min(var(--info-panel-w), calc(100vw - 2 * var(--gutter-edge)));
  padding: var(--space-md) var(--space-lg); background: var(--color-bg); color: var(--color-text);
  border: var(--border-hair) solid var(--color-ink); box-shadow: var(--shadow-panel);
  font-size: var(--text-sm); line-height: var(--leading-story);
}
.info-panel p { margin: 0 0 var(--space-xs); }
.info-panel .info-title { margin-top: var(--space-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent); }
.info-panel .info-title:first-child { margin-top: 0; }
.info-panel .info-scene { margin-bottom: 0; }
/* en pantallas táctiles no hay ratón */
@media (pointer: coarse) { .cue-mouse, .scroll-cue .mouse-slot { display: none; } }
.scrolled .scroll-cue { opacity: 0; }

/* ---------- Escena del diseño de juegos: un botón que siempre se escapa ---------- */
.escape-btn {
  position: absolute; z-index: var(--z-copy); left: 0; top: 0; transform: translate(-50%, -50%);
  padding: var(--space-md) var(--space-3xl); border: 0; border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-paper);
  font: inherit; font-size: var(--text-lg); font-weight: var(--weight-bold); cursor: pointer;
  transition: left var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  touch-action: none;
}
.escape-btn:hover, .escape-btn:focus-visible { background: var(--color-accent); outline: none; }
/* en móvil se mueve solo, fotograma a fotograma: sin transición de posición */
.escape-btn.wander { transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.laugh {
  position: absolute; z-index: var(--z-copy); transform: translate(-50%, -50%);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-soft);
  pointer-events: none; white-space: nowrap;
  animation: laugh 1.3s var(--ease) forwards;
}
@keyframes laugh {
  0% { opacity: 0; transform: translate(-50%, -50%); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -260%); }
}

/* ---------- Investigación en la oscuridad ---------- */
.night .sticky { background: var(--color-paper); }
.night .copy { color: var(--color-paper); }
.night .copy .l.dry { color: var(--color-ink); }  /* aún sobre el agua */
.night .copy .l { text-shadow: none; }
.night .hint { color: var(--color-ink-faint); }

/* Zona táctil: aquí el dedo dibuja/arrastra en vez de desplazar la página */
.touchzone { position: absolute; z-index: var(--z-touch); touch-action: none; display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 820px) {
  .copy { top: var(--copy-top-tablet); max-width: 88vw; font-size: var(--text-story-tablet); }
  .poem { left: var(--space-3xl); right: var(--space-3xl); width: auto; top: auto; bottom: 46%; font-size: var(--text-md); }
  .hint { left: var(--space-3xl); right: auto; }
}

/* ---------- Pantallas bajas: texto más compacto para que no choque con el indicador ---------- */
@media (max-height: 640px) {
  .copy { top: var(--copy-top-compact); font-size: var(--text-story-compact); }
  .copy .l { margin-bottom: var(--flow-line-compact); }
  .hint { top: calc(var(--nav-h) + var(--space-xs)); }
}

/* ---------- Móvil ---------- */
@media (max-width: 600px) {
  .copy {
    left: var(--gutter-mobile); right: var(--gutter-mobile); top: var(--copy-top-mobile); max-width: none;
    font-size: var(--text-story-mobile);
  }
  .copy .l { margin-bottom: var(--flow-line-mobile); }
  .hint {
    top: calc(var(--nav-h-mobile) + var(--space-xs)); left: var(--gutter-mobile); right: calc(var(--gutter-mobile) + var(--info-size) + var(--space-sm));
    font-size: var(--text-xs);
  }
  .info { right: var(--gutter-mobile); top: calc(var(--nav-h-mobile) + var(--space-2xs)); }
  /* en móvil la invitación ocupa la fila de la pista (que se oculta mientras tanto) */
  /* en ventanas estrechas no cabe el ratón en la esquina: se despide al empezar a deslizar */
  .scrolled .cue-mouse { opacity: 0; }
  .poem { left: var(--gutter-mobile); right: var(--gutter-mobile); top: auto; bottom: var(--poem-bottom-mobile); width: auto; font-size: var(--text-md); }
  .copy .big { font-size: var(--text-display-mobile); }
  .glitch { font-size: var(--text-giant-mobile); }
  .copy .roles { font-size: var(--text-sm); }
  .links a { padding: var(--space-xs) var(--space-lg); font-size: var(--text-md); }
  .progress { padding: var(--space-2xs) var(--space-md); }
  .progress .bar { width: var(--progress-track-mobile); }
}

/* ---------- Móviles pequeños (bajos y estrechos): texto algo más compacto ---------- */
@media (max-width: 600px) and (max-height: 680px) {
  .copy { top: var(--copy-top-compact-mobile); font-size: var(--text-story-compact-mobile); }
  .copy .l { margin-bottom: var(--flow-line-compact); }
  .links a { padding: var(--space-2xs) var(--space-md); }
}

/* ---------- Móviles muy bajos: la última escena (sin pista arriba) empieza más arriba para que quepa todo ---------- */
@media (max-width: 600px) and (max-height: 600px) {
  .scene[data-scene="hello"] .copy { top: var(--copy-top-compact-mobile-hello); }
  .scene[data-scene="hello"] .copy .l { margin-bottom: var(--flow-line-tight); }
}

@media (prefers-reduced-motion: reduce) {
  .cue-mouse .wheel { animation: none; }
  .copy .l { transition: none; }
  .copy s.strike { transition: none; }
  .music .ch.go { animation: none; }
}