/* ============================================================================
   DEMO · billboard, la "TV de motion graphics" del footer (R4 · C17)
   Showreel de agencia en loop largo: 8 beats, cortes secos + wipes de color
   (violeta / ambar / teal sobre la tinta), Archivo 800 gigante, muebles de
   pantalla persistentes (bug, ano, contador de beat, progreso del loop) y
   cierre flor + SPICA studio. Solo estilos de esta escena; colores SIEMPRE
   por tokens. Tamanos en cqw: el TV es su propio container y escala entero.
   ========================================================================== */

.demo--billboard .bb {
  position: relative;
  width: min(760px, 100%); /* llena la columna 7fr del footer; tope en el harness */
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  /* pantalla emisiva: luz suave arriba-centro sobre el slate */
  background: radial-gradient(130% 100% at 50% 0%, var(--slate-raised), var(--slate) 62%);
  border: 1px solid var(--line-on-dark);
  box-shadow: 0 30px 80px rgba(17, 17, 16, 0.45);
  container-type: inline-size;
}

/* grid sutil: lineas de 1px al 6% (solo se ve en los beats de tinta;
   los beats de color lo cubren con su superficie) */
.demo--billboard .bb::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(246, 245, 241, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 245, 241, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

/* vineta filmica por encima de los cortes (z2): bordes que respiran cine */
.demo--billboard .bb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  box-shadow: inset 0 0 14cqw rgba(17, 17, 16, 0.32);
  pointer-events: none;
}

/* ---- cortes: pantallas completas, una idea por beat ------------------------ */
.demo--billboard .bb-cut {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 2cqw;
  padding: 5cqw;
}
.demo--billboard .bb-cut[hidden] { display: none; }

/* superficies de los momentos de color (wipe los revela ya puestos) */
.demo--billboard .bb-cut--choose { background: var(--violet-deep); }
.demo--billboard .bb-cut--leads { background: var(--amber); }
.demo--billboard .bb-cut--system { background: var(--teal-deep); }

/* ---- wipe: panel que barre la pantalla para entrar a los beats de color ---- */
.demo--billboard .bb-wipe {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.demo--billboard .bb-wipe.is-in {
  transform: scaleX(1);
  transition: transform 0.5s var(--ease);
}
.demo--billboard .bb-wipe.is-out {
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform 0.46s var(--ease);
}
.demo--billboard .bb-wipe--violet { background: var(--violet); }
.demo--billboard .bb-wipe--amber { background: var(--amber-bright); }
.demo--billboard .bb-wipe--teal { background: var(--teal-bright); }

/* ---- muebles persistentes (z4, sobre cortes y wipe) ------------------------ */
.demo--billboard .bb-bug,
.demo--billboard .bb-year,
.demo--billboard .bb-count {
  position: absolute;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 1.9cqw;
  font-weight: 520;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.62);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.demo--billboard .bb-bug.is-on,
.demo--billboard .bb-year.is-on,
.demo--billboard .bb-count.is-on { opacity: 1; }
.demo--billboard .bb-bug {
  top: 3.4cqw;
  left: 3.8cqw;
  display: flex;
  align-items: center;
  gap: 1.3cqw;
}
.demo--billboard .bb-bug i { font-style: normal; } /* regla de la casa: sin italicas */
.demo--billboard .bb-bug__mark { width: 3.03cqw; height: auto; display: block; color: rgba(246, 245, 241, 0.62); } /* r10: 3.4 x 0.891 */
.demo--billboard .bb-year { top: 3.4cqw; right: 3.8cqw; }
.demo--billboard .bb-count {
  bottom: 3.6cqw;
  right: 3.8cqw;
  font-variant-numeric: tabular-nums;
}

/* linea de progreso del loop: track tenue + fill papel, lineal (la arma el JS) */
.demo--billboard .bb-progress {
  position: absolute;
  z-index: 4;
  left: 3.8cqw;
  right: 12cqw;
  bottom: 4.3cqw;
  height: 2px;
  background: rgba(246, 245, 241, 0.16);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.demo--billboard .bb-progress.is-on { opacity: 1; }
.demo--billboard .bb-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: rgba(246, 245, 241, 0.85);
}

/* ---- lineas con reveal: ventana clip fija, el texto sube adentro ----------- */
.demo--billboard .bb-line { display: block; clip-path: inset(-0.14em -0.32em); }
.demo--billboard .bb-line b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--paper);
}
.demo--billboard .bb-cut.is-on .bb-line b { animation: bb-rise 0.62s var(--ease-out) both; }

