/* Panel: kino „ekran po ekranie”. Okno 1600×1040 (pasek + zrzut 1600×1000) skalowane i obracane w assets/panel-kino.js,
   w środku kamera najeżdża na fragmenty zrzutów. Bez JS i przy prefers-reduced-motion: jeden ekran startowy i zwykłe sekcje. */
.pn-kino{position:relative;height:calc(100svh - 64px);min-height:560px;background:#05060F}
.pn-kino.kino-on{height:780vh}
.pn-scena{position:sticky;top:64px;height:calc(100svh - 64px);min-height:560px;overflow:hidden;color:#fff;
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif}
.pn-tlo{position:absolute;inset:0;background:radial-gradient(50% 58% at 68% 52%,rgba(79,70,229,.3),transparent 70%),radial-gradient(28% 34% at 92% 10%,rgba(6,182,212,.14),transparent 70%),linear-gradient(180deg,#04050D,#0A0D26)}

/* tekst startowy */
.pn-start{position:absolute;z-index:3;top:50%;left:max(28px,5vw);width:min(560px,40vw);transform:translateY(calc(-50% + (1 - var(--h,1)) * -40px));opacity:var(--h,1)}
.pn-start.znik,.pn-pod.znik,.pn-tel.znik{visibility:hidden}
.pn-start h1{font-size:clamp(40px,4.6vw,72px);letter-spacing:-.035em;line-height:.98;text-wrap:balance}
.pn-start .lead{margin-top:20px;color:rgba(255,255,255,.74);max-width:46ch}
.pn-cta{display:flex;align-items:center;gap:14px 26px;margin-top:30px;flex-wrap:wrap}
.pn-kino .btn.bialy{background:#fff;border-color:#fff;color:var(--ink)}
.pn-kino .btn.bialy:hover{background:#E6E8FF;border-color:#E6E8FF}
.pn-kino .link.jasny{color:#fff;border-color:#22D3EE}
.pn-kino .link.jasny:hover{color:#A5F3FC}

/* okno panelu */
.pn-okno{position:absolute;z-index:2;left:0;top:0;width:1600px;height:1040px;transform-origin:0 0;border-radius:18px;overflow:hidden;background:#fff;visibility:hidden;
  box-shadow:0 0 0 2px rgba(255,255,255,.16),0 80px 160px -50px rgba(0,0,0,.95),0 0 240px -40px rgba(99,102,241,.6)}
.pn-pasek{position:relative;display:flex;align-items:center;gap:12px;height:40px;padding:0 18px;background:#ECEDF0;border-bottom:1px solid #DADCE0}
.pn-pasek i{width:14px;height:14px;border-radius:50%;background:#FF5F57}
.pn-pasek i:nth-child(2){background:#FEBC2E}
.pn-pasek i:nth-child(3){background:#28C840}
.pn-pasek span{position:absolute;left:50%;top:7px;width:420px;height:26px;margin-left:-210px;border-radius:8px;background:#fff;color:#5F6368;font:15px/26px var(--sys);text-align:center}
.pn-ekran{position:relative;width:1600px;height:1000px;overflow:hidden;background:#fff}
.pn-ekran::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--sw,0);background:radial-gradient(75% 85% at var(--sx,50%) var(--sy,50%),rgba(5,6,15,0) 45%,rgba(5,6,15,.6) 100%)}
.pn-tresc{position:absolute;left:0;top:0;width:1600px;height:1000px;transform-origin:0 0}
.pn-tresc img{position:absolute;left:0;top:0;width:1600px;height:1000px;max-width:none;opacity:0;transform:scale(1.015);filter:blur(5px);transition:opacity .35s ease,transform .6s cubic-bezier(.2,.8,.2,1),filter .45s}
.pn-tresc img:first-child,.pn-tresc img.jest{opacity:1;transform:none;filter:none}

/* kursor z kliknięciem */
.pn-kursor{position:absolute;left:0;top:0;width:34px;height:34px;transform-origin:0 0;opacity:0;pointer-events:none}
.pn-kursor svg{display:block;width:34px;height:34px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.pn-kursor::after{content:"";position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;border:3px solid #16824A;opacity:0}
.pn-kursor.klik::after{animation:pnKlik .6s ease-out}
@keyframes pnKlik{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(1.7)}}

/* telefony na końcu */
.pn-tel{position:absolute;z-index:3;right:max(24px,4vw);top:50%;display:flex;gap:20px;opacity:var(--t,0);transform:translateY(calc(-50% + (1 - var(--t,0)) * 140px))}
.pn-fon{width:min(190px,12vw);aspect-ratio:390/844;padding:7px;border-radius:30px;background:#0D0E13;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),0 50px 100px -30px rgba(0,0,0,.9),0 0 120px -30px rgba(99,102,241,.55)}
.pn-fon img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:24px}
.pn-fon:nth-child(2){margin-top:70px}

/* podpisy ekranów */
.pn-pod{position:absolute;z-index:3;top:50%;left:max(28px,5vw);width:min(430px,29vw);transform:translateY(calc(-50% + (1 - var(--v,0)) * 26px));opacity:var(--v,0)}
.pn-pod h2{font-size:clamp(32px,3.4vw,54px);letter-spacing:-.035em;line-height:1}
.pn-pod p{margin-top:16px;font-size:clamp(17px,1.25vw,19px);line-height:1.55;color:rgba(255,255,255,.74)}
.pn-pod small{display:block;margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.5)}
.pn-pod.pn-pod-tel{width:min(400px,26vw)}

/* spis rozdziałów */
.pn-rozdz{position:absolute;z-index:5;left:50%;bottom:14px;display:flex;gap:22px;transform:translateX(-50%);opacity:var(--r,0);font-weight:600;font-size:14px;white-space:nowrap}
.pn-rozdz::before{content:"";position:absolute;z-index:-1;left:-110px;right:-110px;top:-26px;bottom:-20px;background:radial-gradient(farthest-side,rgba(4,5,14,.94) 45%,rgba(4,5,14,0));pointer-events:none}
.pn-rozdz a{padding:5px 0;color:rgba(255,255,255,.55);text-decoration:none;border-bottom:2px solid transparent}
.pn-rozdz a:hover{color:#fff}
.pn-rozdz a.on{color:#fff;border-color:#22D3EE}

/* telefon pionowo: okno u góry, tekst na dole */
.pn-kino.pion .pn-start{top:auto;bottom:20px;left:18px;right:18px;width:auto;transform:translateY(calc((1 - var(--h,1)) * -30px))}
.pn-kino.pion .pn-start .lead{margin-top:14px;font-size:16px}
.pn-kino.pion .pn-cta{margin-top:20px}
.pn-kino.pion .pn-pod,.pn-kino.pion .pn-pod.pn-pod-tel{top:auto;bottom:22px;left:18px;right:18px;width:auto;transform:translateY(calc((1 - var(--v,0)) * 20px))}
.pn-kino.pion .pn-pod h2{font-size:30px}
.pn-kino.pion .pn-pod p{margin-top:10px;font-size:16px}
.pn-kino.pion .pn-tel{left:50%;right:auto;top:3%;transform:translateX(-50%) translateY(calc((1 - var(--t,0)) * 90px))}
.pn-kino.pion .pn-fon{width:34vw}
.pn-kino.pion .pn-rozdz{display:none}

/* bez ruchu */
.pn-kino.statyczne .pn-pod,.pn-kino.statyczne .pn-tel,.pn-kino.statyczne .pn-rozdz{display:none}