/* ------------------------------------------------------------------
   Showcase — portfolio z rozwijaniem klipów
   Karty pokazują tylko poster; wideo powstaje dopiero w lightboxie.
   Dzięki temu strona nie ciągnie siedmiu plików wideo na starcie.
   Zależy od --color-gold-* / --color-night-* z global.css.
   ------------------------------------------------------------------ */

/* ---------- Odstęp hero → portfolio -------------------------------
   UWAGA przy edycji zbudowanego Tailwinda: nie da się tu wpisać do HTML
   klasy, której nie było przy budowaniu (np. pt-4 czy min-h-[80svh]) —
   taka klasa nie istnieje w skompilowanym CSS i odstęp znika do zera.
   Dlatego korekty odstępów robimy jawnym CSS-em. */

.hero-shell { min-height: 80svh }

#work { padding-top: 1.25rem }

/* ---------- Karta klipu ------------------------------------------- */

.clip {
  position: relative;
  border-radius: var(--radius-2xl, 1rem);
  border: 1px solid var(--color-night-700, #2c2820);
  background-color: var(--color-night-900, #12100e);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1),
              border-color .45s ease,
              box-shadow .45s ease,
              opacity .45s ease;
}

.clip-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: inherit;
  color: inherit;
  font: inherit;
}

.clip-frame {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--color-night-800, #1c1915);
}

.clip-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), filter .45s ease;
}

/* Przycisk play */
.clip-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / .22);
  transition: background .35s ease;
}

.clip-play > span {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .95);
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / .7);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), background .35s ease;
}

.clip-play svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-night-950, #0a0908);
}

.clip-featured .clip-play > span { width: 5rem; height: 5rem }
.clip-featured .clip-play svg { width: 2.15rem; height: 2.15rem }

/* ---------- Bloom: najechana karta wychodzi, reszta się cofa ------- */

.clip:hover,
.clip:focus-within {
  transform: translateY(-6px) scale(1.015);
  border-color: rgb(227 181 99 / .45);
  box-shadow:
    0 34px 80px -34px rgb(0 0 0 / .95),
    0 0 40px -12px rgb(212 160 68 / .28);
}

.clip:hover .clip-poster,
.clip:focus-within .clip-poster {
  transform: scale(1.045);
  filter: brightness(1.06);
}

.clip:hover .clip-play,
.clip:focus-within .clip-play { background: rgb(0 0 0 / .1) }

.clip:hover .clip-play > span,
.clip:focus-within .clip-play > span { transform: scale(1.08) }

/* Rodzeństwo przygasa — to ono robi wrażenie „reflektora na jednym klipie". */
@media (hover: hover) and (pointer: fine) {
  [data-clip-group]:has(.clip:hover) .clip:not(:hover) {
    opacity: .45;
    filter: saturate(.75);
  }
}

.clip-open:focus-visible {
  outline: 2px solid var(--color-gold-400, #e3b563);
  outline-offset: 3px;
}

/* ---------- Lightbox ---------------------------------------------- */

.lightbox[hidden] { display: none }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;                /* nad navem (z-50) */
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(10 9 8 / .92);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  animation: lb-fade .3s ease both;
}

.lightbox-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  max-width: 100%;
  max-height: 100%;
  animation: lb-rise .42s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes lb-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes lb-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.965) }
  to   { opacity: 1; transform: none }
}

.lb-video {
  display: block;
  max-height: 76vh;
  max-width: 100%;
  width: auto;
  border-radius: 1rem;
  background: #000;
  box-shadow:
    0 50px 130px -40px rgb(0 0 0 / .95),
    0 0 0 1px rgb(227 181 99 / .2);
}

.lb-caption {
  max-width: 62ch;
  text-align: center;
}

.lb-tag {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-gold-400, #e3b563);
}

.lb-title {
  margin-top: .4rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

.lb-desc {
  margin-top: .4rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--color-stone-400, #a8a29e);
}

/* Sterowanie */
.lb-btn {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .16);
  background: rgb(18 16 14 / .8);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.lb-btn:hover {
  background: rgb(28 25 21 / .95);
  border-color: rgb(227 181 99 / .5);
  transform: scale(1.06);
}

.lb-btn:focus-visible {
  outline: 2px solid var(--color-gold-400, #e3b563);
  outline-offset: 3px;
}

.lb-btn svg { width: 1.25rem; height: 1.25rem }

.lb-close { top: -.5rem; right: -.5rem }
.lb-prev  { left: -1.25rem; top: 38% }
.lb-next  { right: -1.25rem; top: 38% }

/* Na wąskich ekranach strzałki idą pod wideo, żeby nie zasłaniały kadru. */
@media (max-width: 780px) {
  .lb-prev { left: .25rem }
  .lb-next { right: .25rem }
  .lb-close { top: -.25rem; right: -.25rem }
  .lb-video { max-height: 66vh }
}

.lb-counter {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-stone-500, #78716c);
}

/* Blokada scrolla tła przy otwartym lightboxie */
html.lb-open, body.lb-open { overflow: hidden }

@media (prefers-reduced-motion: reduce) {
  .clip, .clip-poster, .clip-play, .clip-play > span { transition: none }
  .clip:hover, .clip:focus-within { transform: none }
  .clip:hover .clip-poster, .clip:focus-within .clip-poster { transform: none }
  .lightbox-backdrop, .lightbox-stage { animation: none }
}