/* Schéma de neurones : couleurs héritées des variables du site (--ink, --bg, --accent, --muted), définies sur .guest-screen.
   Chronologie d'une boucle (--cycle, 10 s par défaut) :
   0 à 10 %   les données entrent
   10 à 30 %  entrées vers compréhension
   32 à 50 %  compréhension vers préparation
   52 à 68 %  préparation vers le point final
   66 à 90 %  le point s'allume et reste, puis la boucle repart */
.nn{ --cycle:10s; width:100%; }
.nn-svg{ display:block; width:100%; height:auto; overflow:visible; }

.nn-edge{ fill:none; stroke:color-mix(in srgb,var(--ink) 13%,transparent); stroke-width:1; }
.nn-sig{ fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:.16 1.16; stroke-dashoffset:.16; opacity:0; }
.nn-in{ fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:.4 1.4; stroke-dashoffset:.4; opacity:0; }

.nn-node{ fill:var(--bg); stroke:color-mix(in srgb,var(--ink) 38%,transparent); stroke-width:1.4; transform-box:fill-box; transform-origin:center; }
.nn-out{ fill:var(--bg); stroke:color-mix(in srgb,var(--ink) 38%,transparent); }
.nn-ring{ fill:none; stroke:var(--accent); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; }

.nn-lab{ font-weight:500; font-size:17px; font-family:inherit; fill:var(--muted); letter-spacing:-.005em; }
.nn-in-lab{ font-weight:400; font-size:18px; font-family:inherit; fill:var(--muted); }
.nn-result{ font-weight:500; font-size:16px; font-family:inherit; fill:var(--ink); text-anchor:middle; opacity:0; }
.nn-result.side{ font-size:19px; text-anchor:start; }

/* image fixe (mouvement réduit, ou avant démarrage) : le point final est déjà allumé */
.nn-out{ fill:var(--accent); stroke:var(--accent); }
.nn-ring.r1{ opacity:.35; transform:scale(1.9); }
.nn-lab.c3{ fill:var(--ink); }
.nn-result{ opacity:1; }

@media (prefers-reduced-motion:no-preference){
  .nn.run:not(.paused) .nn-sig,
  .nn.run:not(.paused) .nn-in,
  .nn.run:not(.paused) .nn-node,
  .nn.run:not(.paused) .nn-ring,
  .nn.run:not(.paused) .nn-lab,
  .nn.run:not(.paused) .nn-result{
    animation-duration:var(--cycle);
    animation-iteration-count:infinite;
    animation-timing-function:cubic-bezier(.4,0,.2,1);
    animation-delay:var(--j,0s);
    animation-fill-mode:both;
  }
  .nn.once.run .nn-sig, .nn.once.run .nn-in, .nn.once.run .nn-node, .nn.once.run .nn-ring, .nn.once.run .nn-lab, .nn.once.run .nn-result{ animation-iteration-count:1 !important; }

  /* état de départ animé : tout est éteint, sauf les contours */
  .nn.run .nn-out{ fill:var(--bg); stroke:color-mix(in srgb,var(--ink) 38%,transparent); }
  .nn.run .nn-ring.r1{ opacity:0; transform:none; }
  .nn.run .nn-lab.c3{ fill:var(--muted); }
  .nn.run .nn-result{ opacity:0; }

  .nn.run:not(.paused) .nn-in{ animation-name:nnIn; }
  .nn.run:not(.paused) .nn-sig.s1{ animation-name:nnS1; }
  .nn.run:not(.paused) .nn-sig.s2{ animation-name:nnS2; }
  .nn.run:not(.paused) .nn-sig.s3{ animation-name:nnS3; }
  .nn.run:not(.paused) .nn-node.n0{ animation-name:nnN0; }
  .nn.run:not(.paused) .nn-node.n1{ animation-name:nnN1; }
  .nn.run:not(.paused) .nn-node.n2{ animation-name:nnN2; }
  .nn.run:not(.paused) .nn-out{ animation-name:nnOut; --j:0s; }
  .nn.run:not(.paused) .nn-ring.r1{ animation-name:nnRing; --j:0s; }
  .nn.run:not(.paused) .nn-ring.r2{ animation-name:nnRing; animation-delay:.5s; }
  .nn.run:not(.paused) .nn-lab.c0{ animation-name:nnL0; --j:0s; }
  .nn.run:not(.paused) .nn-lab.c1{ animation-name:nnL1; --j:0s; }
  .nn.run:not(.paused) .nn-lab.c2{ animation-name:nnL2; --j:0s; }
  .nn.run:not(.paused) .nn-lab.c3{ animation-name:nnL3; --j:0s; }
  .nn.run:not(.paused) .nn-result{ animation-name:nnRes; --j:0s; }
}

