/* arbonsen · hoja de estilos
   Papel crema, grafito fino y un hilo naranja. Los dibujos los genera js/fable.js. */

@font-face {
  font-family: 'Delius';
  src: url(../fonts/delius.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url(../fonts/caveat.woff2) format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --paper: #f4efe6;
  --paper-hi: #fbf8f2;
  --night: #121519;

  --ink: #34322d;
  --ink-soft: #8a8275;
  --orange: #d9802f;
  --orange-soft: #f0b169;
  --pith: #f8e6c6;
  --leaf: #7c8f57;
  --sage: #93a585;
  --blue: #5d7c9f;
  --red: #b4553d;
  --gold: #e8b75a;
  --snow: #e6e1d6;
  --snow-dim: #cfc9bc;
  --rose: #d8a59b;

  --peachpaper: #efdccd;
  --sagepaper: #e1e6d8;
  --note: #fbf8f0;
  --tape: #eadfc2;

  --aurora1: #86dcae;
  --aurora2: #6cbcd8;
  --aurora3: #b8a1e6;

  --cap: clamp(14.5px, .35vw + 10.5px, 16.5px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Delius', ui-rounded, 'Avenir Next', system-ui, sans-serif;
  font-size: var(--cap);
  line-height: 1.7;
  letter-spacing: .025em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--orange); padding-bottom: 1px; transition: color .25s; }
a:hover { color: var(--orange); }
a:focus-visible { outline: 1.5px dashed var(--orange); outline-offset: 4px; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
main { position: relative; overflow-x: clip; } /* lo que se mueve fuera del borde no ensancha la página */

/* ---------- el hilo ---------- */
#thread { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 1; }
#thread svg { position: absolute; left: 0; top: 0; overflow: visible; }

/* ---------- escenas ---------- */
.scene { position: relative; padding: 9vh 5vw; }
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4; /* el grano va por encima de todo: dibujos, textos y hilo quedan sobre el mismo papel */
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .37 0 0 0 0 .3 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.night { background: var(--night); color: var(--snow-dim); }
.night::before { mix-blend-mode: screen; opacity: .1; }
.edge { position: absolute; left: 0; top: -14px; width: 100%; height: 16px; display: block; pointer-events: none; }

.tp { display: block; width: 0; height: 0; }

.art { position: relative; z-index: 2; width: min(1120px, 100%); margin: 0 auto; }
.art svg { display: block; width: 100%; height: auto; overflow: visible; }

/* pies de texto dentro de cada lámina */
.cap { position: absolute; z-index: 3; margin: 0; }
.cap p { margin: 0 0 .75em; }
.cap h2, .ch {
  font-family: 'Caveat', cursive;
  font-size: 1.75em;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--ink-soft);
  margin: 0 0 .45em;
  font-weight: 500;
}
.night .cap h2 { color: #9aa6b2; }

.c-hero     { left: 4%;  top: 58%; width: 30%; }
.c-campo    { left: 66%; top: 40%; width: 31%; }
.c-senal    { left: 68%; top: 67%; width: 30%; }
.c-maletas  { left: 5%;  top: 1%;  width: 31%; }
.c-noche-1  { left: 37%; top: 33%; width: 24%; }
.c-noche-2  { left: 36%; top: 88%; width: 42%; }
.c-libros   { left: 4%;  top: 76%; width: 36%; }
.c-puente   { left: 7%;  top: 6%;  width: 22%; }
.c-injerto  { left: 6%;  top: 56%; width: 40%; }
.c-injerto2 { left: 54%; top: 56%; width: 40%; }
.c-nexo     { left: 6%;  top: 77%; width: 37%; }
.c-hola     { right: 6%; top: 77%; width: 37%; }
.c-nekso    { left: 57%; top: 0;   width: 40%; }

/* frases a mano colgadas del hilo, entre capítulo y capítulo */
.enlace {
  position: relative; z-index: 3; display: block;
  max-width: 24ch; margin: 0 0 5vh;
  font-family: 'Caveat', cursive; font-weight: 500;
  font-size: clamp(21px, .8vw + 14.5px, 27px); line-height: 1.22;
  color: var(--ink-soft);
}
.night .enlace { color: #a9b3bd; }
.js .enlace { opacity: 0; transform: translateY(6px); transition: opacity 1.4s ease, transform 1.4s ease; }
.js .enlace.on { opacity: 1; transform: none; }

/* postales de NEXO y holaSpansk, con sello dibujado */
.postal {
  display: block; color: inherit; border-bottom: none; padding: 20px 22px 18px;
  background: var(--note); box-shadow: 0 1.5px 5px rgba(91, 74, 50, .17);
  transform: rotate(-1.4deg); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), box-shadow .4s;
}
.c-hola.postal { transform: rotate(1.3deg); }
.postal:hover { color: inherit; transform: rotate(0) translateY(-4px); box-shadow: 0 6px 14px rgba(91, 74, 50, .16); }
.postal::before { content: ""; position: absolute; top: -10px; left: 42%; width: 74px; height: 20px; background: var(--tape); opacity: .78; transform: rotate(-4deg); }
.postal .sello { float: right; width: 58px; height: 68px; margin: -6px -6px 10px 16px; overflow: visible; transform: rotate(3deg); }
.postal strong { display: block; font-family: 'Caveat', cursive; font-weight: 600; font-size: 2.1em; line-height: 1.05; margin: 0 0 .3em; }
.postal .txt { display: block; }
.postal .url { display: block; margin-top: .7em; color: var(--orange); }

/* ---------- portada ---------- */
.s-hero { min-height: 100vh; min-height: 100svh; padding-top: 4vh; padding-bottom: 8vh; }
.mast { position: relative; z-index: 2; }
.mast h1 { margin: 0; font-weight: 400; font-size: inherit; display: flex; gap: 14px; align-items: baseline; }
.mark { font-family: 'Caveat', cursive; font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: .01em; }
.who { font-size: .82em; color: var(--ink-soft); letter-spacing: .12em; }
.art-hero { margin-top: 2vh; }
.hint { position: absolute; right: 5vw; bottom: 5vh; z-index: 2; margin: 0; font-size: .8em; letter-spacing: .14em; color: var(--ink-soft); }
.hint span { display: inline-block; margin-left: 6px; animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

/* ---------- cierre ---------- */
.s-fin { padding-bottom: 6vh; }
.say { position: relative; z-index: 2; text-align: center; margin: 0 auto; max-width: 30ch; }
.art-fin { width: min(560px, 92vw); margin-top: 6vh; }
.coda { position: relative; z-index: 2; margin-top: 6vh; text-align: center; }
.coda .say { max-width: 36ch; }
.firma {
  font-family: 'Caveat', cursive; font-weight: 600;
  font-size: clamp(54px, 5vw, 76px); line-height: 1;
  margin: .3em auto 0;
  width: max-content;
  transform: rotate(-5deg);
}
.js .firma { clip-path: inset(-10% 100% -10% 0); transition: clip-path 2.4s cubic-bezier(.6, .05, .3, 1); }
.js .firma.on { clip-path: inset(-10% -5% -10% 0); }

/* ficha final, como una nota pegada */
.ficha {
  position: relative; z-index: 2; max-width: 33em; margin: 9vh auto 0; padding: 26px 30px 20px;
  background: var(--note); box-shadow: 0 1.5px 5px rgba(91, 74, 50, .17); transform: rotate(-.7deg);
}
.ficha::before { content: ""; position: absolute; top: -10px; left: 44%; width: 78px; height: 20px; background: var(--tape); opacity: .78; transform: rotate(3deg); }
.ficha h2 { font-family: 'Caveat', cursive; font-weight: 500; font-size: 1.75em; line-height: 1.1; color: var(--ink-soft); margin: 0 0 .5em; }
.ficha ul { list-style: none; margin: 0; padding: 0; }
.ficha li { position: relative; padding-left: 1.3em; margin: 0 0 .5em; }
.ficha li::before { content: "—"; position: absolute; left: 0; color: var(--orange); }
.invita { margin-top: 8vh !important; font-family: 'Caveat', cursive; font-size: 1.75em; line-height: 1.2; color: var(--ink-soft); }
.lugar { font-size: .8em; letter-spacing: .14em; color: var(--ink-soft); margin: 1em 0 0; }

.links { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; max-width: 900px; margin: 2.5vh auto 0; }
.foot { position: relative; z-index: 2; text-align: center; font-size: .78em; letter-spacing: .12em; color: var(--ink-soft); margin: 10vh 0 0; }

/* ---------- dibujo: aparición ---------- */
.pop, .wash, .pop-t, .fade { opacity: 0; transition: opacity .9s ease; }
.fade { transition-duration: .45s; }
.pop { transform: scale(.3); transform-box: fill-box; transform-origin: center; transition: opacity .6s ease, transform .7s cubic-bezier(.2, 1.4, .4, 1); }
.on { opacity: var(--o, 1); }
.pop.on { transform: none; }
.hand { font-family: 'Caveat', cursive; }

.twinkle.on { animation: tw 3.8s ease-in-out infinite alternate; }
@keyframes tw { to { opacity: .1; } }
.aurora { animation: sway 18s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes sway { from { transform: translateX(-12px) skewX(-2deg); } to { transform: translateX(12px) skewX(2deg); } }
.flake { animation: fall linear infinite; }
@keyframes fall { from { transform: translate(0, -40px); } to { transform: translate(22px, 900px); } }
.glowwin.on { animation: win 5s ease-in-out infinite alternate; }
.smoke { animation: smoke 6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes smoke { to { transform: skewX(-9deg) translateX(4px); } }
.flock { animation: flock 24s ease-in-out infinite alternate; }
@keyframes flock { from { transform: translate(30px, 6px); } to { transform: translate(-50px, -8px); } }
.flap { animation: flap 1.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes flap { to { transform: scaleY(.55); } }
.spin { animation: spin 180s linear infinite; transform-origin: 320px 320px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes win { to { opacity: .55; } }

.walk { animation: 26s linear infinite; }
.walk-r { animation-name: walkR; }
.walk-l { animation-name: walkL; }
@keyframes walkR { 0% { transform: translateX(0); opacity: 0; } 6%, 92% { opacity: 1; } 100% { transform: translateX(600px); opacity: 0; } }
@keyframes walkL { 0% { transform: translateX(0); opacity: 0; } 6%, 92% { opacity: 1; } 100% { transform: translateX(-600px); opacity: 0; } }

.spine { transition: transform .4s cubic-bezier(.3, 1.4, .5, 1); transform-box: fill-box; }
.spine:hover { transform: translateY(-8px); }

.art:not(.live) * { animation-play-state: paused !important; }

/* ---------- móvil: los pies de texto pasan a ir encima o debajo del dibujo ---------- */
/* ---------- pantallas medianas y móvil ----------
   Los pies de texto colocados dentro de cada lámina necesitan unos 1.200 px de ancho.
   Por debajo, pasan a ir encima o debajo del dibujo, y el hilo pasa por debajo de ellos. */
@media (max-width: 1180px) {
  .art { display: flex; flex-direction: column; }
  .art svg { order: 1; }
  .cap { position: relative; inset: auto !important; width: auto !important; max-width: 38em; order: 0; margin: 0 0 24px; text-align: left !important; background: var(--paper); box-shadow: 0 0 0 8px var(--paper); }
  .night .cap { background: var(--night); box-shadow: 0 0 0 8px var(--night); }
  .cap.after { order: 2; margin: 24px 0 0; }
  .postal, .c-hola.postal { background: var(--note); box-shadow: 0 1.5px 5px rgba(91, 74, 50, .17); margin-top: 30px !important; }
}

@media (max-width: 760px) {
  .scene { padding: 10vh 18px; }
  .mark { font-size: 28px; }
  .ficha { padding: 22px 20px 16px; }
  .hint { right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .firma { clip-path: none; }
  .js .enlace { opacity: 1; transform: none; }
}