/* ==========================================================================
   LA FIRMA — revelación del logo R2 oro con el scroll (18 de octubre de 2026)
   Raúl eligió "revelación con scroll", la misma idea que el sitio de AI Matic:
   a media página la sección se queda fija y el logo se arma mientras se baja.
     1. Se enciende un halo de oro sobre la tinta.
     2. El camarón del logo sube desde abajo, desenfocado, y se enfoca.
     3. "Don Camarón" se escribe de izquierda a derecha en la gótica del logo.
     4. Pasa un brillo por el oro y aparecen las estrellas y "Zamora · Michoacán".
   js/firma.js solo calcula el avance (variables --simbolo, --nombre…); todo lo
   visual vive aquí. Sin JS o con "reducir movimiento", el logo sale completo.
   ========================================================================== */

.firma {
  /* El oro del logo (logo-oficial-r2-oro/_trabajo): degradado vertical de 5 tonos */
  --oro-logo-1: #F7E3A6;
  --oro-logo-2: #C9963F;
  --oro-logo-3: #8A5F1E;
  --oro-logo-4: #E6C372;
  --oro-logo-5: #FBEEC2;
  --degradado-oro: linear-gradient(180deg, var(--oro-logo-1) 0%, var(--oro-logo-2) 48%, var(--oro-logo-3) 55%, var(--oro-logo-4) 65%, var(--oro-logo-5) 100%);

  /* Avance de cada paso, de 0 a 1. Sin JS se quedan en el final. */
  --fondo: 1;
  --simbolo: 1;
  --nombre: 1;
  --brillo: 1;
  --lugar: 1;
  --giro: 1;

  position: relative;
  background: var(--tinta);
  color: var(--marfil);
}
.firma--animada { height: 260vh; }

.firma__escenario {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.firma--animada .firma__escenario { position: sticky; top: 0; height: 100svh; }

.firma__halo {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: var(--fondo);
  background:
    radial-gradient(42% 38% at 50% 44%, color-mix(in srgb, var(--oro) 24%, transparent), transparent 72%),
    radial-gradient(90% 70% at 50% 110%, color-mix(in srgb, var(--oro-logo-3) 30%, transparent), transparent 70%);
}

.firma__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: 1rem;
}

.firma__simbolo {
  width: min(82vw, 520px, 64vh);
  height: auto;
  opacity: var(--simbolo);
  transform: translateY(calc((1 - var(--simbolo)) * 22vh)) scale(calc(1.3 - var(--simbolo) * 0.3));
  filter: blur(calc((1 - var(--simbolo)) * 16px)) drop-shadow(0 24px 48px rgba(0, 0, 0, 0.6));
  will-change: transform, filter, opacity;
}

/* Dos fondos recortados a la letra: arriba el brillo que cruza, abajo el oro. */
.firma__nombre {
  margin: clamp(0.25rem, 1.5vw, 1rem) 0 0;
  font-family: 'UnifrakturMaguntia', var(--font-display);
  font-size: clamp(3rem, 12vw, 8.5rem);
  line-height: 1.05;
  white-space: nowrap;
  background:
    linear-gradient(105deg, transparent 44%, var(--oro-logo-5) 50%, transparent 56%),
    var(--degradado-oro);
  background-size: 300% 100%, 100% 100%;
  background-position: calc(var(--brillo) * 100%) 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  clip-path: inset(-20% calc((1 - var(--nombre)) * 100%) -30% 0);
}

.firma__lugar {
  margin: clamp(0.5rem, 1.5vw, 1rem) 0 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.7rem, 1.4vw, 0.95rem);
  letter-spacing: calc(0.5em + (1 - var(--lugar)) * 0.6em);
  text-transform: uppercase;
  color: var(--oro);
  opacity: var(--lugar);
}

.firma__lema {
  margin: clamp(1.5rem, 5vh, 3rem) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--texto-2-oscuro);
  opacity: var(--lugar);
}

/* Estrellas de cuatro puntas, las del logo */
.firma__estrella {
  position: absolute;
  width: clamp(14px, 2.2vw, 30px);
  height: auto;
  fill: var(--oro);
  opacity: var(--lugar);
  transform: rotate(calc(var(--giro) * 90deg)) scale(calc(0.4 + var(--lugar) * 0.6));
}
.firma__estrella--1 { left: 12%; top: 62%; }
.firma__estrella--2 { right: 12%; top: 62%; }
.firma__estrella--3 { left: 24%; top: 20%; width: clamp(10px, 1.4vw, 18px); }
.firma__estrella--4 { right: 22%; top: 28%; width: clamp(10px, 1.4vw, 18px); }

@media (max-width: 600px) {
  .firma--animada { height: 220vh; }
  .firma__estrella--1 { left: 6%; top: 70%; }
  .firma__estrella--2 { right: 6%; top: 70%; }
}