/**
 * 2026 ALGO-FACTORY.COM — aflivecovers, scène « Colonnes supplémentaires ».
 * Racine : .afl-oc ; animations : afl-oc-*. Durée et image fixe : scene.json.
 *
 * Déroulé (cycle de 10 s) : clic sur « Ajouter des colonnes » (18 %), Transporteur coché (29 %),
 * Groupe client coché (38 %), les deux colonnes entrent (44-54 %), filtre Groupe = Grossiste
 * (61-65 %), les commandes des autres groupes sortent et la liste se resserre (67-78 %),
 * notification (77-81 %). Résultat lisible jusqu'à 90 %, puis afl-cycle.
 */
.afl-oc{
  position:absolute;inset:0;
  font-size:3.1cqw;
  background:linear-gradient(180deg,#f7f9fc,#eef2f8);
  animation:afl-cycle var(--afl-dur) linear infinite;
}

/* ------------------------------------------------------------ en-tête */
.afl-oc .afl-oc__line--1{width:10cqw}
.afl-oc .afl-oc__line--2{width:6cqw}
.afl-oc__counts{display:inline-grid;margin-left:auto;justify-items:end}
.afl-oc__count{grid-area:1/1}
.afl-oc__count--all{animation:afl-oc-all var(--afl-dur) linear infinite}
.afl-oc__count--hit{opacity:0;animation:afl-oc-hit var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite}

/* ------------------------------------------------------------ la liste */
.afl-oc__table{
  position:absolute;left:4cqw;right:4cqw;top:13cqw;height:45.2cqw;
  overflow:hidden;background:#fff;
  border:1px solid var(--afl-ink-08);border-radius:1.6cqw;
  box-shadow:0 1.2cqw 3cqw -2cqw rgba(7,7,49,.25);
}
.afl-oc__row{
  position:absolute;left:0;right:0;height:8.4cqw;
  display:grid;grid-template-columns:8cqw 17cqw 12cqw 24cqw 23cqw;column-gap:1cqw;align-items:center;
  padding:0 2cqw;
  font-size:2.3cqw;white-space:nowrap;
  background:#fff;border-bottom:1px solid var(--afl-ink-08);
}
.afl-oc__row--head{
  top:0;height:6cqw;
  font-size:1.9cqw;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--afl-ink-60);
  background:var(--afl-ink-05);
}
.afl-oc__row--filter{top:6cqw;height:5.6cqw}
.afl-oc__row--1{top:11.6cqw;animation:afl-oc-out var(--afl-dur) linear infinite}
.afl-oc__row--2{top:20cqw;animation:afl-oc-up1 var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite}
.afl-oc__row--3{top:28.4cqw;animation:afl-oc-out var(--afl-dur) linear infinite}
.afl-oc__row--4{top:36.8cqw;animation:afl-oc-up2 var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite}
.afl-oc__row b{font-weight:700}
.afl-oc__id{font-weight:600;color:var(--afl-primary)}
.afl-oc__muted{color:var(--afl-ink-60)}
.afl-oc .afl-oc__row .afl-ui-pill{font-size:1.9cqw;padding:.6cqw 1.6cqw}

/* filtres de colonne */
.afl-oc__in{
  display:block;height:3.2cqw;
  border:1px solid var(--afl-ink-14);border-radius:.6cqw;background:#fff;
}
.afl-oc__sel{
  position:relative;display:flex;align-items:center;height:3.2cqw;padding:0 1.2cqw;
  font-size:1.9cqw;font-weight:600;color:var(--afl-ink-60);
  border:1px solid var(--afl-ink-14);border-radius:.6cqw;background:#fff;
  animation:afl-oc-sel var(--afl-dur) linear infinite;
}
.afl-oc__sel-all{animation:afl-oc-sel-all var(--afl-dur) linear infinite}
.afl-oc__sel-hit{
  position:absolute;left:1.2cqw;top:50%;margin-top:-1.2cqw;line-height:2.4cqw;
  color:var(--afl-primary);opacity:0;
  animation:afl-oc-sel-hit var(--afl-dur) linear infinite;
}
.afl-oc__caret{position:absolute;right:.8cqw;top:50%;width:1.8cqw;height:1.8cqw;margin-top:-.9cqw}

