/* ============================================================================
   RHO DEEP — ozdoby graficzne (inc/art.php). Tylko tokeny z nowa.css.
   Kolejność: siatka, mockup, ikony, orbita, fale, ramka, znak, reduced-motion.
   ========================================================================= */

/* ---------------------------------------------------------------- SIATKA */
.ra-siatka{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent)}
.ra-siatka svg{width:100%;height:100%;display:block}
.ra-siatka-h{animation:raPlyn 9s linear infinite}
@keyframes raPlyn{
  0%{transform:translateY(0);opacity:0}
  12%{opacity:.9}
  100%{transform:translateY(46px);opacity:0}
}

/* ---------------------------------------------------------------- MOCKUP */
.ra-mockup{position:relative;width:100%;max-width:660px}
.ra-mockup svg{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  box-shadow:var(--shadow);position:relative;z-index:1;overflow:visible}
.ra-mk-glow{position:absolute;inset:14% 8%;border-radius:50%;z-index:0;filter:blur(52px);opacity:.5;
  background:radial-gradient(circle,var(--c,var(--violet)),transparent 70%)}
.ra-mk-row{animation:raWjazd .7s var(--ease) both}
.ra-mk-nav{animation:raWjazd .6s var(--ease) both}
@keyframes raWjazd{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.ra-mk-bar{transform-origin:center bottom;transform-box:fill-box;animation:raRosnij .9s var(--ease) both}
@keyframes raRosnij{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
.ra-mk-kursor{opacity:.85}

/* ----------------------------------------------------------------- IKONY */
.ra-ikona{display:inline-grid;place-items:center;flex:none;border-radius:16px;
  background:color-mix(in srgb,var(--c,var(--violet)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--violet)) 34%,transparent);
  box-shadow:inset 0 1px 0 var(--glass2);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ra-ikona:hover{transform:translateY(-3px) rotate(-3deg);
  box-shadow:0 12px 28px color-mix(in srgb,var(--c,var(--violet)) 30%,transparent)}
.ra-ikona svg{display:block}

/* ---------------------------------------------------------------- ORBITA */
.ra-orbita{position:relative;width:100%;max-width:620px;margin-inline:auto}
.ra-orbita svg{width:100%;height:auto;display:block;overflow:visible}
.ra-orb-ring{stroke-dasharray:3 9;opacity:.9;transform-origin:310px 310px;transform-box:view-box;
  animation:raObrot linear infinite}
.ra-orb-run{transform-origin:310px 310px;transform-box:view-box;animation:raObrot linear infinite}
@keyframes raObrot{to{transform:rotate(360deg)}}
.ra-orb-linia{stroke:var(--c,var(--violet));stroke-opacity:.6;stroke-dasharray:5 10;
  animation:raStrumien 2.4s linear infinite}
@keyframes raStrumien{to{stroke-dashoffset:-30}}
.ra-orb-puls{stroke-opacity:.5;transform-origin:center;transform-box:fill-box;
  animation:raPuls 3.6s var(--ease) infinite}
@keyframes raPuls{0%{transform:scale(1);stroke-opacity:.5}70%,100%{transform:scale(1.35);stroke-opacity:0}}
.ra-orb-srodek circle:first-child{filter:drop-shadow(0 0 26px color-mix(in srgb,var(--violet) 60%,transparent))}

/* ----------------------------------------------------------- FALE / SEP. */
.ra-fala{line-height:0;position:relative;margin:0}
.ra-fala svg{width:100%;height:clamp(56px,7vw,110px);display:block}
.ra-fala.ra-flip svg{transform:scaleY(-1)}
.ra-fala-linia{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--violet) 45%,transparent))}
.ra-przekladka{position:relative;height:1px;background:var(--line);margin:0}
.ra-przekladka i{position:absolute;left:50%;top:50%;width:min(560px,70%);height:2px;translate:-50% -50%;
  background:var(--grad);border-radius:999px;filter:blur(.4px);opacity:.85}
.ra-przekladka::after{content:"";position:absolute;left:50%;top:50%;width:260px;height:60px;translate:-50% -50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--violet) 45%,transparent),transparent 70%);
  filter:blur(22px);pointer-events:none}

/* ----------------------------------------------------------------- RAMKA */
/* `.ra-ramka` dokłada tylko podpis do `.media` z nowa.css (maska, poświata,
   unoszenie przy hover — patrz nowa.css §12.2). Zero ramki, zero paska „okna". */
.ra-ramka{margin:0;perspective:1200px}
.ra-ramka:hover img{transform:rotateX(2deg) translateY(-8px) scale(1.02)}
.ra-ramka figcaption{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:center}

/* ------------------------------------------------------------------ ZNAK */
.ra-znak-box{display:inline-block}
.ra-znak-box svg{width:100%;height:100%;display:block;overflow:visible}
.ra-znak-sie{transform-origin:center;transform-box:fill-box;animation:raObrotWolny 26s linear infinite}
@keyframes raObrotWolny{to{transform:rotate(360deg)}}
.ra-znak-w{transform-origin:center;transform-box:fill-box;animation:raOddech 3.4s ease-in-out infinite}
@keyframes raOddech{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.35);opacity:1}}
.ra-znak-rdzen{transform-origin:center;transform-box:fill-box;animation:raOddech 3.4s ease-in-out infinite reverse;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--violet) 70%,transparent))}

