/* ============================================================
   PROTOCOL · ČERNÁ VERZE (scéna)
   Převzato 1:1 z protocol.sebacademy.cz/zaznam (a /zive, hero /masterclass), 18. 9. 2026.
   Černé pozadí #0B0B0A, soustředné kruhy (bílé po 96 px, zlaté po 288 px)
   a tři obíhající prstence jisker. Střed kruhů je nahoře uprostřed (50 % / 30 %),
   tedy za logem a nadpisem.

   Použití:
     <body class="scena-cerna">
       <div class="scena-bg" aria-hidden="true">
         <div class="scena-kruhy"></div>
         <div class="scena-jiskry">
           <div class="scena-ring r1"><span></span><span></span><span></span></div>
           <div class="scena-ring r2"><span></span><span></span><span></span></div>
           <div class="scena-ring r3"><span></span><span></span><span></span></div>
         </div>
       </div>
       <main style="position:relative;z-index:1">…</main>
     </body>
   Logo na černou: /assets/brand/logo-white@4x.png (nebo logo-white.svg),
   s filter:drop-shadow(0 12px 40px rgba(233,178,58,.18)).
   ============================================================ */

.scena-cerna{background:#0B0B0A;color:#fff}

.scena-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.scena-bg > div{position:absolute;inset:0}

.scena-kruhy{
  background:
    repeating-radial-gradient(circle at 50% 30%, rgba(255,255,255,.14) 0 1.2px, rgba(255,255,255,0) 1.2px 96px),
    repeating-radial-gradient(circle at 50% 30%, rgba(247,192,105,.28) 0 1.4px, rgba(247,192,105,0) 1.4px 288px);
  -webkit-mask-image:radial-gradient(1200px 900px at 50% 30%, rgba(0,0,0,.95) 0%, rgba(0,0,0,.4) 48%, rgba(0,0,0,0) 82%);
          mask-image:radial-gradient(1200px 900px at 50% 30%, rgba(0,0,0,.95) 0%, rgba(0,0,0,.4) 48%, rgba(0,0,0,0) 82%);
}
.scena-jiskry{
  overflow:hidden;
  -webkit-mask-image:radial-gradient(1000px 800px at 50% 30%, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,0) 88%);
          mask-image:radial-gradient(1000px 800px at 50% 30%, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,0) 88%);
}

@keyframes scenaOrbit{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes scenaOrbitRev{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0deg)}}
@keyframes scenaSpark{0%,100%{opacity:.3}50%{opacity:1}}

.scena-ring{position:absolute;left:50%;top:30%;will-change:transform}
.scena-ring span{position:absolute;left:50%;top:50%;border-radius:99px}

/* vnitřní prstenec: 3 světle zlaté jiskry */
.scena-ring.r1{width:576px;height:576px;animation:scenaOrbit 24s linear infinite}
.scena-ring.r1 span{margin:-2.5px;width:5px;height:5px;background:#F7C069;box-shadow:0 0 13px 3px rgba(247,192,105,.5);animation:scenaSpark 6s ease-in-out infinite}
.scena-ring.r1 span:nth-child(1){transform:rotate(0deg) translateY(-288px)}
.scena-ring.r1 span:nth-child(2){transform:rotate(120deg) translateY(-288px);animation-delay:-2s}
.scena-ring.r1 span:nth-child(3){transform:rotate(240deg) translateY(-288px);animation-delay:-4s}

/* prostřední prstenec: 3 bílé jiskry, obíhá opačně */
.scena-ring.r2{width:960px;height:960px;animation:scenaOrbitRev 32s linear infinite}
.scena-ring.r2 span{margin:-2px;width:4px;height:4px;background:#fff;box-shadow:0 0 10.4px 2.4px rgba(255,255,255,.38);animation:scenaSpark 7s ease-in-out infinite}
.scena-ring.r2 span:nth-child(1){transform:rotate(40deg) translateY(-480px)}
.scena-ring.r2 span:nth-child(2){transform:rotate(160deg) translateY(-480px);animation-delay:-2.5s}
.scena-ring.r2 span:nth-child(3){transform:rotate(280deg) translateY(-480px);animation-delay:-5s}

/* vnější prstenec: 3 sytě zlaté jiskry */
.scena-ring.r3{width:1344px;height:1344px;animation:scenaOrbit 42s linear infinite}
.scena-ring.r3 span{margin:-3px;width:6px;height:6px;background:#E9B23A;box-shadow:0 0 15.6px 3.6px rgba(233,178,58,.4);animation:scenaSpark 9s ease-in-out infinite}
.scena-ring.r3 span:nth-child(1){transform:rotate(75deg) translateY(-672px)}
.scena-ring.r3 span:nth-child(2){transform:rotate(195deg) translateY(-672px);animation-delay:-3s}
.scena-ring.r3 span:nth-child(3){transform:rotate(315deg) translateY(-672px);animation-delay:-6s}

@media (prefers-reduced-motion:reduce){.scena-ring,.scena-ring span{animation:none !important}}

.scena-logo{display:block;width:min(240px,62%);height:auto;margin:0 auto;filter:drop-shadow(0 12px 40px rgba(233,178,58,.18))}