/* La fila de sellos y la barra, como las pinta el PNG de la tarjeta.
 *
 * La cargan el panel (la vista previa) y el mostrador, con el mismo marcado
 * —lo arma web/comun/sellos.js—, asi que no pueden decir cosas distintas
 * entre si. Cada pantalla pone solo el tamaño, con sus tokens --sello-radio y
 * --barra-alto, y sellos.js pone los colores (--sello, --sello-pendiente,
 * --sello-tinta y la clase .con-resplandor) y el lado de lo que va dentro del
 * sello (--lado-del-icono, --lado-del-logo), que salen de las mismas reglas
 * que el PNG.
 *
 * Los numeros del material son los de src/wallet/lienzo.js y sellos.js, con
 * su nombre al lado: si cambia uno alla, cambia aca, o el telefono y la
 * pantalla dejan de parecerse. Igual que alla, todo se mide en radios del
 * sello —o en medias alturas de la barra, --s en los dos casos—, asi un sello
 * grande y uno chico llevan la misma luz.
 *
 * Hay UNA luz, arriba y un poco a la izquierda (LUZ, el vector (-0.38, -1)),
 * y de ella salen el canto, la sombra y el surco de la barra. Un efecto con su
 * propia luz descuadra el resto. */

.avance {
  margin: 1.25rem 0;

  /* El tamaño de los sellos depende de cuanto mide la tarjeta (ver --r). */
  container-type: inline-size;

  /* Los aros de la meta cumplida van DEBAJO de los sellos, como en el PNG,
   * que los pinta primero. Van con z-index negativo, y este contexto propio
   * evita que se vayan tambien debajo del fondo de la tarjeta. */
  isolation: isolate;

  /* El cuerpo de lo que esta puesto —el sello y el avance de la barra—:
   * aclara hacia arriba y oscurece hacia abajo, un 10 % en el borde (CUERPO)
   * siguiendo |v|^1.8 (PERFIL_DEL_CUERPO). Con pendiente cero en el centro, la
   * franja del medio queda en el color exacto del negocio, y un sello blanco
   * no muestra un pliegue justo donde empieza a oscurecer. */
  --cuerpo: linear-gradient(
    color-mix(in srgb, var(--sello), #fff 10%),
    color-mix(in srgb, var(--sello), #fff 6%) 12.5%,
    color-mix(in srgb, var(--sello), #fff 2.9%) 25%,
    color-mix(in srgb, var(--sello), #fff .8%) 37.5%,
    var(--sello) 50%,
    color-mix(in srgb, var(--sello), #000 .8%) 62.5%,
    color-mix(in srgb, var(--sello), #000 2.9%) 75%,
    color-mix(in srgb, var(--sello), #000 6%) 87.5%,
    color-mix(in srgb, var(--sello), #000 10%)
  );
}

/* ---------- Los sellos ---------- */

/* Las filas las decide filasDeSellos, la misma cuenta que el PNG: hasta seis
 * en una, de siete en adelante en dos. Cada fila va centrada por su cuenta y
 * con el mismo paso, asi una de abajo con uno menos queda al medio de la de
 * arriba. El aire entre filas es SEPARACION_ENTRE_FILAS, 32 px sobre radios
 * de 54 a 59.
 *
 * --r es el radio de verdad: el que pide la pantalla, o menos si la tarjeta
 * no da. Seis sellos con 0,6 radios de aire entre cada uno son 15 radios, y
 * con menos aire los aros de la meta se tocan: en un telefono de 320 el sello
 * del mostrador baja de 20 a 16,5 px en vez de quedar pegado al vecino. */
.sellos {
  --r: min(var(--sello-radio), 100cqi / 15);
  display: grid; row-gap: calc(var(--r) * .55);
}

/* Un radio entre dos sellos, que deja sitio a los dos aros de la meta, o lo
 * que quepa: seis sellos del mostrador no entran con un radio de aire en un
 * telefono de 375, y ahi bajan a 0,6. */
.sellos-fila {
  display: flex; justify-content: center;
  column-gap: min(
    var(--r),
    calc((100% - var(--columnas) * 2 * var(--r)) / max(1, var(--columnas) - 1))
  );
}

.sello {
  --s: var(--r);
  position: relative; flex: none;
  width: calc(var(--s) * 2); height: calc(var(--s) * 2);
  border-radius: 50%;
  display: grid; place-items: center;
}

/* Puesto: un disco con volumen (rellenoConLuz). El icono va del color de la
 * tarjeta, que es lo que se lee encima sea cual sea el sello.
 *
 * La sombra es la misma figura corrida lejos de la luz (CAIDA_DE_LA_SOMBRA,
 * .03 y .09), un poco mas chica (.04) y difuminada: DIFUSION_DE_LA_SOMBRA .20
 * hacia cada lado, que como desenfoque gaussiano es un radio de .21. Al 42 %
 * (OPACIDAD_DE_LA_SOMBRA). Sobre una tarjeta casi negra apenas se ve, y esta
 * bien: ahi el volumen lo pone el canto. */
.sello.puesto {
  color: var(--sello-tinta);
  background: var(--cuerpo);
  box-shadow: calc(var(--s) * .03) calc(var(--s) * .09) calc(var(--s) * .21) calc(var(--s) * -.04) rgb(0 0 0 / .42);
}

/* El canto: un bisel junto al borde, claro donde mira a la luz y oscuro
 * donde le da la espalda. Su intensidad sigue al coseno del angulo con la luz
 * —hasta 42 % de blanco (BRILLO_DEL_CANTO) y 30 % de negro (PENUMBRA)—, y eso
 * es el gradiente conico, que empieza en la direccion de LUZ: 20,8° a la
 * izquierda de arriba. La mascara lo deja en el borde, .14 radios
 * (ANCHO_DEL_CANTO), y lo apaga hacia adentro con la misma curva suave. */
.sello.puesto::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from -20.8deg,
    rgb(255 255 255 / .42), rgb(255 255 255 / .364) 30deg, rgb(255 255 255 / .21) 60deg,
    transparent 90deg,
    rgb(0 0 0 / .15) 120deg, rgb(0 0 0 / .26) 150deg, rgb(0 0 0 / .3) 180deg,
    rgb(0 0 0 / .26) 210deg, rgb(0 0 0 / .15) 240deg,
    transparent 270deg,
    rgb(255 255 255 / .21) 300deg, rgb(255 255 255 / .364) 330deg, rgb(255 255 255 / .42) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 86%, rgb(0 0 0 / .16) 89.5%,
    rgb(0 0 0 / .5) 93%, rgb(0 0 0 / .84) 96.5%, #000);
          mask: radial-gradient(closest-side, transparent 86%, rgb(0 0 0 / .16) 89.5%,
    rgb(0 0 0 / .5) 93%, rgb(0 0 0 / .84) 96.5%, #000);
}

/* Lo que va dentro del sello puesto, del tamaño que le da el PNG: en radios,
 * asi se achica junto con el sello cuando la tarjeta no da, y ninguna pantalla
 * pasa una medida suya. Las proporciones no estan escritas aca: son las de
 * src/wallet/disposicion.js, con las que el PNG dibuja los dos dentro de un
 * circulo de CIRCULO_DE_DENTRO radios, y sellos.js las pone en --lado-del-icono
 * y --lado-del-logo. Copiadas en esta hoja, cambiar un lado dejaba al telefono
 * y a la pantalla midiendo distinto sin que fallara nada.
 *
 * - el icono lleva su viewBox a PROPORCION_DEL_ICONO veces el radio de ese
 *   circulo
 * - el logo va en el cuadrado inscrito en ese circulo (PROPORCION_DEL_LOGO, la
 *   raiz de dos), ajustado sin deformar. El circulo lo circunscribe, asi que no
 *   le recorta nada y un logo cuadrado llega con sus esquinas. Recortarlo en
 *   circulo aca se las cortaba, y el telefono no
 *
 * Sin valor de reserva en el var(): seria la copia otra vez. El tope de 100 %
 * es para cuando falten las dos propiedades —un sellos.js de antes de ellas
 * que cargo con esta hoja—: sin su lado, el logo va a su tamaño natural, y uno
 * de 512 px taparia la tarjeta. */
.sello-icono { width: calc(var(--s) * var(--lado-del-icono)); height: calc(var(--s) * var(--lado-del-icono)); }
.sello-logo {
  width: calc(var(--s) * var(--lado-del-logo)); height: calc(var(--s) * var(--lado-del-logo));
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}

/* Pendiente: un aro de puntos redondos, como la linea perforada del carton
 * (aroDePuntos), y nada adentro. Cada punto mide .085 radios
 * (GROSOR_DE_LOS_PUNTOS) y el primero cae arriba, para que el aro quede
 * simetrico. En el PNG va uno cada 12 px, que con las metas de siete a doce
 * son entre 28 y 31 por vuelta: aca, 30.
 *
 * Son trazos de largo cero con la punta redonda, repartidos con pathLength, y
 * van en una mascara para que el color lo ponga el CSS: --sello-pendiente, a
 * medio camino entre la tarjeta y el sello. */
.sello.pendiente::before {
  content: ""; position: absolute; inset: 0;
  background: var(--sello-pendiente);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47.875' fill='none' stroke='%23000' stroke-width='4.25' stroke-linecap='round' stroke-dasharray='0 1' pathLength='30' transform='rotate(-90 50 50)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47.875' fill='none' stroke='%23000' stroke-width='4.25' stroke-linecap='round' stroke-dasharray='0 1' pathLength='30' transform='rotate(-90 50 50)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---------- La barra, para los negocios de puntos ---------- */

/* La pista es un surco del color de lo que falta: plana, y con la luz al
 * reves —oscura arriba, clara abajo— porque esta hundida (rellenoConLuz con
 * `hundida`: el brillo a la mitad, la penumbra por 1,2). El canto es
 * CANTO_DE_LA_BARRA, .22 medias alturas.
 *
 * Aca el canto va con sombras interiores y no con el gradiente conico de los
 * sellos: en el tramo recto el borde mira siempre arriba o abajo, y la sombra
 * sigue sola la curva de los extremos. Van corridas en la direccion de la
 * luz, y agrandadas lo mismo que difuminan para que no asome medio canto en
 * los lados que no le tocan. */
.barra {
  --s: calc(var(--barra-alto) / 2);
  position: relative;
  height: var(--barra-alto); border-radius: 999px;
  background: var(--sello-pendiente);
  box-shadow:
    inset calc(var(--s) * .16) calc(var(--s) * .23) calc(var(--s) * .12) calc(var(--s) * -.12) rgb(0 0 0 / .34),
    inset calc(var(--s) * -.16) calc(var(--s) * -.23) calc(var(--s) * .12) calc(var(--s) * -.12) rgb(255 255 255 / .2);
}

/* El avance es un relieve dentro del surco, con el cuerpo y el canto de un
 * sello, y su sombra cae sobre la pista: esa sombra es la que marca hasta
 * donde se llego. Nunca mas angosto que un extremo redondeado. */
.barra-avance {
  height: 100%; min-width: var(--barra-alto); border-radius: inherit;
  background: var(--cuerpo);
  box-shadow:
    calc(var(--s) * .03) calc(var(--s) * .09) calc(var(--s) * .21) calc(var(--s) * -.04) rgb(0 0 0 / .42),
    inset calc(var(--s) * .16) calc(var(--s) * .23) calc(var(--s) * .12) calc(var(--s) * -.12) rgb(255 255 255 / .39),
    inset calc(var(--s) * -.16) calc(var(--s) * -.23) calc(var(--s) * .12) calc(var(--s) * -.12) rgb(0 0 0 / .28);
  transition: width .3s;
}

/* ---------- La meta cumplida ---------- */

/* Un aro nitido del color del sello alrededor de cada uno, o de la barra: la
 * fila se enciende entera. Pegado, a .17 radios del borde hasta el centro del
 * trazo (SEPARACION_DEL_ARO) y de .05 de grueso (GROSOR_DEL_ARO), que a este
 * tamaño es un pixel. */
.sellos.completa .sello::after,
.barra.completa::after {
  --aro: max(1px, var(--s) * .05);
  content: ""; position: absolute; z-index: -1;
  inset: calc((var(--s) * .17 + var(--aro) / 2) * -1);
  border: var(--aro) solid var(--sello);
  border-radius: inherit;
}

/* El resplandor, solo si el sello es mas claro que la tarjeta: una luz
 * oscura sobre una tarjeta clara se ve como una mancha, y ahi queda el aro
 * solo. Arranca en 45 % junto al trazo (INTENSIDAD_DEL_RESPLANDOR) y se apaga
 * hacia los dos lados hasta .30 radios (ALCANCE_DEL_RESPLANDOR): el
 * desenfoque de .24 con el color al 90 % da esa misma curva. */
.con-resplandor .sellos.completa .sello::after,
.con-resplandor .barra.completa::after {
  --luz: color-mix(in srgb, var(--sello) 90%, transparent);
  box-shadow: 0 0 calc(var(--s) * .24) var(--luz), inset 0 0 calc(var(--s) * .24) var(--luz);
}