@font-face {
  font-family: 'ZT Nature';
  src: url('../public/ZTNature-Regular.woff2') format('woff2');
  font-display: swap;
}

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

/* --- Paleta ---
   Toda la web lee de estas variables: no hay ni un color suelto en style.css.
   Cambiar de tema es cambiar este bloque, y por eso el modo claro de más abajo
   solo redeclara valores, sin duplicar una sola regla.

   El oscuro es el de siempre. El claro no es blanco: un gris papel, porque los
   escaneos son papel claro y sobre blanco se fundirían con el fondo. */
:root {
  font-size: 11px;
  --color-text: #656565;
  --color-bg: #0e0e0e;
  --color-link: #9f9f9f;
  --color-link-hover: #fff;
  /* Grises de apoyo: rótulos pequeños, filetes, bordes, raíl del slider */
  --color-dim: #6b6b6b;
  --color-faint: #303030;
  --color-rule: #242424;
  --color-border: #4c4c4c;
  --color-border-hover: #5c5c5c;
  --color-track: #3a3a3a;
  --color-active-bg: rgba(255, 255, 255, 0.09);
  /* Visor: velo de fondo y halo que despega el texto de la imagen */
  --color-overlay: rgba(0, 0, 0, 0.95);
  /* Velo del panel lateral: deja ver la galería detrás */
  --color-scrim: rgba(0, 0, 0, 0.6);
  --halo-icon: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.9));
  --halo-text: 0 1px 12px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.7);
  /* Los escaneos están en penumbra y se encienden al pasar por encima */
  --image-dim: 0.8;
  --image-lit: 1.15;
  --page-padding: 1.5rem;
  /* Alt maxim d'una cel·la de la reticula, en cops la seva amplada. Puja'l per
     deixar respirar les tires; baixa'l per una reticula mes uniforme. */
  --max-ratio: 2;
}

/* Modo claro. El tema lo fija un script en el <head> escribiendo data-theme
   en <html>, antes del primer pintado, para que no haya destello. */
:root[data-theme='light'] {
  /* Gris papel, no blanco: los escaneos son papel claro y contra un fondo casi
     blanco se fundían con él. Este tono los recorta sin volverse gris medio.
     EL FONDO DEL MODO CLARO SE CAMBIA AQUÍ, en --color-bg. */
  --color-text: #4f4d47;
  --color-bg: #d6d2c8;
  --color-link: #3f3e3a;
  --color-link-hover: #0e0e0e;
  --color-dim: #86827a;
  --color-faint: #aaa69b;
  --color-rule: #bdb9ae;
  --color-border: #aeaa9e;
  --color-border-hover: #8e8a7f;
  --color-track: #b4b0a4;
  --color-active-bg: rgba(0, 0, 0, 0.07);
  --color-overlay: rgba(214, 210, 200, 0.97);
  --color-scrim: rgba(40, 38, 34, 0.45);
  --halo-icon: drop-shadow(0 1px 8px rgba(214, 210, 200, 0.95));
  --halo-text: 0 1px 12px rgba(214, 210, 200, 0.95), 0 0 3px rgba(214, 210, 200, 0.8);
  /* Sobre papel claro, atenuar un escaneo lo ensucia en vez de calmarlo: la
     penumbra es mínima y el realce lo devuelve a su brillo real. */
  --image-dim: 0.97;
  --image-lit: 1;
}

body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: 'ZT Nature', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-transform: uppercase;
}

::-webkit-scrollbar {
  display: none;
}

@media (scripting: enabled) {
  .loading {
    &::before,
    &::after {
      content: '';
      position: fixed;
      z-index: 10000;
    }

    &::before {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--color-bg);
    }

    &::after {
      top: 50%;
      left: 50%;
      width: 100px;
      height: 1px;
      margin: 0 0 0 -50px;
      background: var(--color-link);
      animation: loaderAnim 1.5s ease-in-out infinite alternate forwards;
    }
  }
}

@keyframes loaderAnim {
  0% {
    transform: scaleX(0);
    transform-origin: 0% 50%;
  }

  50% {
    transform: scaleX(1);
    transform-origin: 0% 50%;
  }

  50.1% {
    transform: scaleX(1);
    transform-origin: 100% 50%;
  }

  100% {
    transform: scaleX(0);
    transform-origin: 100% 50%;
  }
}

a {
  text-decoration: none;
  color: var(--color-link);
  cursor: pointer;

  &:hover {
    text-decoration: underline;
    color: var(--color-link-hover);
  }
}

/* Header: title flush to the top-left corner, controls stacked below it and
   pushed to the right edge. Same 2rem inset on every side as the grid below. */
.frame {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  z-index: 1000;
  position: relative;
  pointer-events: none;

  a,
  button,
  input,
  label,
  output {
    pointer-events: auto;
  }

  .frame__title {
    align-self: flex-start;
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    margin: 0;
    color: var(--color-link-hover);
  }

  /* Live count, sitting under the density scale it responds to */
  .frame__count {
    align-self: flex-start;
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }
}

.content {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-height: 100vh;
}