/* les colonnes ajoutées par le module */
.afl-oc__c4{opacity:0;animation:afl-oc-col4 var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite}
.afl-oc__c5{opacity:0;animation:afl-oc-col5 var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite}

/* --------------------------------------------- bouton et menu des colonnes */
.afl-oc__add{
  position:absolute;z-index:6;left:46cqw;top:14cqw;height:4cqw;
  display:inline-flex;align-items:center;gap:1cqw;padding:0 1.8cqw;white-space:nowrap;
  font-size:2.1cqw;font-weight:700;color:var(--afl-primary);
  background:rgba(2,114,234,.07);border:1px dashed var(--afl-primary);border-radius:1cqw;
  animation:afl-oc-add var(--afl-dur) linear infinite;
}
.afl-oc__add svg{width:2.2cqw;height:2.2cqw}
.afl-oc__menu{
  position:absolute;z-index:10;left:46cqw;top:19.6cqw;width:38cqw;padding:1.2cqw 0;
  background:#fff;border:1px solid var(--afl-ink-08);border-radius:1.4cqw;
  box-shadow:0 2cqw 4cqw -1.6cqw rgba(7,7,49,.4);
  opacity:0;
  animation:afl-oc-menu var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite;
}
.afl-oc__item{
  display:flex;align-items:center;gap:1.4cqw;height:5.6cqw;padding:0 1.4cqw;white-space:nowrap;
  font-size:2.1cqw;font-weight:600;
}
.afl-oc__box{
  flex:none;display:flex;align-items:center;justify-content:center;width:2.6cqw;height:2.6cqw;
  border:.3cqw solid var(--afl-ink-40);border-radius:.6cqw;background:#fff;
}
.afl-oc__box svg{width:2cqw;height:2cqw}
.afl-oc__box--1{animation:afl-oc-box1 var(--afl-dur) linear infinite}
.afl-oc__box--2{animation:afl-oc-box2 var(--afl-dur) linear infinite}

/* -------------------------------------------------- notification, pointeur */
.afl-oc__toast{
  left:6cqw;top:62cqw;color:var(--afl-ink);
  animation:afl-oc-toast var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite;
}
.afl-oc__toast svg{width:2.4cqw;height:2.4cqw;color:var(--afl-success)}
.afl-oc__cursor{
  transform:translate(71.2cqw,63.6cqw);
  animation:afl-oc-cursor var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite;
}

