/* Bajo el arco: la escena de un match. La arma static/js/bajo-el-arco.js, y
   ahí está contado qué es cada pieza.

   Solo colores de la guía de marca: cobre, cobre claro, crema, tinta y
   salvia para lo que comparten. Nada de azul ni de neón.

   El riel apagado es un solo trazo de color sólido. Con transparencia, las
   puntas que se cruzaban bajo la ranura dejaban una mancha más clara. La
   ranura es del mismo material que el riel; lo que se prende es su boca,
   cuando sale algo por ella. Cuando la luz llega arriba, se prende entera. */
.ba-escena {
    --ba-cobre: #B86A4F;
    --ba-cobre-claro: #D78A63;
    --ba-apagado: #33201a; /* el cobre al 22 % sobre negro sala, ya mezclado */
    --ba-crema: #F1E8DB;
    --ba-tinta: #1F0F07;
    --ba-salvia-luz: #A9D3C0;
    --ba-sala: #090909;
}

.ba-escena svg { display: block; width: 100%; height: auto; overflow: visible; }

.ba-escena .ba-riel { fill: none; stroke: var(--ba-apagado); stroke-width: 5; stroke-linecap: round; }
.ba-escena .ba-arco { fill: none; stroke: var(--ba-cobre); stroke-width: 5; stroke-linecap: round; }
.ba-escena .ba-ranura { fill: var(--ba-apagado); transition: fill 0.3s ease; }
.ba-escena .ba-ranura-boca { fill: var(--ba-sala); transition: fill 0.35s ease; }
.ba-escena .is-viva .ba-ranura-boca { fill: var(--ba-crema); transition-duration: 0.06s; }
.ba-escena .is-logrado .ba-arco { stroke: var(--ba-cobre-claro); }
.ba-escena .is-logrado .ba-ranura { fill: var(--ba-cobre-claro); }
.ba-escena .is-logrado .ba-ranura-boca { fill: var(--ba-crema); }

.ba-escena .ba-cometa { fill: var(--ba-crema); }
.ba-escena .ba-carga { fill: var(--ba-cobre-claro); }
.ba-escena .ba-chispa { fill: var(--ba-crema); }
.ba-escena .ba-chispa:nth-child(odd) { fill: var(--ba-cobre-claro); }

.ba-escena .ba-surcos-borde {
    fill: none;
    stroke: rgba(241, 232, 219, 0.12);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.ba-escena .ba-brillo {
    fill: none;
    stroke: rgba(241, 232, 219, 0.2);
    stroke-width: 1.4;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center;
    animation: ba-girar 2.8s linear infinite;
}

.ba-escena .ba-brillo--lento { stroke: rgba(241, 232, 219, 0.1); animation-duration: 4.4s; }

@keyframes ba-girar { to { transform: rotate(360deg); } }

.ba-escena .ba-etiqueta--tu { fill: var(--ba-cobre); }
.ba-escena .ba-etiqueta--otro { fill: var(--ba-crema); }

.ba-escena .ba-inicial {
    fill: var(--ba-tinta);
    font: 700 11px "Sora", sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
}

.ba-escena .ba-inicial--larga { font-size: 8.5px; }

/* Con foto de perfil, un borde fino del color de cada uno. */
.ba-escena .ba-foto-borde { fill: none; stroke-width: 1.6; }
.ba-escena .ba-foto-borde--tu { stroke: var(--ba-cobre); }
.ba-escena .ba-foto-borde--otro { stroke: var(--ba-crema); }

.ba-escena .ba-lente-borde {
    fill: none;
    stroke: var(--ba-salvia-luz);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

.ba-escena .ba-pulso,
.ba-escena .ba-onda { fill: none; stroke: var(--ba-salvia-luz); }

.ba-escena .ba-funda-borde {
    fill: none;
    stroke: rgba(241, 232, 219, 0.28);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.ba-escena .ba-reflejo { fill: var(--ba-crema); animation: ba-titilar 2.2s ease-in-out infinite alternate; }
.ba-escena .ba-reflejo:nth-child(3n) { fill: var(--ba-cobre-claro); animation-duration: 1.7s; }
.ba-escena .ba-reflejo:nth-child(4n) { animation-delay: -1.1s; }

@keyframes ba-titilar { from { opacity: 0.15; } to { opacity: 0.9; } }

.ba-escena .ba-reflejos { animation: ba-derivar 9s ease-in-out infinite alternate; }

@keyframes ba-derivar { to { transform: translate(14px, 6px); } }

.ba-escena .ba-bola-hilo { stroke: rgba(241, 232, 219, 0.35); stroke-width: 1; }
.ba-escena .ba-faceta { fill: none; stroke: rgba(9, 9, 9, 0.35); stroke-width: 0.6; }

/* Lo que se escribe debajo: la canción que acaba de caer. */
.ba-tira {
    margin: 0.25rem 0 0;
    min-height: 1.3em;
    max-width: 100%;
    overflow: hidden;
    color: rgba(241, 232, 219, 0.38);
    font: 600 12px/1.3 "Manrope", sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ba-tira b { color: rgba(241, 232, 219, 0.64); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .ba-escena .ba-brillo,
    .ba-escena .ba-reflejo,
    .ba-escena .ba-reflejos { animation: none; }
}