/* ==========================================================================
   Dividir un pedido — el guion
   ==========================================================================

   Solo los TIEMPOS de esta escena. El aspecto esta en mockups/_base.css.

   Los keyframes llevan prefijo `dv-` (no `mk-`) porque los keyframes NO
   tienen ambito en CSS: si otro mockup definiera un `mk-traza` distinto,
   el ultimo cargado ganaria y romperia este en silencio. Cada escena usa
   el suyo: `dv-` dividir, `ag-` agrupar, etc.

   Las clases si son `mk-`: el diseno se comparte, el guion no.

   Regla de oro: cada efecto va DESPUES de su pulsacion. Si el raton llega
   a la casilla en el 19%, la casilla se marca en el 23.5%. Un efecto que
   ocurre antes de su clic se lee como que la animacion falla.

      0-20%   El pedido llega abierto y se marcan tres articulos
     20-40%   Se marcan tres y se pulsa Dividir
     40-52%   Se trazan las flechas y nacen los dos pedidos
     52-97%   Transportista y etiqueta en cada uno
     97-99%   Todo se apaga A LA VEZ y vuelve a empezar
   ========================================================================== */

@keyframes dv-late { 50% { transform: scale(1.6); opacity: .6; } }
@keyframes dv-traza {
  0%, 36%  { stroke-dashoffset: var(--largo, 300); opacity: 0; }
  37%      { stroke-dashoffset: var(--largo, 300); opacity: 1; }
  44%      { stroke-dashoffset: 0; opacity: 1; }
  97%      { stroke-dashoffset: 0; opacity: 1; }
  99%,100% { stroke-dashoffset: 0; opacity: 0; }
}
/* La B entra despues que la A pero se apaga CON ella: con un delay comun
   quedaba fuera de compas y seguia visible cuando todo lo demas ya se
   habia ido. */
