/* FLOUZE — sekcja SESJE: realistyczna roleta odsłania tablicę, listwa LED pod kasetą, kupki zdjęć z sesji i telefony z filmami
   w lekkim chaosie, czerwone sznurki między pinezkami/gwoździami (2026-10-18) */
.sesje-sek { padding-top: 56px; }
.sesje-tytul { margin-bottom: 26px; }
.rol { position: relative; max-width: 1100px; margin: 0 auto; }
.rol-tablica {
  position: relative; overflow: hidden; border: 10px solid #050505;
  background:
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.4px) 0 0 / 7px 7px,
    radial-gradient(rgba(0,0,0,.35) 1.2px, transparent 1.6px) 3px 4px / 9px 9px,
    radial-gradient(120% 90% at 50% 0%, #3a2a1c 0%, #241911 60%, #17100b 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.8), 0 30px 70px -30px rgba(0,0,0,.9);
}

/* ── rzędy slotów (jak na szkicu: 5 / 4 / 5 …, pod spodem telefony z filmami) ── */
.tab-rzedy { --gap: clamp(10px, 2.2vw, 26px); position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(18px, 3vw, 34px);
  padding: clamp(58px, 7vw, 76px) clamp(10px, 3vw, 34px) clamp(30px, 4vw, 48px); min-height: 380px; }
.rzad { display: flex; justify-content: center; align-items: flex-start; gap: var(--gap); }
.rzad-foto .slot { width: calc((100% - (var(--kol) - 1) * var(--gap)) / var(--kol)); }
.rzad-film { margin-top: clamp(4px, 1.5vw, 16px); }
.rzad-film .slot { width: min(calc((100% - (var(--kol-film) - 1) * var(--gap)) / var(--kol-film)), 240px); }
.slot { position: relative; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)); }
.slot .klisza { width: 100%; }

