/* ==========================================================================
   FIRMA CREATEDBY™ — primitivo de marca
   --------------------------------------------------------------------------
   Un descriptor que cambia de idioma sobre un nombre que NO cambia nunca.

   El nombre se mueve UNA sola vez: al entrar. Después es un logotipo quieto.
   Lo único que sigue moviéndose es el idioma. Esto es a propósito: la firma
   va en todas las pantallas, y un bucle cansa a la tercera vez que lo ves.

   ── REGLAS INVIOLABLES ──────────────────────────────────────────────────
   1. La marca se escribe «Createdby», UNA palabra, siempre en MAYÚSCULA.
      Nunca «Created by».
   2. El ™ va pegado a la marca y siempre presente. Es lo que declara que
      esto es un nombre y no una descripción.
   3. La marca NUNCA se traduce, nunca se parte en dos líneas.
   4. Descriptor y marca van los dos en BLANCO. La diferencia la hacen el
      peso y el tamaño, jamás la opacidad.
   5. La marca no se mueve de sitio al cambiar el idioma, y la línea base
      de la frase no se mueve tampoco.

   ── PORTABILIDAD ────────────────────────────────────────────────────────
   · `font-family: inherit`: toma la tipografía de donde se pegue.
   · El descriptor se dimensiona en `em` RELATIVO a la marca.
   · Todo lo ajustable son custom properties.
   · La tipografía variable solo hace falta durante el impulso de entrada.
     Sin ella la firma entra igual; solo se pierde el estirón.
   ========================================================================== */

.cb-firma {
  /* --- tamaño y proporción --- */
  --cb-size: clamp(2.75rem, 13vw, 9rem);   /* tamaño de la MARCA */
  --cb-desc-escala: .30;                   /* apilada: 30% de la marca */
  --cb-hueco: .06em;

  /* --- forma --- */
  --cb-desc-peso: 500;
  --cb-marca-peso: 800;
  --cb-marca-tracking: -.02em;   /* abierto a propósito: a peso alto,
                                    -.035em pegaba las últimas letras */
  --cb-desc-tracking: .1em;      /* la mayúscula necesita aire */

  /* --- color: los dos blancos --- */
  --cb-tinta: currentColor;

  /* --- ritmo (traído de QuienGana; ver README) --- */
  --cb-entra: 280ms;             /* RotatingTip SLIDE_IN_MS */
  --cb-sale: 220ms;              /* RotatingTip SLIDE_OUT_MS */
  --cb-impulso: 620ms;
  --cb-curva: cubic-bezier(.22, 1, .36, 1);
  --cb-decel: cubic-bezier(0, 0, .2, 1);
  --cb-accel: cubic-bezier(.4, 0, 1, 1);

  display: flex;
  font-family: inherit;
  font-size: var(--cb-size);
  color: var(--cb-tinta);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* ── los dos modos ────────────────────────────────────────────────────────
   apilada: descriptor encima del nombre, todo centrado.
   lineal:  una sola frase — «CREADO POR CREATEDBY™» — con el descriptor a
            la izquierda. El nombre queda CLAVADO y el descriptor se alinea
            a la derecha contra él: si el idioma es más corto, el que se
            corre es el descriptor.                                        */
.cb-firma[data-cb-modo="apilada"] {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cb-firma[data-cb-modo="lineal"] {
  /* En una frase la firma es un CRÉDITO, no un titular: nace chica. Aparte,
     el JS la achica todavía más si el idioma más largo no entra. */
  --cb-size: clamp(.95rem, 3.6vw, 1.6rem);
  --cb-desc-escala: .78;
  --cb-marca-tracking: -.015em;
  flex-direction: row;
  align-items: baseline;
  gap: .45em;
}

/* ── descriptor ─────────────────────────────────────────────────────────── */
.cb-firma__desc {
  display: grid;
  grid-template-areas: "capa";
  overflow: hidden;
  font-size: calc(1em * var(--cb-desc-escala));
  font-weight: var(--cb-desc-peso);
  letter-spacing: var(--cb-desc-tracking);
  line-height: 1.15;
  white-space: nowrap;
}
.cb-firma[data-cb-modo="apilada"] .cb-firma__desc { margin-bottom: var(--cb-hueco); }

/* LA REGLA INVISIBLE.
   Fija la altura de la caja y la línea base de la frase, y NUNCA cambia.
   Sin esto, cuando la capa saliente se va la caja se queda sin contenido,
   el navegador recalcula la línea base y toda la frase salta en el eje Y.
   Ese era el salto. */
.cb-firma__regla {
  grid-area: capa;
  /* misma estructura que una capa real: si midiera distinto, el nombre se
     correría unos pixeles cada vez que cambia el idioma */
  display: flex;
  flex-wrap: nowrap;
  gap: .34em;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.cb-firma__capa {
  grid-area: capa;
  display: flex;
  flex-wrap: nowrap;
  gap: .34em;
}
.cb-firma[data-cb-modo="apilada"] .cb-firma__capa { justify-self: center; }
.cb-firma[data-cb-modo="lineal"]  .cb-firma__capa { justify-self: end; }

.cb-firma__palabra { display: inline-flex; }

/* ── marca ──────────────────────────────────────────────────────────────── */
.cb-firma__marca {
  display: block;
  font-size: 1em;
  font-weight: var(--cb-marca-peso);
  letter-spacing: var(--cb-marca-tracking);
  line-height: 1;
  white-space: nowrap;
}

.cb-firma__letra {
  display: inline-block;
  will-change: transform, opacity;
}

/* El ™ NO vuela con las letras: llega al final, cuando el nombre ya se
   asentó. Es el remate que dice «esto es una marca». */
.cb-firma__tm {
  display: inline-block;
  font-size: .26em;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0;
  vertical-align: 1.6em;
  margin-left: .14em;
}

/* ── variantes ──────────────────────────────────────────────────────────── */
.cb-firma--lock { --cb-size: clamp(2.5rem, 16vw, 7rem); }   /* cortina de carga */
.cb-firma--pie  { --cb-size: 1.05rem; --cb-marca-tracking: -.01em; }

/* ── accesibilidad ──────────────────────────────────────────────────────── */
/* Con movimiento reducido no hay impulso ni rodillo: la firma aparece hecha
   y el idioma se queda en el de la página. Un texto que cambia en seco cada
   pocos segundos es peor que la animación. */
@media (prefers-reduced-motion: reduce) {
  .cb-firma__letra,
  .cb-firma__palabra,
  .cb-firma__capa { transition: none !important; animation: none !important; }
}

/* Sin JavaScript la firma se lee entera: el HTML ya trae el descriptor del
   idioma de la página, la marca y el ™. No hace falta nada más. */