/* claims de dos lineas (beats 1 · 3 · 5): la segunda linea llega despues */
.demo--billboard .bb-cut--claim { gap: 0.6cqw; }
.demo--billboard .bb-cut--claim .bb-line b { font-size: 8.8cqw; }
.demo--billboard .bb-cut--claim.is-on .bb-line:nth-child(2) b { animation-delay: 0.2s; }

/* palabra acento por beat (el <i> dentro del claim) */
.demo--billboard .bb-line i { font-style: normal; }
.demo--billboard .bb-cut--find .bb-line i { color: var(--violet-bright); }
.demo--billboard .bb-cut--choose .bb-line i { color: var(--violet-bright); }
.demo--billboard .bb-cut--system .bb-line i { color: var(--teal-bright); }

/* los beats de color entran tapados por el wipe: sus lineas esperan un pelo */
.demo--billboard .bb-cut--choose.is-on .bb-line:nth-child(1) b,
.demo--billboard .bb-cut--system.is-on .bb-line:nth-child(1) b { animation-delay: 0.12s; }
.demo--billboard .bb-cut--choose.is-on .bb-line:nth-child(2) b,
.demo--billboard .bb-cut--system.is-on .bb-line:nth-child(2) b { animation-delay: 0.3s; }

/* ---- beat 2: la cifra gigante ---------------------------------------------- */
.demo--billboard .bb-big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22cqw;
  line-height: 0.92;
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
  color: var(--violet-bright);
}
.demo--billboard .bb-cut.is-on .bb-big { animation: bb-fade-up 0.55s var(--ease-out) both; }

.demo--billboard .bb-kicker {
  font-family: var(--font-mono);
  font-size: 2.4cqw;
  font-weight: 520;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.58);
  opacity: 0;
  transform: translateY(0.7em);
  transition: opacity 0.4s var(--ease-out), transform 0.45s var(--ease-out);
}
.demo--billboard .bb-kicker[hidden] { display: none; }
.demo--billboard .bb-kicker.is-on { opacity: 1; transform: none; }

/* ---- beat 4: $15M+ sobre ambar, tipografia en tinta ------------------------ */
.demo--billboard .bb-cut--leads { gap: 0.8cqw; }
.demo--billboard .bb-line--money b { font-size: 17.5cqw; color: var(--ink); line-height: 0.95; }
.demo--billboard .bb-cut--leads .bb-line--sub b { font-size: 5.2cqw; color: var(--ink); }
.demo--billboard .bb-cut--leads.is-on .bb-line:nth-child(1) b { animation-delay: 0.12s; }
.demo--billboard .bb-cut--leads.is-on .bb-line:nth-child(2) b { animation-delay: 0.32s; }
.demo--billboard .bb-cut--leads.is-on .bb-line:nth-child(3) b { animation-delay: 0.46s; }

/* ---- beat 6: flechas diagonales que se dibujan ------------------------------ */
.demo--billboard .bb-arrows {
  display: flex;
  align-items: flex-end;
  gap: 4cqw;
}
.demo--billboard .bb-arrow { width: 8.6cqw; display: block; }
.demo--billboard .bb-arrow--mid { width: 10.6cqw; margin-bottom: 2cqw; }
.demo--billboard .bb-arrow--high { width: 12.6cqw; margin-bottom: 4cqw; }
.demo--billboard .bb-arrow--violet { color: var(--violet-bright); }
.demo--billboard .bb-arrow--teal { color: var(--teal-bright); }
.demo--billboard .bb-arrow--amber { color: var(--amber-bright); }
.demo--billboard .bb-arrow svg { width: 100%; height: auto; display: block; }
.demo--billboard .bb-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.7s var(--ease-out);
}
.demo--billboard .bb-cut.is-on .bb-arrow path { stroke-dashoffset: 0; transition-delay: 0.2s; }
.demo--billboard .bb-cut.is-on .bb-arrow--mid path { transition-delay: 0.45s; }
.demo--billboard .bb-cut.is-on .bb-arrow--high path { transition-delay: 0.7s; }

/* la palabra y el kicker del beat 6 los prende el scheduler, no el corte */
.demo--billboard .bb-line--word { opacity: 0; }
.demo--billboard .bb-line--word[hidden] { display: none; }
.demo--billboard .bb-line--word b { font-size: 8cqw; }
.demo--billboard .bb-line--word.is-on { opacity: 1; }
.demo--billboard .bb-line--word.is-on b { animation: bb-rise 0.62s var(--ease-out) both; }