@keyframes nnIn{
  0%{ stroke-dashoffset:.4; opacity:0; }
  2%{ opacity:1; }
  9%{ stroke-dashoffset:-1; opacity:1; }
  10%,100%{ stroke-dashoffset:-1; opacity:0; }
}
@keyframes nnS1{
  0%,9%{ stroke-dashoffset:.16; opacity:0; }
  11%{ opacity:.95; }
  29%{ stroke-dashoffset:-1; opacity:.95; }
  30%,100%{ stroke-dashoffset:-1; opacity:0; }
}
@keyframes nnS2{
  0%,31%{ stroke-dashoffset:.16; opacity:0; }
  33%{ opacity:.95; }
  49%{ stroke-dashoffset:-1; opacity:.95; }
  50%,100%{ stroke-dashoffset:-1; opacity:0; }
}
@keyframes nnS3{
  0%,51%{ stroke-dashoffset:.16; opacity:0; }
  53%{ opacity:1; }
  67%{ stroke-dashoffset:-1; opacity:1; }
  68%,100%{ stroke-dashoffset:-1; opacity:0; }
}

@keyframes nnN0{
  0%,6%{ fill:var(--bg); stroke:color-mix(in srgb,var(--ink) 38%,transparent); transform:scale(1); }
  10%,20%{ fill:var(--accent); stroke:var(--accent); transform:scale(1.18); }
  34%,100%{ fill:var(--bg); stroke:color-mix(in srgb,var(--ink) 38%,transparent); transform:scale(1); }
}
@keyframes nnN1{
  0%,24%{ fill:var(--bg); stroke:color-mix(in srgb,var(--ink) 38%,transparent); transform:scale(1); }
  30%,42%{ fill:var(--accent); stroke:var(--accent); transform:scale(1.18); }
  54%,100%{ fill:var(--bg); stroke:color-mix(in srgb,var(--ink) 38%,transparent); transform:scale(1); }
}
@keyframes nnN2{
  0%,44%{ fill:var(--bg); stroke:color-mix(in srgb,var(--ink) 38%,transparent); transform:scale(1); }
  50%,60%{ fill:var(--accent); stroke:var(--accent); transform:scale(1.18); }
  72%,100%{ fill:var(--bg); stroke:color-mix(in srgb,var(--ink) 38%,transparent); transform:scale(1); }
}
@keyframes nnOut{
  0%,64%{ fill:var(--bg); stroke:color-mix(in srgb,var(--ink) 38%,transparent); transform:scale(1); }
  70%{ fill:var(--accent); stroke:var(--accent); transform:scale(1.35); }
  76%,92%{ fill:var(--accent); stroke:var(--accent); transform:scale(1); }
  98%,100%{ fill:var(--bg); stroke:color-mix(in srgb,var(--ink) 38%,transparent); transform:scale(1); }
}
@keyframes nnRing{
  0%,68%{ opacity:0; transform:scale(1); }
  70%{ opacity:.7; }
  86%{ opacity:0; transform:scale(3.6); }
  100%{ opacity:0; transform:scale(3.6); }
}
@keyframes nnL0{ 0%,2%{ fill:var(--muted); } 5%,22%{ fill:var(--ink); } 34%,100%{ fill:var(--muted); } }
@keyframes nnL1{ 0%,24%{ fill:var(--muted); } 30%,44%{ fill:var(--ink); } 54%,100%{ fill:var(--muted); } }
@keyframes nnL2{ 0%,44%{ fill:var(--muted); } 50%,62%{ fill:var(--ink); } 72%,100%{ fill:var(--muted); } }
@keyframes nnL3{ 0%,64%{ fill:var(--muted); } 70%,92%{ fill:var(--ink); } 98%,100%{ fill:var(--muted); } }
@keyframes nnRes{ 0%,70%{ opacity:0; } 76%,92%{ opacity:1; } 98%,100%{ opacity:0; } }

@media (max-width:560px){
  .nn-lab{ font-size:25px; }
  .nn-in-lab{ font-size:20px; }
  .nn-result{ font-size:22px; }
}