/* FLOUZE — scena produktów (beton, światło z góry, LED-y po bokach) + błysk logo co 7 s (2026-10-17) */
#produkty .stage {
  background:
    radial-gradient(ellipse 70% 42% at 50% -6%, rgba(255,255,255,.30), transparent 70%),            /* światło z góry */
    linear-gradient(90deg, rgba(220,230,240,.20), transparent 24%, transparent 76%, rgba(220,230,240,.20)),  /* poświata od LED-ów */
    radial-gradient(ellipse 85% 80% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%),               /* winieta = głębia */
    url("../img/beton.jpg") center / cover;
}
#produkty .stage::before, #produkty .stage::after { display: none;
  /* (stare CSS-owe LED-y — zastąpione lampami w scenie 3D) */
  content: ""; position: absolute; top: 7%; bottom: 7%; width: 7px; z-index: 2; pointer-events: none;
  border-radius: 7px !important; background: linear-gradient(#cfd6dc, #fff 50%, #cfd6dc);
  box-shadow: 0 0 6px 1px rgba(255,255,255,.9), 0 0 22px 6px rgba(205,220,240,.55), 0 0 60px 14px rgba(190,205,225,.25);
  animation: led-puls 5s ease-in-out infinite;
}
#produkty .stage::before { left: 5%; }
#produkty .stage::after { right: 5%; }
@keyframes led-puls { 0%, 100% { opacity: .92; } 50% { opacity: 1; } }
#produkty .stage .hint { z-index: 3; }

/* błysk przejeżdżający po napisie (maska = kształt logo) */
.blysk, .blysk-f {
  position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat;
}
.blysk { --m: url("../img/flouze-logo-obw.png"); transform: translateZ(28.6px); }
.blysk.go { animation: blysk-przejazd 1.1s ease-in-out 1; }
@keyframes blysk-przejazd { from { background-position: 130% 0; } to { background-position: -30% 0; } }
/* F na slajdzie z logo: punktowy rozbłysk w obrębie litery */
.slot-logo { position: relative; }
.blysk-f { --m: url("../img/flouze-logo-obw.png");
  background: radial-gradient(circle at 11% 50%, rgba(255,255,255,1) 0, rgba(255,255,255,.85) 4%, transparent 17%) no-repeat; opacity: 0; }
.blysk-f.go { animation: blysk-f 1s ease-out 1; }
@keyframes blysk-f { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .blysk.go, .blysk-f.go, #produkty .stage::before, #produkty .stage::after { animation: none; } }

/* obramówka oplata scenę i lekko na nią nachodzi — scena wypełnia otwór ramki */
#produkty .card .stage { width: calc(100% + 22px); margin: -9px -11px 0; }
#produkty .stage { background: #1d1e20 url("../img/sc-grafit.jpg") center / cover; }

/* scena: wygenerowane w Pracowni tło pokoju (img/scena.jpg, 4:5) + animowane poświaty lamp */
#produkty .stage { background: #0b0b0c; }
#produkty .card .stage { aspect-ratio: 4 / 5; }
.stage .scena-tlo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.scena-tlo img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.stage canvas { position: relative; z-index: 1; }
.scena-blask { position: absolute; mix-blend-mode: screen; pointer-events: none; }
.scena-blask.lampa { top: 44%; width: 38%; height: 64%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse closest-side, rgba(220,235,255,.55), rgba(220,235,255,.2) 45%, transparent 78%); }
.scena-blask.l { left: 22.8%; } .scena-blask.p { left: 77.2%; }
.scena-blask.sufit { left: 0; right: 0; top: 0; height: 32%; background: radial-gradient(ellipse 62% 100% at 50% 0, rgba(230,240,255,.5), transparent 72%); }

/* 2026-10-17 (3): przycięcie tła (góra ~10%, dół ~7%) + lekki zoom + żółto-czarny pas ostrzegawczy pod sceną */
#produkty .card .stage { aspect-ratio: 1 / 1.04; }
.scena-tlo img { object-position: 50% 56%; transform: scale(1.07); transform-origin: 50% 58%; }
#produkty .stage::after {
  display: block; content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 13px; z-index: 3;
  border-radius: 0 !important; animation: none; box-shadow: none; pointer-events: none;
  background: repeating-linear-gradient(-45deg, #f2c200 0 11px, #0b0b0b 11px 22px);
  border-top: 2px solid #0b0b0b; border-bottom: 2px solid #0b0b0b;
}

/* pas ostrzegawczy z teksturą zniszczonego, malowanego drewna (2026-10-17) */
#produkty .stage::after { height: 15px; background: url("../img/pas-ostrzegawczy.jpg") repeat-x 0 0 / auto 100%; border-top: 1px solid #0b0b0b; border-bottom: 1px solid #0b0b0b; }