/* ---- beat 7: what about you? + la flor asomada ------------------------------ */
.demo--billboard .bb-cut--you { padding-right: 15cqw; } /* corre el texto: aire para la flor */
.demo--billboard .bb-you {
  display: flex;
  gap: 2.2cqw;
  clip-path: inset(-0.14em -0.32em);
}
.demo--billboard .bb-you b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 8.4cqw; /* deja aire a la flor asomada del borde derecho */
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--paper);
}
.demo--billboard .bb-you__accent { color: var(--violet-bright); }
.demo--billboard .bb-cut--you.is-on .bb-you b { animation: bb-rise 0.6s var(--ease-out) both; }
.demo--billboard .bb-cut--you.is-on .bb-you b:nth-child(2) { animation-delay: 0.11s; }
.demo--billboard .bb-cut--you.is-on .bb-you b:nth-child(3) { animation-delay: 0.22s; }

/* la flor se asoma por el borde derecho, a media altura: no pisa el contador
   ni la linea de progreso (muebles de abajo) */
.demo--billboard .bb-flower {
  position: absolute;
  right: -8cqw;
  top: 50%;
  /* r10: 21 x 0.891, el viewBox nuevo tiene menos aire lateral */
  width: 18.7cqw;
  color: var(--violet-bright);
  opacity: 0;
  transform: translate(45%, -50%) rotate(26deg);
  transition: opacity 0.5s var(--ease-out) 0.5s, transform 0.75s var(--ease-scene) 0.5s;
}
.demo--billboard .bb-cut.is-on .bb-flower { opacity: 1; transform: translate(0, -50%) rotate(12deg); }
.demo--billboard .bb-flower svg { width: 100%; height: auto; display: block; }

/* ---- beat 8: cierre flor + SPICA studio ------------------------------------- */
.demo--billboard .bb-cut--logo { gap: 2.6cqw; }

/* la flor del cierre: pop con giro corto, queda quieta */
.demo--billboard .bb-mark {
  width: 8cqw;
  color: var(--violet-bright);
  opacity: 0;
  transform: scale(0.4) rotate(-40deg);
  transition: opacity 0.5s var(--ease-out), transform 0.65s var(--ease-scene);
}
.demo--billboard .bb-mark[hidden] { display: none; }
.demo--billboard .bb-mark.is-on { opacity: 1; transform: none; }
.demo--billboard .bb-mark svg { width: 100%; height: auto; display: block; }

.demo--billboard .bb-logo { display: flex; gap: 0.6cqw; }
.demo--billboard .bb-logo[hidden] { display: none; }
.demo--billboard .bb-logo b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13.5cqw;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--paper);
  opacity: 0;
}
.demo--billboard .bb-logo.is-on b { animation: bb-drop 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.demo--billboard .bb-logo.is-on b:nth-child(2) { animation-delay: 0.09s; }
.demo--billboard .bb-logo.is-on b:nth-child(3) { animation-delay: 0.18s; }
.demo--billboard .bb-logo.is-on b:nth-child(4) { animation-delay: 0.27s; }
.demo--billboard .bb-logo.is-on b:nth-child(5) { animation-delay: 0.36s; }

.demo--billboard .bb-studio {
  font-family: var(--font-mono);
  font-size: 2.9cqw;
  font-weight: 520;
  letter-spacing: 0.5em;
  text-indent: 0.5em; /* compensa el tracking para centrar de verdad */
  text-transform: uppercase;
  color: var(--violet-bright);
  opacity: 0;
  transform: translateY(0.9em);
  transition: opacity 0.45s var(--ease-out), transform 0.5s var(--ease-out);
}
.demo--billboard .bb-studio[hidden] { display: none; }
.demo--billboard .bb-studio.is-on { opacity: 1; transform: none; }

/* en modo instant (?static / reduced-motion) el motor apaga animaciones:
   los estados .is-on ya componen el cierre completo sin transiciones */
.demo--billboard.is-instant .bb-logo b { opacity: 1; }
.demo--billboard.is-instant .bb-line--word { opacity: 1; }

/* ---- keyframes --------------------------------------------------------------- */
@keyframes bb-rise { from { transform: translateY(112%); } }
@keyframes bb-fade-up { from { transform: translateY(12%); opacity: 0; } }
@keyframes bb-drop {
  from { transform: translateY(-240%); opacity: 0; }
  38% { opacity: 1; }
  to { opacity: 1; }
}