/* =============================================================
   SCENA — wspólne tło graficzne Grupy Polskie Zdrowie
   (ekran logowania i strona główna smartlukasz.pl):
   zorza, siatka techniczna, celownik, płytki medyczne, pasek EKG.
   Kontener .scena wypełnia rodzica (position:absolute); warstwy
   rysuje /static/scena.js. Treść kładzie się obok w warstwie z z-index > 5.
   ============================================================= */
.scena{--e:cubic-bezier(.22,.61,.36,1);position:absolute;inset:0;overflow:hidden;
 background:#080E22;color:#EAF1FB;pointer-events:none}

/* zorza — trzy plamy światła, powolny dryf */
.scena .zorza{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.scena .z1{width:62vmax;height:62vmax;left:-18vmax;top:-24vmax;
 background:radial-gradient(circle,#1D3A7A 0%,transparent 68%);animation:scena-dryf1 34s var(--e) infinite alternate}
.scena .z2{width:54vmax;height:54vmax;right:-16vmax;bottom:-20vmax;
 background:radial-gradient(circle,#0B5E77 0%,transparent 68%);animation:scena-dryf2 41s var(--e) infinite alternate}
.scena .z3{width:40vmax;height:40vmax;left:52%;top:8%;
 background:radial-gradient(circle,#3A2F6E 0%,transparent 70%);opacity:.4;
 animation:scena-dryf3 47s var(--e) infinite alternate}
@keyframes scena-dryf1{to{transform:translate(9vmax,7vmax) scale(1.14)}}
@keyframes scena-dryf2{to{transform:translate(-8vmax,-6vmax) scale(1.1)}}
@keyframes scena-dryf3{to{transform:translate(-11vmax,9vmax) scale(1.2)}}

/* siatka techniczna */
.scena .siatka{position:absolute;inset:0;
 background-image:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
                  linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
 background-size:52px 52px;
 -webkit-mask-image:radial-gradient(100% 85% at 50% 45%,#000 20%,transparent 78%);
 mask-image:radial-gradient(100% 85% at 50% 45%,#000 20%,transparent 78%)}

/* wielki celownik */
.scena .celownik{position:absolute;left:50%;top:50%;width:min(112vmin,1000px);aspect-ratio:1;
 transform:translate(-50%,-50%);opacity:.5}
.scena .celownik svg{width:100%;height:100%;overflow:visible}
.scena .celownik .p{fill:none;stroke:rgba(90,180,215,.20);stroke-width:1}
.scena .celownik .p2{fill:none;stroke:rgba(90,180,215,.32);stroke-width:1.4;stroke-dasharray:3 9}
.scena .obrot{transform-origin:50% 50%;animation:scena-obr 90s linear infinite}
.scena .obrot-w{transform-origin:50% 50%;animation:scena-obr 130s linear infinite reverse}
@keyframes scena-obr{to{transform:rotate(360deg)}}
.scena .omiatanie{transform-origin:250px 250px;animation:scena-obr 7s linear infinite}

/* płytki z grafiką medyczną (pozycje w % kontenera, rysuje scena.js) */
.scena .mozaika{position:absolute;inset:0}
.scena .plytka{position:absolute;border-radius:18px;overflow:hidden;
 background:linear-gradient(150deg,rgba(28,44,86,.62),rgba(10,18,40,.5));
 border:1px solid rgba(120,170,215,.14);
 box-shadow:0 30px 70px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
 backdrop-filter:blur(3px);opacity:0;
 animation:scena-wejscie 1.1s var(--e) forwards;will-change:transform}
.scena .plytka svg{width:100%;height:100%;display:block}
.scena .plytka .etykieta{position:absolute;left:14px;bottom:11px;font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;
 font-size:9.5px;letter-spacing:.22em;color:rgba(150,200,225,.6);text-transform:uppercase}
.scena .plytka::after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,transparent 55%,rgba(8,14,34,.55) 100%)}
@keyframes scena-wejscie{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}

/* pasek EKG na dole */
.scena .ekg{position:absolute;left:0;right:0;bottom:0;height:150px;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.scena .ekg path{fill:none;stroke:rgba(52,192,218,.5);stroke-width:1.6;stroke-linejoin:round;
 stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(52,192,218,.55))}
.scena .ekg .puls{stroke:#5FE3F5;stroke-width:2.2;stroke-dasharray:150 4000;
 animation:scena-biegnie 5.5s linear infinite;filter:drop-shadow(0 0 10px rgba(95,227,245,.9))}
@keyframes scena-biegnie{from{stroke-dashoffset:4150}to{stroke-dashoffset:0}}

@media(max-width:860px){.scena .mozaika{opacity:.42}.scena .celownik{width:150vmin}}
@media(max-width:560px){.scena .mozaika{display:none}.scena .ekg{height:96px}}
@media(prefers-reduced-motion:reduce){
 .scena *{animation:none!important;transition-duration:.01ms!important}
 .scena .plytka{opacity:1;transform:none}
}