/* ── kupka zdjęć jednej sesji ── */
.sesja { position: relative; display: block; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; color: #fff; font: inherit; text-align: center; }
.stos { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.22; }
.zdj {
  position: absolute; left: 12%; top: 6%; width: 76%; z-index: var(--z, 1); padding: 3.4%; background: #ece9e2;
  box-shadow: 0 10px 18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.08);
  transform: translateX(var(--x, 0)) rotate(var(--r, 0deg)); transform-origin: 50% 85%;
  transition: transform .5s cubic-bezier(.2, .9, .25, 1.1);
}
.sesja.n-1 .zdj { left: 9%; width: 82%; }
.zdj img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.zdj-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.zdj-play svg { width: 34px; height: 34px; padding: 10px 8px 10px 12px; background: rgba(0,0,0,.55); border: 2px solid #fff; fill: #fff; }
.zdj .pinezka { position: absolute; top: -20px; left: 50%; width: 40px; height: auto; transform: translateX(-50%); filter: drop-shadow(0 5px 3px rgba(0,0,0,.65)); z-index: 3; }
.sesja-podpis { display: block; margin-top: 2px; font: 10.5px 'Space Mono', monospace; letter-spacing: .18em; color: #d8d2c8; text-shadow: 0 1px 6px rgba(0,0,0,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sesja:focus-visible { outline: 2px solid var(--ice, #cfd2d4); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .sesja:hover .zdj:not(.przod) { transform: translateX(calc(var(--x, 0) * 1.7)) rotate(calc(var(--r, 0deg) * 1.5)); }
  .sesja:hover .zdj.przod { transform: translateY(-5px) rotate(var(--r, 0deg)); }
}

/* ── czerwone sznurki ── */
.sznurki { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.sznurki .sz { fill: none; stroke: #c3121c; stroke-width: 1.6; stroke-linecap: round; }
.sznurki .sz-cien { fill: none; stroke: rgba(0,0,0,.5); stroke-width: 1.8; transform: translate(2px, 4px); filter: blur(1.2px); }
.sznurki .sz-wezel { fill: #8f0c14; }
.rol:not(.szybko) .sznurki .sz, .rol:not(.szybko) .sznurki .sz-cien { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rol.swieci:not(.szybko) .sznurki .sz, .rol.swieci:not(.szybko) .sznurki .sz-cien { animation: sz-rozwin 1.1s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes sz-rozwin { to { stroke-dashoffset: 0; } }
.sznurki .sz-klik { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.sznurki .sz-klik:hover { stroke: rgba(255,60,60,.25); }
/* kreator (podgląd w panelu) */
.slot.wybrany { outline: 2px dashed #ff3b3b; outline-offset: 6px; }
.kreator-info { position: absolute; left: 10px; right: 10px; top: 8px; z-index: 7; padding: 6px 10px; background: rgba(0,0,0,.72); border: 1px solid rgba(255,59,59,.6);
  font: 10px/1.4 'Space Mono', monospace; letter-spacing: .08em; color: #ffd6d6; text-align: center; pointer-events: none; }

/* ── oświetlenie: listwa LED pod kasetą rolety + świetlne plamy na tablicy, zapala się jak świetlówka ── */
.tab-swiatla { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background:
    linear-gradient(rgba(240,244,250,.22), rgba(240,244,250,.07) 26%, transparent 62%),
    radial-gradient(ellipse 30% 38% at 18% 0%, rgba(240,244,250,.16), transparent 70%),
    radial-gradient(ellipse 30% 38% at 50% 0%, rgba(240,244,250,.2), transparent 70%),
    radial-gradient(ellipse 30% 38% at 82% 0%, rgba(240,244,250,.16), transparent 70%); }
.rol-mrok { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse 85% 95% at 50% 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.6) 100%); }
.rol-mrok::before { content: ""; position: absolute; inset: 0; background: #000; opacity: .84; }
.rol-led { position: absolute; left: 3%; right: 3%; bottom: -5px; height: 4px; background: #3a3d40; box-shadow: 0 1px 0 rgba(0,0,0,.6); }
.rol.swieci .rol-led { background: #f4f7fb; box-shadow: 0 0 6px 1px rgba(255,255,255,.9), 0 6px 24px 6px rgba(225,235,250,.45); animation: lampa-wl .9s steps(1) 1; }
.rol.swieci .tab-swiatla { opacity: 1; animation: lampa-wl .9s steps(1) 1, swiatlo-oddech 6s ease-in-out .9s infinite; }
.rol.swieci .rol-mrok::before { animation: mrok-wl 1.1s steps(1) forwards; }
.rol.szybko .rol-mrok::before { animation: none; opacity: 0; }
@keyframes lampa-wl { 0% { opacity: 0; } 10% { opacity: 1; } 18% { opacity: .15; } 30% { opacity: .9; } 38% { opacity: .05; } 55% { opacity: 1; } 62% { opacity: .45; } 100% { opacity: 1; } }
@keyframes swiatlo-oddech { 0%, 100% { opacity: 1; } 50% { opacity: .86; } }
@keyframes mrok-wl { 0% { opacity: .84; } 10% { opacity: .1; } 18% { opacity: .7; } 30% { opacity: .15; } 38% { opacity: .8; } 55% { opacity: .05; } 62% { opacity: .5; } 100% { opacity: 0; } }

/* ── roleta (aluminium malowane proszkowo, tekstura img/roleta-tekstura.jpg) ── */
.rol-roleta { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.rol-plachta {
  position: absolute; left: 0; right: 0; top: 0; height: 100%; overflow: hidden;
  background: url("../img/roleta-tekstura.jpg") 0 100% / auto 168px repeat;   /* zakotwiczone na dole: listwy jadą w górę razem z płachtą */
  box-shadow: 0 8px 18px rgba(0,0,0,.7);
  transition: height 3s cubic-bezier(.6, .02, .32, 1);
}
.rol-plachta::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.08) 18%, rgba(0,0,0,0) 60%, rgba(0,0,0,.25)),
              linear-gradient(90deg, rgba(0,0,0,.35), transparent 7%, transparent 93%, rgba(0,0,0,.35)); }
.rol.otwarta .rol-plachta { height: 0; animation: rol-drgaj .12s linear 25; }
@keyframes rol-drgaj { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
.rol-dol { position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  background: linear-gradient(#7a5c4f 0, #5a4237 18%, #3b2b24 60%, #21170f 82%, #0b0807 82%, #0b0807 100%);
  border-top: 1px solid #a5867a; }
.rol-dol i { position: absolute; left: 50%; top: 4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #e9e4de, #8a827b 60%, #3c3631); box-shadow: 0 1px 2px rgba(0,0,0,.7); }
.rol-prow { position: absolute; top: 0; bottom: 0; width: 12px; z-index: 2;
  background: linear-gradient(90deg, #1b1310, #4c382f 30%, #6d5246 50%, #3d2c25 75%, #120d0b); box-shadow: 0 0 6px rgba(0,0,0,.6); }
.rol-prow.l { left: 0; } .rol-prow.p { right: 0; }
.rol-kaseta {
  position: absolute; left: -8px; right: -8px; top: -8px; height: 40px; z-index: 22; pointer-events: none;
  background: linear-gradient(#8a6c5f 0, #5f463b 10%, #4a362d 45%, #33241e 78%, #1b130f 100%);
  border: 1px solid #0a0706; border-radius: 3px 3px 10px 10px / 3px 3px 14px 14px !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 10px 18px rgba(0,0,0,.75);
}
.rol-kaseta::before, .rol-kaseta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14px; background: linear-gradient(90deg, #120d0b, #3a2a23); }
.rol-kaseta::before { left: 0; } .rol-kaseta::after { right: 0; transform: scaleX(-1); }
.rol.szybko .rol-roleta { display: none; }

@media (max-width: 600px) {
  .zdj .pinezka { width: 32px; top: -16px; }
  .rol-kaseta { height: 32px; }
  .rol-prow { width: 8px; }
  .sesja-podpis { font-size: 9px; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) { .rol-plachta, .zdj { transition: none; } .rol.otwarta .rol-plachta { animation: none; } }