/* ------------------------------------------------------------ séquence */
@keyframes afl-oc-cursor{ /* repos, bouton, Transporteur, Groupe client, filtre, sortie */
  0%,8%{transform:translate(71.2cqw,63.6cqw) scale(1)}
  16%{transform:translate(55.2cqw,15.6cqw) scale(1)}
  17.5%{transform:translate(55.2cqw,15.6cqw) scale(.85)}
  19.5%{transform:translate(55.2cqw,15.6cqw) scale(1)}
  26.5%{transform:translate(52.2cqw,23.2cqw) scale(1)}
  28%{transform:translate(52.2cqw,23.2cqw) scale(.85)}
  29.5%{transform:translate(52.2cqw,23.2cqw) scale(1)}
  35.5%{transform:translate(52.2cqw,40cqw) scale(1)}
  37%{transform:translate(52.2cqw,40cqw) scale(.85)}
  38.5%,50%{transform:translate(52.2cqw,40cqw) scale(1)}
  59%{transform:translate(78.2cqw,21.4cqw) scale(1)}
  61%{transform:translate(78.2cqw,21.4cqw) scale(.85)}
  63%,70%{transform:translate(78.2cqw,21.4cqw) scale(1)}
  78%,96%{transform:translate(87.2cqw,65.6cqw) scale(1)}
  99%,100%{transform:translate(71.2cqw,63.6cqw) scale(1)}
}
@keyframes afl-oc-add{ /* enfoncé au clic, s'efface quand les colonnes arrivent */
  0%,17%{opacity:1;transform:scale(1)}
  18%{opacity:1;transform:scale(.94)}
  19.5%,40.5%{opacity:1;transform:scale(1)}
  44%,96%{opacity:0;transform:scale(1)}
  99%,100%{opacity:1;transform:scale(1)}
}
@keyframes afl-oc-menu{
  0%,19%{opacity:0;transform:translateY(-1.5cqw)}
  22%,40.5%{opacity:1;transform:translateY(0)}
  44%,100%{opacity:0;transform:translateY(-1.5cqw)}
}
@keyframes afl-oc-box1{ /* Transporteur coché à 29 % */
  0%,28%{background-color:#fff;border-color:var(--afl-ink-40)}
  29%,96%{background-color:var(--afl-primary);border-color:var(--afl-primary)}
  99%,100%{background-color:#fff;border-color:var(--afl-ink-40)}
}
@keyframes afl-oc-box2{ /* Groupe client coché à 38 % */
  0%,37%{background-color:#fff;border-color:var(--afl-ink-40)}
  38%,96%{background-color:var(--afl-primary);border-color:var(--afl-primary)}
  99%,100%{background-color:#fff;border-color:var(--afl-ink-40)}
}
@keyframes afl-oc-col4{
  0%,44%{opacity:0;transform:translateX(2cqw)}
  50%,96%{opacity:1;transform:translateX(0)}
  99%,100%{opacity:0;transform:translateX(2cqw)}
}
@keyframes afl-oc-col5{
  0%,48%{opacity:0;transform:translateX(2cqw)}
  54%,96%{opacity:1;transform:translateX(0)}
  99%,100%{opacity:0;transform:translateX(2cqw)}
}
@keyframes afl-oc-sel{ /* le filtre Groupe s'active au clic */
  0%,61%{border-color:var(--afl-ink-14);background-color:#fff}
  62.5%,96%{border-color:var(--afl-primary);background-color:rgba(2,114,234,.06)}
  99%,100%{border-color:var(--afl-ink-14);background-color:#fff}
}
@keyframes afl-oc-sel-all{
  0%,63%{opacity:1}
  65%,96%{opacity:0}
  99%,100%{opacity:1}
}
@keyframes afl-oc-sel-hit{
  0%,63%{opacity:0}
  65%,96%{opacity:1}
  99%,100%{opacity:0}
}
@keyframes afl-oc-out{ /* commandes des autres groupes */
  0%,67%{opacity:1}
  71%,96%{opacity:0}
  99%,100%{opacity:1}
}
@keyframes afl-oc-up1{
  0%,70%{transform:translateY(0)}
  77%,96%{transform:translateY(-8.4cqw)}
  99%,100%{transform:translateY(0)}
}
@keyframes afl-oc-up2{
  0%,71%{transform:translateY(0)}
  78%,96%{transform:translateY(-16.8cqw)}
  99%,100%{transform:translateY(0)}
}
@keyframes afl-oc-all{
  0%,72%{opacity:1}
  75%,96%{opacity:0}
  99%,100%{opacity:1}
}
@keyframes afl-oc-hit{
  0%,73%{opacity:0;transform:scale(.9)}
  76%,96%{opacity:1;transform:scale(1)}
  99%,100%{opacity:0;transform:scale(.9)}
}
@keyframes afl-oc-toast{
  0%,77%{opacity:0;transform:translateY(2cqw)}
  81%,96%{opacity:1;transform:translateY(0)}
  99%,100%{opacity:0;transform:translateY(2cqw)}
}