/**
 * 2026 ALGO-FACTORY.COM — aflivecovers, scène « AF QR Code » (scène G de la maquette, afqrcode).
 *
 * Le QR se construit module par module, ses couleurs se personnalisent, le faisceau le scanne,
 * les portées (fiche, catégorie, boutique) s'allument. Racine : .afl-qr ; animations : afl-qr-*.
 * Durée et image fixe : scene.json.
 */

.afl-qr{
  --px:#070731;--bg:#ffffff;
  position:absolute;inset:0;font-size:3cqw;
  background:linear-gradient(180deg,#fbfcfe,#eef2f9);
  animation:afl-cycle var(--afl-dur) linear infinite;
}
.afl-qr__card{
  position:absolute;left:4cqw;top:13.4cqw;width:50cqw;
  background:#fff;border:1px solid var(--afl-ink-08);border-radius:2.6cqw;
  padding:3cqw;box-shadow:0 2cqw 4.4cqw -2.4cqw rgba(7,7,49,.32);
  display:flex;flex-direction:column;align-items:center;gap:2.2cqw;
}
.afl-qr__frame{position:relative;width:44cqw;height:44cqw;border-radius:1.6cqw;overflow:hidden;background:var(--bg);
  animation:afl-qr-theme var(--afl-dur) linear infinite}
.afl-qr__grid{position:absolute;inset:2cqw;display:grid;grid-template-columns:repeat(21,1fr);grid-template-rows:repeat(21,1fr)}
.afl-qr__grid i{display:block}
.afl-qr__grid i.afl-qr__on{background:var(--px);border-radius:.06cqw;opacity:0;transform:scale(.2);animation:afl-qr-pop var(--afl-dur) cubic-bezier(.16,1.5,.3,1) infinite}
/* les trois repères de position restent visibles : la cover à l'arrêt
   reste immédiatement identifiable comme un QR code */
.afl-qr__grid i.afl-qr__on.afl-qr__fx{opacity:1;transform:none;animation:none}
@keyframes afl-qr-pop{0%{opacity:0;transform:scale(.2)}3%,88%{opacity:1;transform:scale(1)}93%,100%{opacity:0;transform:scale(.2)}}
/* personnalisation couleurs pixels / fond */
@keyframes afl-qr-theme{
  0%,46%{--px:#070731;--bg:#ffffff}
  49%,56%{--px:#0272ea;--bg:#eaf3ff}
  59%,66%{--px:#17c3b2;--bg:#e7fbf8}
  69%,100%{--px:#070731;--bg:#ffffff}
}
/* faisceau de lecture */
.afl-qr__beam{
  position:absolute;left:0;right:0;height:9cqw;z-index:3;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(2,114,234,.34),rgba(2,114,234,.9),rgba(2,114,234,.34),transparent);
  box-shadow:0 0 3cqw rgba(2,114,234,.7);
  animation:afl-qr-beam var(--afl-dur) cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes afl-qr-beam{
  0%,68%{opacity:0;transform:translateY(-9cqw)}
  70%{opacity:1;transform:translateY(-9cqw)}
  80%{opacity:1;transform:translateY(44cqw)}
  82%,100%{opacity:0;transform:translateY(44cqw)}
}
/* viseur */
.afl-qr__scope{position:absolute;inset:-1cqw;z-index:4;opacity:0;animation:afl-qr-scope var(--afl-dur) cubic-bezier(.2,.9,.3,1) infinite}
.afl-qr__scope span{position:absolute;width:7cqw;height:7cqw;border:.6cqw solid var(--afl-primary);border-radius:.6cqw}
.afl-qr__scope span:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.afl-qr__scope span:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.afl-qr__scope span:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.afl-qr__scope span:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
@keyframes afl-qr-scope{
  0%,66%{opacity:0;transform:scale(1.14)}
  70%,84%{opacity:1;transform:scale(1)}
  88%,100%{opacity:0;transform:scale(.96)}
}
.afl-qr__cap{font-size:2.4cqw;font-weight:700;color:var(--afl-ink-60);text-align:center}
.afl-qr__cap b{color:var(--afl-ink)}

/* portées : produit / catégorie / boutique */
.afl-qr__scopes{position:absolute;right:4cqw;top:13.4cqw;width:34cqw;display:flex;flex-direction:column;gap:2cqw}
.afl-qr__sc{
  display:flex;align-items:center;gap:2cqw;padding:2.2cqw;
  background:#fff;border:1px solid var(--afl-ink-08);border-radius:2cqw;
  box-shadow:0 1.2cqw 2.8cqw -1.8cqw rgba(7,7,49,.3);
}
.afl-qr__sc u{
  text-decoration:none;width:7cqw;height:7cqw;flex:none;border-radius:1.2cqw;
  background:
    linear-gradient(#070731,#070731) 0 0/2.4cqw 2.4cqw no-repeat,
    linear-gradient(#070731,#070731) 100% 0/2.4cqw 2.4cqw no-repeat,
    linear-gradient(#070731,#070731) 0 100%/2.4cqw 2.4cqw no-repeat,
    linear-gradient(#070731,#070731) 100% 100%/1.4cqw 1.4cqw no-repeat,
    #fff;
  border:1px solid var(--afl-ink-14);
}
.afl-qr__sc div{display:flex;flex-direction:column;gap:.6cqw;min-width:0}
.afl-qr__sc b{font-size:2.5cqw;font-weight:700;letter-spacing:-.01em}
.afl-qr__sc span{font-size:2cqw;color:var(--afl-ink-40);font-weight:500}
.afl-qr__sc:nth-child(1){animation:afl-qr-sc1 var(--afl-dur) ease-out infinite}
.afl-qr__sc:nth-child(2){animation:afl-qr-sc2 var(--afl-dur) ease-out infinite}
.afl-qr__sc:nth-child(3){animation:afl-qr-sc3 var(--afl-dur) ease-out infinite}
@keyframes afl-qr-sc1{0%,74%{border-color:var(--afl-primary);box-shadow:0 0 0 .5cqw rgba(2,114,234,.16)}77%,100%{border-color:var(--afl-ink-08);box-shadow:0 1.2cqw 2.8cqw -1.8cqw rgba(7,7,49,.3)}}
@keyframes afl-qr-sc2{0%,75%{border-color:var(--afl-ink-08);box-shadow:0 1.2cqw 2.8cqw -1.8cqw rgba(7,7,49,.3)}78%,86%{border-color:var(--afl-primary);box-shadow:0 0 0 .5cqw rgba(2,114,234,.16)}89%,100%{border-color:var(--afl-ink-08);box-shadow:0 1.2cqw 2.8cqw -1.8cqw rgba(7,7,49,.3)}}
@keyframes afl-qr-sc3{0%,87%{border-color:var(--afl-ink-08);box-shadow:0 1.2cqw 2.8cqw -1.8cqw rgba(7,7,49,.3)}90%,100%{border-color:var(--afl-primary);box-shadow:0 0 0 .5cqw rgba(2,114,234,.16)}}

/* nuancier pixels / fond */
.afl-qr__sw{position:absolute;right:4cqw;bottom:4cqw;width:34cqw;display:flex;flex-direction:column;gap:1.4cqw;
  opacity:0;animation:afl-qr-sw var(--afl-dur) ease-out infinite}
@keyframes afl-qr-sw{0%,42%{opacity:0;transform:translateY(1.4cqw)}46%,68%{opacity:1;transform:none}72%,100%{opacity:0}}
.afl-qr__swrow{display:flex;align-items:center;gap:1.4cqw;font-size:2cqw;font-weight:700;color:var(--afl-ink-40)}
.afl-qr__swrow em{font-style:normal;width:9cqw;flex:none}
.afl-qr__swrow i{width:3cqw;height:3cqw;border-radius:50%;border:1px solid var(--afl-ink-14)}
.afl-qr__swrow i:nth-of-type(1){background:#070731}
.afl-qr__swrow i:nth-of-type(2){background:#0272ea}
.afl-qr__swrow i:nth-of-type(3){background:#17c3b2}
.afl-qr__swrow--bg i:nth-of-type(1){background:#ffffff}
.afl-qr__swrow--bg i:nth-of-type(2){background:#eaf3ff}
.afl-qr__swrow--bg i:nth-of-type(3){background:#e7fbf8}
.afl-qr__done{right:4cqw;bottom:4cqw;transform:scale(.8);color:var(--afl-success);font-size:2.1cqw;
  border:1px solid rgba(22,163,74,.3);animation:afl-qr-done var(--afl-dur) cubic-bezier(.16,1.4,.3,1) infinite}
@keyframes afl-qr-done{0%,82%{opacity:0;transform:scale(.8)}87%,100%{opacity:1;transform:scale(1)}}

/* construction par vagues : chaque vague est l'animation de base (afl-qr-pop) décalée du
   délai qu'elle avait dans la maquette ; aucun délai propre, réservé à l'image fixe.
   Au-delà de la fin du cycle, la vague reste visible : le fondu de cycle masque tout. */
.afl-qr__grid i.afl-qr__on.afl-qr__w2{animation-name:afl-qr-pop-w2}
@keyframes afl-qr-pop-w2{0%,8.4%{opacity:0;transform:scale(.2)}11.4%,96.4%{opacity:1;transform:scale(1)}}
.afl-qr__grid i.afl-qr__on.afl-qr__w3{animation-name:afl-qr-pop-w3}
@keyframes afl-qr-pop-w3{0%,10.6%{opacity:0;transform:scale(.2)}13.6%,98.6%{opacity:1;transform:scale(1)}}
.afl-qr__grid i.afl-qr__on.afl-qr__w4{animation-name:afl-qr-pop-w4}
@keyframes afl-qr-pop-w4{0%,12.8%{opacity:0;transform:scale(.2)}15.8%,100%{opacity:1;transform:scale(1)}}
.afl-qr__grid i.afl-qr__on.afl-qr__w5{animation-name:afl-qr-pop-w5}
@keyframes afl-qr-pop-w5{0%,15%{opacity:0;transform:scale(.2)}18%,100%{opacity:1;transform:scale(1)}}
.afl-qr__grid i.afl-qr__on.afl-qr__w6{animation-name:afl-qr-pop-w6}
@keyframes afl-qr-pop-w6{0%,17.2%{opacity:0;transform:scale(.2)}20.2%,100%{opacity:1;transform:scale(1)}}
.afl-qr__grid i.afl-qr__on.afl-qr__w7{animation-name:afl-qr-pop-w7}
@keyframes afl-qr-pop-w7{0%,19.4%{opacity:0;transform:scale(.2)}22.4%,100%{opacity:1;transform:scale(1)}}
.afl-qr__grid i.afl-qr__on.afl-qr__w8{animation-name:afl-qr-pop-w8}
@keyframes afl-qr-pop-w8{0%,21.6%{opacity:0;transform:scale(.2)}24.6%,100%{opacity:1;transform:scale(1)}}
.afl-qr__grid i.afl-qr__on.afl-qr__w9{animation-name:afl-qr-pop-w9}
@keyframes afl-qr-pop-w9{0%,23.8%{opacity:0;transform:scale(.2)}26.8%,100%{opacity:1;transform:scale(1)}}

/* largeurs et alignement de l'en-tête (styles en ligne dans la maquette) */
.afl-qr .afl-qr__line-a{width:7cqw}
.afl-qr .afl-qr__line-b{width:5cqw}
.afl-qr .afl-qr__cron{margin-left:auto}