/* Collateral — marca animada.
   Estados: reposo (cerrada), .is-playing (abierta), .is-loading (bucle).
   Duracion alineada al token de transicion del sistema: 200ms. */

.collateral-mark {
  --mark-size: 40px;
  --mark-color: #F5F4EF;
  --mark-open: 11%;          /* desplazamiento de cada esquina */
  --mark-dur: 200ms;
  --mark-ease: cubic-bezier(0.2, 0, 0, 1);
  /* Valores fijos delante: sin variables CSS (webOS 3) la marca no se queda en 0×0. */
  width: 40px;
  height: 40px;
  width: var(--mark-size);
  height: var(--mark-size);
  display: inline-block;
  position: relative;
  vertical-align: middle;
  color: #F5F4EF;
  color: var(--mark-color);
}

/* La marca es HTML, no SVG: antes de Chromium 64 (webOS 4 y 5) un translate en porcentaje
   sobre un <g> no se resolvía y la animación se quedaba quieta. En un elemento HTML el
   porcentaje es del propio elemento, que ocupa la marca entera: 11 % es lo mismo que en
   collateral-identidad/animacion. Geometría en % del viewBox 200×200 original. */
.collateral-mark .c-tl,
.collateral-mark .c-br {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.2, 0, 0, 1);
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.collateral-mark b { position: absolute; display: block; background: currentColor; }
.collateral-mark .c-tl .c-h { left: 10%; top: 10%; width: 38%; height: 13%; }
.collateral-mark .c-tl .c-v { left: 10%; top: 10%; width: 13%; height: 38%; }
.collateral-mark .c-br .c-h { left: 52%; top: 77%; width: 38%; height: 13%; }
.collateral-mark .c-br .c-v { left: 77%; top: 52%; width: 13%; height: 38%; }

.collateral-mark.is-playing { --mark-color: #FF6257; color: #FF6257; }
.collateral-mark.is-playing .c-tl { -webkit-transform: translate(-11%, -11%); transform: translate(-11%, -11%); }
.collateral-mark.is-playing .c-br { -webkit-transform: translate(11%, 11%); transform: translate(11%, 11%); }

.collateral-mark.is-loading .c-tl { -webkit-animation: collateral-tl 2.4s cubic-bezier(0.2, 0, 0, 1) infinite; animation: collateral-tl 2.4s cubic-bezier(0.2, 0, 0, 1) infinite; }
.collateral-mark.is-loading .c-br { -webkit-animation: collateral-br 2.4s cubic-bezier(0.2, 0, 0, 1) infinite; animation: collateral-br 2.4s cubic-bezier(0.2, 0, 0, 1) infinite; }

@-webkit-keyframes collateral-tl {
  0%, 100% { -webkit-transform: translate(0, 0); }
  18%, 55% { -webkit-transform: translate(-11%, -11%); }
  73%      { -webkit-transform: translate(0, 0); }
}
@-webkit-keyframes collateral-br {
  0%, 100% { -webkit-transform: translate(0, 0); }
  18%, 55% { -webkit-transform: translate(11%, 11%); }
  73%      { -webkit-transform: translate(0, 0); }
}
@keyframes collateral-tl {
  0%, 100% { transform: translate(0, 0); }
  18%, 55% { transform: translate(-11%, -11%); }
  73%      { transform: translate(0, 0); }
}
@keyframes collateral-br {
  0%, 100% { transform: translate(0, 0); }
  18%, 55% { transform: translate(11%, 11%); }
  73%      { transform: translate(0, 0); }
}

/* El sistema manda: sin movimiento, solo cambia el color. */
@media (prefers-reduced-motion: reduce) {
  .collateral-mark .c-tl,
  .collateral-mark .c-br { -webkit-transition: none; transition: none; -webkit-animation: none; animation: none; }
  .collateral-mark.is-playing .c-tl,
  .collateral-mark.is-playing .c-br { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}