/* Tokens, tipografías, cabecera y about. */

:root {
  --bg: #0c0c0c;
  --fg: #ededed;
  --fg-dim: #8a8a8a;
  --line: #262626;

  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: var(--font-mono);

  --gap: .75rem;
  --pad: 1.25rem;
  --dur: .45s;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .13 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@font-face {
  font-family: "JetBrains Mono";
  src: url(../fonts/jetbrains-mono-400.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Las seis góticas del logo. El nombre reparte una por letra (js/wordmark.js). */
@font-face { font-family: "Diegol 1"; src: url(../fonts/d1-unifraktur-maguntia.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Diegol 2"; src: url(../fonts/d2-germania-one.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Diegol 3"; src: url(../fonts/d3-pirata-one.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Diegol 4"; src: url(../fonts/d4-new-rocker.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Diegol 5"; src: url(../fonts/d5-metal-mania.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Diegol 6"; src: url(../fonts/d6-grenze-gotisch.woff2) format("woff2"); font-display: swap; }

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

/* Todo va en rem sobre esta raíz: 13 px hasta ~1440 px de ancho y luego
   crece con la pantalla (≈19 px en 2560, ≈25 px en 4K), para que en una
   pantalla grande no salga todo diminuto. */
html {
  background: var(--bg);
  font-size: clamp(13px, 5.8px + .5vw, 28px);
}

/* body sin fondo propio: así el grano (debajo de todo) se ve sobre el negro */
body {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

/* El grano del fondo, como en la referencia: ruido fino fijo detrás de todo.
   Es un svg de 200 px repetido; la intensidad es el ".13" del feColorMatrix. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--grain) fixed;
}

a { color: inherit; text-decoration: none; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- cabecera ---------- */

/* la cabecera se va con el scroll, como el resto de la página */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--pad) var(--pad) calc(var(--pad) * .75);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-size: clamp(22px, 3.4vw, 2.6rem);
  line-height: 1;
}

.wordmark__letter { display: inline-block; }
.wordmark__space { width: .28em; display: inline-block; }

/* en la home el nombre manda: grande y con aire */
body[data-vista="home"] .wordmark {
  font-size: clamp(44px, 9vw, 8.6rem);
}

body[data-vista="home"] .site-header {
  align-items: flex-end;
  padding: calc(var(--pad) * 1.5) var(--pad) calc(var(--pad) * 1.5);
}

.site-nav { display: flex; gap: 1rem; color: var(--fg-dim); }
.site-nav a:hover { color: var(--fg); }

/* en un proyecto, el nav enseña su título y en hover pasa a "back" */
.site-nav__index--titulo { text-transform: uppercase; letter-spacing: .06em; }
.site-nav__titulo {
  display: block;
  max-width: 45vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-nav__back,
.site-nav__index--titulo:hover .site-nav__titulo { display: none; }
.site-nav__index--titulo:hover .site-nav__back { display: block; }

.app { padding: 0 var(--pad) calc(var(--pad) * 4); }
.loading { color: var(--fg-dim); }

/* la portada de bienvenida ocupa la pantalla entera: fuera cabecera y márgenes */
body[data-vista="welcome"] .site-header { display: none; }
body[data-vista="welcome"] .app { padding: 0; }

/* ---------- about ---------- */

.about {
  max-width: 62ch;
  padding-top: 1rem;
  font-size: 1.25rem;
  color: #fff;
  text-shadow: 0 0 30px rgba(0, 0, 0, .6);
}
.about p { white-space: pre-wrap; }

/* el pase de stills del welcome, fijo detrás de todo. El scale recorta las
   bandas negras que traen algunos stills (hasta un 10 % por lado); va en el
   contenedor porque el zoom lento del pase ya usa el transform de cada foto */
.about__media { position: fixed; inset: 0; z-index: -1; background: #000; transform: scale(1.25); }
.about__veil { background: rgba(0, 0, 0, .55); }

.about__clients {
  margin-top: 2rem;
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
}

.back { display: inline-block; margin-top: 2rem; color: var(--fg-dim); }
.back:hover { color: var(--fg); }

@media (max-width: 720px) {
  :root { --gap: 6px; --pad: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}