/* Las rayas de velocidad con intensidad (src/view/fx-velocidad.js, lineas()). Se carga después de style.css y le gana a #lines.
   Variables que pone el JS: --vw grosor de cada raya, --vh dónde empiezan (más adentro = más largas), --vc color, --vg brillo de los bordes.
   El giro, el estirón y la opacidad también los pone el JS (inline), por eso se apaga la animación vieja. */
#lines {
  --vw: .6deg; --vh: 38%; --vc: 255, 255, 255; --vg: 0;
  inset: -14%; animation: none; will-change: transform, opacity; transform-origin: 50% 46%;
  background:
    /* la sombra azul de las rayas: sin ella, el blanco se pierde en el cielo y en las paredes claras */
    repeating-conic-gradient(from 0deg at 50% 46%, rgba(40, 50, 140, 0) 0deg 4.4deg, rgba(40, 50, 140, .6) 4.9deg calc(5.5deg + var(--vw)), rgba(40, 50, 140, 0) calc(6.1deg + var(--vw)) 11deg),
    /* rayas largas y gruesas */
    repeating-conic-gradient(from 0deg at 50% 46%, rgba(var(--vc), 0) 0deg 4.9deg, rgba(var(--vc), 1) 5.2deg calc(5.2deg + var(--vw)), rgba(var(--vc), 0) calc(5.6deg + var(--vw)) 11deg),
    /* rayas más finas y desparejas: otro ritmo, para que no se vea un abanico perfecto */
    repeating-conic-gradient(from 3deg at 50% 46%, rgba(var(--vc), 0) 0deg 6.6deg, rgba(var(--vc), .55) 6.8deg calc(6.8deg + var(--vw) * .55), rgba(var(--vc), 0) calc(7.1deg + var(--vw) * .55) 17deg);
  -webkit-mask-image: radial-gradient(circle at 50% 46%, transparent 0, transparent var(--vh), #000 82%);
  mask-image: radial-gradient(circle at 50% 46%, transparent 0, transparent var(--vh), #000 82%);
}
/* Los bordes de la pantalla se encienden y se ven "curvados", como cuando el mundo se estira hacia vos. */
#lines::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, rgba(var(--vc), 0) 58%, rgba(var(--vc), calc(var(--vg) * .55)) 88%, rgba(var(--vc), var(--vg)) 100%);
}