/**
 * 2026 ALGO-FACTORY.COM — aflivecovers, scène « TopProducts ».
 * Racine : .afl-tp ; animations : afl-tp-*. Durée et image fixe : scene.json.
 *
 * Cycle de 10 s : clic sur l'onglet Homme (18 %), les listes s'échangent (19-30 %) ; clic sur le
 * filtre de période (38 %), le classement se refait (44-53 %), le bonnet prend la tête et reçoit
 * sa flèche (52-57 %) ; le pointeur se retire (58 %), le résultat reste lisible jusqu'à 90 %.
 */
.afl-tp{
  position:absolute;inset:0;
  font-size:3.1cqw;
  background:linear-gradient(180deg,#fdfefe,#f3f6fb);
  animation:afl-cycle var(--afl-dur) linear infinite;
}

/* ----------------------------------------------------------- en-tête de boutique */
.afl-tp .afl-tp__l1{width:12cqw}
.afl-tp .afl-tp__l2{width:8cqw}
.afl-tp__bag{margin-left:auto;width:3.8cqw;height:3.8cqw;color:var(--afl-ink);flex:none}
.afl-tp__bag svg{width:100%;height:100%}

/* ------------------------------------------------------- titre et filtre de période */
.afl-tp__head{
  position:absolute;left:4.4cqw;right:4.4cqw;top:12cqw;height:6cqw;
  display:flex;align-items:center;justify-content:space-between;gap:2cqw;
}
.afl-tp__title{font-size:4cqw;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.afl-tp .afl-tp__period{font-size:2.2cqw;gap:1cqw}
.afl-tp__cal{width:2.4cqw;height:2.4cqw;flex:none}
.afl-tp__chev{width:1.8cqw;height:1.8cqw;flex:none}
.afl-tp__pv{display:grid}
.afl-tp__pa,
.afl-tp__pb{grid-area:1/1;white-space:nowrap}
.afl-tp__pa{opacity:1;animation:afl-tp-pa var(--afl-dur) linear infinite}
.afl-tp__pb{opacity:0;animation:afl-tp-pb var(--afl-dur) linear infinite}

/* ------------------------------------------------------------ onglets de catégorie */
.afl-tp__tabs{
  position:absolute;left:4.4cqw;right:4.4cqw;top:19.5cqw;height:6cqw;
  display:flex;border-bottom:1px solid var(--afl-ink-08);
}
.afl-tp__tab{
  flex:none;width:20cqw;line-height:6cqw;text-align:center;white-space:nowrap;
  font-size:2.8cqw;font-weight:600;color:var(--afl-ink-60);
}
.afl-tp__tab--w{color:var(--afl-primary);animation:afl-tp-tw var(--afl-dur) linear infinite}
.afl-tp__tab--m{color:var(--afl-ink-60);animation:afl-tp-tm var(--afl-dur) linear infinite}
.afl-tp__uline{
  position:absolute;left:0;bottom:-1px;width:20cqw;height:.7cqw;border-radius:99px;
  background:var(--afl-primary);
  transform:translateX(0);
  animation:afl-tp-uline var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite;
}

/* ------------------------------------------------------------------- classement */
.afl-tp__board{position:absolute;left:4.4cqw;right:4.4cqw;top:28cqw;height:38.4cqw}
.afl-tp__ranks{position:absolute;left:0;top:0;width:5.6cqw}
.afl-tp__rank{display:flex;align-items:center;justify-content:center;height:11.6cqw;margin-bottom:1.4cqw}
.afl-tp__rank i{
  display:flex;align-items:center;justify-content:center;width:4.6cqw;height:4.6cqw;border-radius:50%;
  font-style:normal;font-size:2.4cqw;font-weight:800;color:var(--afl-ink);background:var(--afl-ink-08);
}
.afl-tp__rank--1 i{color:#fff;background:var(--afl-primary)}

.afl-tp__list{position:absolute;left:7cqw;right:0;top:0}
.afl-tp__list--w{opacity:1;transform:translateY(0);animation:afl-tp-lw var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite}
.afl-tp__row{
  position:relative;height:11.6cqw;margin-bottom:1.4cqw;
  display:flex;align-items:center;gap:2.4cqw;padding:0 2.4cqw;
  background:#fff;border:1px solid var(--afl-ink-08);border-radius:2cqw;
}
.afl-tp__row--m1,
.afl-tp__row--m2,
.afl-tp__row--m3{opacity:0;transform:translateY(2cqw)}
.afl-tp__row--m1{animation:afl-tp-m1 var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite}
.afl-tp__row--m2{animation:afl-tp-m2 var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite}
.afl-tp__row--m3{
  z-index:2;filter:drop-shadow(0 0 0 rgba(7,7,49,0));
  animation:afl-tp-m3 var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite;
}

.afl-tp__thumb{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:7.6cqw;height:7.6cqw;border-radius:1.6cqw;
}
.afl-tp__thumb svg{width:5cqw;height:5cqw}
.afl-tp__thumb--dress{color:#c2410c;background:#ffedd5}
.afl-tp__thumb--hat{color:#a16207;background:#fef9c3}
.afl-tp__thumb--scarf{color:#be185d;background:#fce7f3}
.afl-tp__thumb--belt{color:#78350f;background:#fde9d2}
.afl-tp__thumb--shoe{color:var(--afl-primary);background:rgba(2,114,234,.1)}
.afl-tp__thumb--cap{color:var(--afl-secondary);background:var(--afl-ink-08)}

.afl-tp__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.3cqw}
.afl-tp__name{display:flex;align-items:center;gap:1.2cqw;font-size:2.9cqw;font-weight:700;white-space:nowrap}
.afl-tp__track{display:block;height:1.3cqw;border-radius:99px;background:var(--afl-ink-05);overflow:hidden}
.afl-tp__bar{
  display:block;width:100%;height:100%;border-radius:99px;transform-origin:left;
  background:linear-gradient(90deg,var(--afl-primary-light),var(--afl-primary));
}
.afl-tp__bar--w1{transform:scaleX(1)}
.afl-tp__bar--w2{transform:scaleX(.85)}
.afl-tp__bar--w3{transform:scaleX(.59)}
.afl-tp__bar--m1,
.afl-tp__bar--m2,
.afl-tp__bar--m3{transform:scaleX(0)}
.afl-tp__bar--m1{animation:afl-tp-b1 var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite}
.afl-tp__bar--m2{animation:afl-tp-b2 var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite}
.afl-tp__bar--m3{
  background:linear-gradient(90deg,var(--afl-accent),var(--afl-success));
  animation:afl-tp-b3 var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite;
}

.afl-tp__count{flex:none;font-size:2.3cqw;font-weight:600;color:var(--afl-ink-60);white-space:nowrap;text-align:right}
.afl-tp__cv{display:grid}
.afl-tp__na,
.afl-tp__nb{grid-area:1/1;justify-self:end}
.afl-tp__na{opacity:1;animation:afl-tp-na var(--afl-dur) linear infinite}
.afl-tp__nb{opacity:0;color:var(--afl-ink);animation:afl-tp-nb var(--afl-dur) linear infinite}

.afl-tp__up{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:3.2cqw;height:3.2cqw;border-radius:50%;background:var(--afl-success);
  opacity:0;transform:scale(.4);
  animation:afl-tp-up var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite;
}
.afl-tp__up svg{width:2.2cqw;height:2.2cqw}

/* --------------------------------------------------------------------- pointeur */
.afl-tp__cursor{
  transform:translate(84cqw,67cqw) scale(1);
  animation:afl-tp-cursor var(--afl-dur) cubic-bezier(.22,.9,.3,1) infinite;
}

/* ---------------------------------------------------------------------- séquence */
@keyframes afl-tp-cursor{ /* repos → onglet Homme (clic 18 %) → filtre (clic 38 %) → repos */
  0%,6%{transform:translate(84cqw,67cqw) scale(1)}
  16%{transform:translate(33.6cqw,22.1cqw) scale(1)}
  18%{transform:translate(33.6cqw,22.1cqw) scale(.85)}
  20%,26%{transform:translate(33.6cqw,22.1cqw) scale(1)}
  36%{transform:translate(90.2cqw,14.6cqw) scale(1)}
  38%{transform:translate(90.2cqw,14.6cqw) scale(.85)}
  40%,46%{transform:translate(90.2cqw,14.6cqw) scale(1)}
  58%,100%{transform:translate(84cqw,67cqw) scale(1)}
}
@keyframes afl-tp-uline{
  0%,18%{transform:translateX(0)}
  23%,96%{transform:translateX(20cqw)}
  99%,100%{transform:translateX(0)}
}
@keyframes afl-tp-tw{
  0%,18%{color:var(--afl-primary)}
  22%,96%{color:var(--afl-ink-60)}
  99%,100%{color:var(--afl-primary)}
}
@keyframes afl-tp-tm{
  0%,18%{color:var(--afl-ink-60)}
  22%,96%{color:var(--afl-primary)}
  99%,100%{color:var(--afl-ink-60)}
}
@keyframes afl-tp-lw{ /* la liste Femme s'efface */
  0%,19%{opacity:1;transform:translateY(0)}
  23%,96%{opacity:0;transform:translateY(-1.5cqw)}
  99%,100%{opacity:1;transform:translateY(0)}
}
@keyframes afl-tp-m1{ /* ceinture : 1re, puis 2e (+1 ligne) */
  0%,21%{opacity:0;transform:translateY(2cqw)}
  26%,44%{opacity:1;transform:translateY(0)}
  53%,96%{opacity:1;transform:translateY(13cqw)}
  99%,100%{opacity:0;transform:translateY(2cqw)}
}
@keyframes afl-tp-m2{ /* baskets : 2e, puis 3e (+1 ligne) */
  0%,23%{opacity:0;transform:translateY(2cqw)}
  28%,44%{opacity:1;transform:translateY(0)}
  53%,96%{opacity:1;transform:translateY(13cqw)}
  99%,100%{opacity:0;transform:translateY(2cqw)}
}
@keyframes afl-tp-m3{ /* bonnet : 3e, puis 1er (-2 lignes), soulevé pendant le dépassement */
  0%,25%{opacity:0;transform:translateY(2cqw);filter:drop-shadow(0 0 0 rgba(7,7,49,0))}
  30%,44%{opacity:1;transform:translateY(0);filter:drop-shadow(0 0 0 rgba(7,7,49,0))}
  48%{filter:drop-shadow(0 1.2cqw 2cqw rgba(7,7,49,.24))}
  53%,96%{opacity:1;transform:translateY(-26cqw);filter:drop-shadow(0 0 0 rgba(7,7,49,0))}
  99%,100%{opacity:0;transform:translateY(2cqw);filter:drop-shadow(0 0 0 rgba(7,7,49,0))}
}
@keyframes afl-tp-b1{ /* 386 → 96 ventes : 1 → .75 du meilleur */
  0%,22%{transform:scaleX(0)}
  32%,44%{transform:scaleX(1)}
  53%,96%{transform:scaleX(.75)}
  99%,100%{transform:scaleX(0)}
}
@keyframes afl-tp-b2{ /* 295 → 75 : .76 → .59 */
  0%,24%{transform:scaleX(0)}
  34%,44%{transform:scaleX(.76)}
  53%,96%{transform:scaleX(.59)}
  99%,100%{transform:scaleX(0)}
}
@keyframes afl-tp-b3{ /* 170 → 128 : .44 → 1 */
  0%,26%{transform:scaleX(0)}
  36%,44%{transform:scaleX(.44)}
  53%,96%{transform:scaleX(1)}
  99%,100%{transform:scaleX(0)}
}
@keyframes afl-tp-pa{
  0%,38%{opacity:1}
  41%,96%{opacity:0}
  99%,100%{opacity:1}
}
@keyframes afl-tp-pb{
  0%,38%{opacity:0}
  41%,96%{opacity:1}
  99%,100%{opacity:0}
}
@keyframes afl-tp-na{
  0%,44%{opacity:1}
  48%,96%{opacity:0}
  99%,100%{opacity:1}
}
@keyframes afl-tp-nb{
  0%,44%{opacity:0}
  48%,96%{opacity:1}
  99%,100%{opacity:0}
}
@keyframes afl-tp-up{
  0%,52%{opacity:0;transform:scale(.4)}
  57%,96%{opacity:1;transform:scale(1)}
  99%,100%{opacity:0;transform:scale(.4)}
}