/* ------------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  .ra-siatka-h,.ra-mk-row,.ra-mk-nav,.ra-mk-bar,.ra-mk-kursor,.ra-orb-ring,.ra-orb-run,
  .ra-orb-linia,.ra-orb-puls,.ra-znak-sie,.ra-znak-w,.ra-znak-rdzen{animation:none!important}
  .ra-mk-row,.ra-mk-nav{opacity:1!important;transform:none!important}
  .ra-mk-bar{transform:none!important}
  .ra-orb-puls{stroke-opacity:.35}
  .ra-ramka-in,.ra-ikona{transition:none}
}

/* ============================================================================
   16. SCENY (inc/scen.php) — mechanizmy sterowane przewijaniem.
   assets/nowa-scen.js dolicza --i (kolejność) i przełącza .rs-in na wejściu
   w kadr; do tego momentu wszystko jest niewidoczne / ścieżki są ukryte.
   ========================================================================= */
.rs-scene{position:relative;width:100%;max-width:920px;margin-inline:auto}
.rs-scene svg{width:100%;height:auto;display:block;overflow:visible}

/* etapy (kółka + etykiety) wjeżdżają jeden po drugim */
.rs-etap{opacity:0;transform:translateY(14px) scale(.94);transform-origin:center;transform-box:fill-box;
  transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * .16s + .1s)}
.rs-scene.rs-in .rs-etap{opacity:1;transform:none}
.rs-etap-puls{stroke-opacity:0;transform-origin:center;transform-box:fill-box}
.rs-scene.rs-in .rs-etap-puls{animation:rsPuls 3.2s var(--ease) infinite;animation-delay:calc(var(--i,0) * .16s + .9s)}
@keyframes rsPuls{0%{transform:scale(1);stroke-opacity:.5}70%,100%{transform:scale(1.45);stroke-opacity:0}}

/* linie / ścieżki: rysują się (stroke-dashoffset). JS mierzy realną długość
   i zapisuje ją w --rs-len — TYLKO jako custom property, nigdy jako inline
   stroke-dashoffset, bo inline style biłby każdą regułę .rs-in poniżej. */
.rs-draw{stroke-dasharray:1400;stroke-dashoffset:var(--rs-len,1400);opacity:.9;
  transition:stroke-dashoffset 1.3s var(--ease);transition-delay:calc(var(--i,0) * .12s)}
.rs-scene.rs-in .rs-draw{stroke-dashoffset:0}
.rs-linia{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--violet) 35%,transparent))}

/* --- DEKRET: dokument -> zapis (obrót końcowy siedzi na <g> pozycji w PHP,
   tu tylko wjazd: przezroczystość + lekkie przybliżenie) --- */
.rs-dekret{max-width:380px}
.rs-dek-a,.rs-dek-b,.rs-dek-ai{opacity:0;transform-origin:center;transform-box:fill-box;
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rs-dek-a{transform:scale(.92) translateY(-10px)}
.rs-dek-b{transform:scale(.92) translateY(10px)}
.rs-dek-ai{transform:scale(.5)}
.rs-scene.rs-in .rs-dek-a{opacity:1;transform:none}
.rs-scene.rs-in .rs-dek-b{opacity:1;transition-delay:.25s;transform:none}
.rs-scene.rs-in .rs-dek-ai{opacity:1;transition-delay:.5s;transform:scale(1)}
.rs-dek-wiersz{opacity:0;transform:translateX(10px);transform-box:fill-box;
  transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(.75s + var(--i,0) * .14s)}
.rs-scene.rs-in .rs-dek-wiersz{opacity:1;transform:none}
.rs-dek-check{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .6s var(--ease);transition-delay:.9s}
.rs-scene.rs-in .rs-dek-check{stroke-dashoffset:0}

/* --- TRASA: paczka jadąca między przystankami --- */
.rs-van{opacity:0;transform-box:fill-box;offset-rotate:0deg;
  transition:opacity .5s var(--ease);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c,var(--xped)) 60%,transparent))}
.rs-scene.rs-in .rs-van{opacity:1;animation:rsVanJedz 7s var(--ease) infinite}
@keyframes rsVanJedz{
  0%{transform:translate(60px,150px)}
  28%{transform:translate(280px,60px)}
  60%{transform:translate(520px,190px)}
  100%{transform:translate(790px,90px)}
}

/* --- CZUJNIK: słupki drgań --- */
.rs-czujnik{max-width:520px}
.rs-bar{transform-origin:center bottom;transform-box:fill-box;opacity:0;
  transition:opacity .5s var(--ease);animation:none}
.rs-scene.rs-in .rs-bar{opacity:1;transition-delay:calc(var(--i,0) * .05s);
  animation:rsDrgania 2.6s ease-in-out calc(var(--i,0) * .05s) infinite}
.rs-scene.rs-in .rs-bar-alarm{animation:rsDrganiaAlarm 1.4s ease-in-out calc(var(--i,0) * .05s) infinite}
@keyframes rsDrgania{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.82)}}
@keyframes rsDrganiaAlarm{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.12)}}

/* --- WARSTWY: płyty systemu --- */
.rs-warstwy{max-width:640px}
.rs-layer{opacity:0;transform:translateY(18px);transform-box:fill-box;
  transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * .14s)}
.rs-scene.rs-in .rs-layer{opacity:1;transform:none}

/* --- PRZEPŁYW: jeden węzeł -> wiele odbiorców --- */
.rs-przeplyw{max-width:700px}

@media(prefers-reduced-motion:reduce){
  .rs-scene *{transition:none !important;animation:none !important}
  .rs-etap,.rs-dek-a,.rs-dek-b,.rs-dek-ai,.rs-dek-wiersz,.rs-layer,.rs-bar{opacity:1 !important;transform:none !important}
  .rs-draw,.rs-dek-check{stroke-dashoffset:0 !important}
  .rs-van{opacity:1 !important;transform:translate(280px,60px) !important}
  .rs-etap-puls{stroke-opacity:0 !important}
}
@media(max-width:640px){.rs-scene{max-width:100%}}