/* =========================================================
   MANIFA.FUN · Motor de Multitud y Pancartas (SVG CSS)
   Animaciones 60 FPS en CSS nativo
   ========================================================= */

.crowd-viewport {
  flex: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--paper);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: var(--theme-transition);
}

.crowd-svg {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  touch-action: pan-x;
}

/* Carriles de marcha con efecto Parallax */
.crowd-lane {
  animation: march-forward 50s linear infinite;
  transform-origin: bottom center;
}

.lane-0 {
  animation-duration: 75s; /* Fondo más lento */
  color: var(--lane-back);
}

.lane-1 {
  animation-duration: 55s; /* Medio */
  color: var(--lane-mid);
}

.lane-2 {
  animation-duration: 40s; /* Frente más rápido */
  color: var(--lane-front);
}

@keyframes march-forward {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333333%); }
}

/* Balanceo orgánico individual de manifestantes */
.person {
  animation: person-sway 1.3s ease-in-out infinite alternate;
  transform-origin: bottom center;
}

@keyframes person-sway {
  0% { transform: rotate(-1.5deg) translateY(0); }
  100% { transform: rotate(1.5deg) translateY(-2px); }
}

/* Pancartas: flotación / balanceo en las manos */
.banner-group {
  cursor: pointer;
  transform-origin: bottom center;
  animation: banner-bob 1.6s ease-in-out infinite alternate;
  transition: transform 0.15s ease;
}

.banner-group:hover {
  transform: scale(1.06) rotate(1deg);
}

@keyframes banner-bob {
  0% { transform: translateY(0) rotate(-1deg); }
  100% { transform: translateY(-4px) rotate(1deg); }
}

.banner-rect {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3px;
}

.banner-text {
  font-family: var(--font-display);
  font-size: 13px;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: middle;
  text-transform: uppercase;
}

.banner-pole {
  stroke: var(--ink);
  stroke-width: 4px;
  stroke-linecap: square;
}

.banner-badge {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 10px;
  fill: var(--ink);
  text-anchor: end;
}

/* Animación de entrada lateral al PARTICIPAR */
.person-enter {
  animation: enter-side 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes enter-side {
  0% { transform: translateX(-100px) scale(0.7); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* Animación de ascenso para nueva pancarta */
.banner-rise {
  animation: rise-into-crowd 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes rise-into-crowd {
  0% { transform: translateY(120px) scale(1.4); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Estado colectivo: +1 MANOS (Alzar brazos) */
.hands-up .person-arms {
  transform: translateY(-8px) scaleY(1.2);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Desactivar animaciones para accesibilidad reducida */
@media (prefers-reduced-motion: reduce) {
  .crowd-lane, .person, .banner-group {
    animation: none !important;
  }
}