@keyframes dv-traza-b {
  0%, 39%  { stroke-dashoffset: var(--largo, 300); opacity: 0; }
  40%      { stroke-dashoffset: var(--largo, 300); opacity: 1; }
  47%      { stroke-dashoffset: 0; opacity: 1; }
  97%      { stroke-dashoffset: 0; opacity: 1; }
  99%,100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes dv-punta-sale {
  0%, 43%  { opacity: 0; transform: scale(.4); }
  46%      { opacity: 1; transform: scale(1); }
  97%      { opacity: 1; transform: scale(1); }
  99%,100% { opacity: 0; transform: scale(1); }
}
@keyframes dv-punta-sale-b {
  0%, 46%  { opacity: 0; transform: scale(.4); }
  49%      { opacity: 1; transform: scale(1); }
  97%      { opacity: 1; transform: scale(1); }
  99%,100% { opacity: 0; transform: scale(1); }
}
/* Sin `transform`: con el, el pedido se queda en una capa compuesta durante
   todo el ciclo y su texto se rasteriza medio pixel desplazado. La entrada y
   la salida se resuelven solo con opacidad, que no necesita capa. */
@keyframes dv-origen-vive {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  97%  { opacity: 1; }
  99%, 100% { opacity: 0; }
}
/* La flecha nace girada: el pedido ya esta abierto, asi que apuntar hacia
   abajo («pulsa para abrir») seria mentir. */
@keyframes dv-chevron {
  0%, 100% { transform: rotate(180deg); }
}
/* Solo opacidad, sin `transform`: un scale de entrada deja el boton en su
   propia capa durante toda la animacion (o sea, siempre) y su texto se
   rasteriza borroso al caer en posicion subpixel. */
/* El boton aparece al marcar el SEGUNDO articulo (15%): con uno solo no hay
   nada que dividir, pero en cuanto hay dos ya tiene sentido. Antes salia al
   30%, cuando los tres estaban marcados hacia rato, y parecia que llegaba
   tarde a su propia escena. */
@keyframes dv-boton-vive {
  0%, 15%  { opacity: 0; }
  18%      { opacity: 1; }
  97%      { opacity: 1; }
  99%,100% { opacity: 0; }
}
@keyframes dv-clic {
  0%, 34% { opacity: 0; transform: scale(.92); }
  35.5%   { opacity: .9; transform: scale(1); }
  39%     { opacity: 0; transform: scale(1.3); }
  100%    { opacity: 0; }
}
/* Ya no se despliega: nace abierta. Se conserva el keyframe para no tener
   que tocar las conexiones de abajo, pero sin movimiento. */
@keyframes dv-despliega {
  0%, 100% { max-height: 340px; padding-top: .45rem; padding-bottom: .45rem; }
}
@keyframes dv-fila-entra {
  0%, 100% { opacity: 1; }
}
@keyframes dv-fila-m1 { 0%, 12% { border-color: var(--linea); background: #fff; } 14%, 100% { border-color: #cdc9f7; background: #f6f5ff; } }
@keyframes dv-fila-m2 { 0%, 15% { border-color: var(--linea); background: #fff; } 17%, 100% { border-color: #cdc9f7; background: #f6f5ff; } }
@keyframes dv-fila-m3 { 0%, 18% { border-color: var(--linea); background: #fff; } 20%, 100% { border-color: #cdc9f7; background: #f6f5ff; } }
@keyframes dv-fila-queda {
  0%, 25% { border-color: var(--linea); background: #fff; }
  29%, 100% { border-color: var(--ambar-borde); background: var(--ambar-suave); }
}
@keyframes dv-marca-1 { 0%, 12% { border-color: #c7c5d9; background: #fff; scale: 1; } 13% { border-color: var(--violeta); background: var(--violeta); scale: 1.25; } 15%, 100% { border-color: var(--violeta); background: var(--violeta); scale: 1; } }
@keyframes dv-marca-2 { 0%, 15% { border-color: #c7c5d9; background: #fff; scale: 1; } 16% { border-color: var(--violeta); background: var(--violeta); scale: 1.25; } 18%, 100% { border-color: var(--violeta); background: var(--violeta); scale: 1; } }
@keyframes dv-marca-3 { 0%, 18% { border-color: #c7c5d9; background: #fff; scale: 1; } 19% { border-color: var(--violeta); background: var(--violeta); scale: 1.25; } 21%, 100% { border-color: var(--violeta); background: var(--violeta); scale: 1; } }
@keyframes dv-tick-1 { 0%, 12% { opacity: 0; } 13%, 100% { opacity: 1; } }
@keyframes dv-tick-2 { 0%, 15% { opacity: 0; } 16%, 100% { opacity: 1; } }
@keyframes dv-tick-3 { 0%, 18% { opacity: 0; } 19%, 100% { opacity: 1; } }
@keyframes dv-destino-sale {
  0%, 45% { opacity: 0; }
  49%     { opacity: 1; }
  97%     { opacity: 1; }
  99%,100%{ opacity: 0; }
}
@keyframes dv-aviso-vive { 0%, 57% { opacity: 1; } 60%, 100% { opacity: 0; position: absolute; } }
@keyframes dv-nuevo-sale {
  0%, 44% { opacity: 0; }
  51%     { opacity: 1; }
  97%     { opacity: 1; }
  99%,100%{ opacity: 0; }
}
@keyframes dv-nuevo-sale-b {
  0%, 47% { opacity: 0; }
  54%     { opacity: 1; }
  97%     { opacity: 1; }
  99%,100%{ opacity: 0; }
}
@keyframes dv-encima-a { 0% { z-index: 5; } 52% { z-index: 30; } 65% { z-index: 5; } 100% { z-index: 5; } }
@keyframes dv-encima-b { 0% { z-index: 4; } 65% { z-index: 30; } 100% { z-index: 30; } }
@keyframes dv-cuenta-sale { 0%, 52% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes dv-cuenta { 0%, 100% { opacity: 1; } }
@keyframes dv-gira { to { transform: rotate(360deg); } }
@keyframes dv-courier-lleno {
  0%, 59%  { border-style: dashed; border-color: var(--linea); background: var(--papel); }
  61%,100% { border-style: solid; border-color: var(--verde-borde); background: var(--verde-suave); }
}
@keyframes dv-courier-lleno-b {
  0%, 72%  { border-style: dashed; border-color: var(--linea); background: var(--papel); }
  74%,100% { border-style: solid; border-color: var(--verde-borde); background: var(--verde-suave); }
}
@keyframes dv-vacio   { 0%, 59% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes dv-vacio-b { 0%, 72% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes dv-elegido   { 0%, 59% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes dv-elegido-b { 0%, 72% { opacity: 0; } 73%, 100% { opacity: 1; } }
@keyframes dv-despl-a {
  0%, 54%  { opacity: 0; }
  56%      { opacity: 1; }
  59%      { opacity: 1; }
  61%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes dv-despl-b {
  0%, 67%  { opacity: 0; }
  69%      { opacity: 1; }
  72%      { opacity: 1; }
  74%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes dv-opcion-a { 0%, 56.5% { background: transparent; } 58% { background: #f4f2ff; } 60.5% { background: transparent; } 100% { background: transparent; } }
@keyframes dv-opcion-b { 0%, 69.5% { background: transparent; } 71% { background: #fff7ed; } 73.5% { background: transparent; } 100% { background: transparent; } }
@keyframes dv-etiq-a {
  0%, 61% { opacity: 0; }
  65%     { opacity: 1; }
  97%     { opacity: 1; }
  99%,100%{ opacity: 0; }
}
@keyframes dv-etiq-b {
  0%, 74% { opacity: 0; }
  78%     { opacity: 1; }
  97%     { opacity: 1; }
  99%,100%{ opacity: 0; }
}
@keyframes dv-raton-viaje {
  0%,  2%   { opacity: 0; translate: var(--r0x) var(--r0y); animation-timing-function: linear; }
  4%        { opacity: 1; translate: var(--r0x) var(--r0y); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }

  /* Directo a marcar: el pedido ya esta abierto. Cada pulsacion, justo antes
     de que su casilla se marque (12%, 15% y 18%). */
  10%       { opacity: 1; translate: var(--r2x) var(--r2y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  11%       { opacity: 1; translate: var(--r2x) var(--r2y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  12.5%     { opacity: 1; translate: var(--r2x) var(--r2y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  13.5%     { opacity: 1; translate: var(--r3x) var(--r3y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  14.5%     { opacity: 1; translate: var(--r3x) var(--r3y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  15.5%     { opacity: 1; translate: var(--r3x) var(--r3y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  16.5%     { opacity: 1; translate: var(--r4x) var(--r4y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  17.5%     { opacity: 1; translate: var(--r4x) var(--r4y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  18.5%     { opacity: 1; translate: var(--r4x) var(--r4y); scale: 1; animation-timing-function: linear; }

  /* Al boton Dividir.

     Antes este tramo iba del 18,5% al 33%: CATORCE puntos y medio para un
     solo desplazamiento, asi que el raton cruzaba la pantalla a camara
     lenta. En agrupar el mismo salto se hace en 4,5 puntos y por eso alli
     se ve natural.

     Ahora va en 4,5 tambien, y el tiempo que sobra se gasta QUIETO al
     final. Una persona no se desplaza despacio: se para, mira, y va. */
  23%       { opacity: 1; translate: var(--r4x) var(--r4y); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  27.5%     { opacity: 1; translate: var(--r6x) var(--r6y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  29%       { opacity: 1; translate: var(--r6x) var(--r6y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  30.5%     { opacity: 1; translate: var(--r6x) var(--r6y); scale: 1; animation-timing-function: linear; }
  40%       { opacity: 0; translate: var(--r6x) var(--r6y); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }

  49%       { opacity: 0; translate: var(--r7x) var(--r7y); animation-timing-function: linear; }
  51%       { opacity: 1; translate: var(--r7x) var(--r7y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  52.5%     { opacity: 1; translate: var(--r7x) var(--r7y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  54%       { opacity: 1; translate: var(--r7x) var(--r7y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  56%       { opacity: 1; translate: var(--r8x) var(--r8y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  57%       { opacity: 1; translate: var(--r8x) var(--r8y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  58.5%     { opacity: 1; translate: var(--r8x) var(--r8y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }

  64%       { opacity: 1; translate: var(--r9x) var(--r9y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  65%       { opacity: 1; translate: var(--r9x) var(--r9y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  66.5%     { opacity: 1; translate: var(--r9x) var(--r9y); scale: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  69%       { opacity: 1; translate: var(--r10x) var(--r10y); animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  70%       { opacity: 1; translate: var(--r10x) var(--r10y); scale: .78; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  71.5%     { opacity: 1; translate: var(--r10x) var(--r10y); scale: 1; animation-timing-function: linear; }
  90%       { opacity: 1; translate: var(--r10x) var(--r10y); animation-timing-function: linear; }
  97%       { opacity: 1; translate: var(--r10x) var(--r10y); animation-timing-function: linear; }
  99%, 100% { opacity: 0; translate: var(--r10x) var(--r10y); }
}

/* Que fila usa que keyframe. Estaba en la base, que es compartida, y por
   eso las casillas de agrupar acababan usando los keyframes de dividir. */
.dv-seccion .mk-fila:nth-child(1) .mk-casilla { animation-name: dv-marca-1; }
.dv-seccion .mk-fila:nth-child(2) .mk-casilla { animation-name: dv-marca-2; }
.dv-seccion .mk-fila:nth-child(3) .mk-casilla { animation-name: dv-marca-3; }
.dv-seccion .mk-fila:nth-child(1) .mk-casilla svg { animation-name: dv-tick-1; }
.dv-seccion .mk-fila:nth-child(2) .mk-casilla svg { animation-name: dv-tick-2; }
.dv-seccion .mk-fila:nth-child(3) .mk-casilla svg { animation-name: dv-tick-3; }
.dv-seccion .mk-fila:nth-child(2) { animation-name: dv-fila-entra, dv-fila-m2; }
.dv-seccion .mk-fila:nth-child(3) { animation-name: dv-fila-entra, dv-fila-m3; }