/* ============================================================
   vc-showcase.css — kinowe bandy „Importujemy też" w katalogu
   Wstawiane co ~6 kart w .cat-grid (grid-column:1/-1).
   Efekt: clip-path wipe + Ken Burns zoom + parallax + czerwona poświata.
   Reveal sterowany istniejącym IO katalogu: [data-reveal] -> .is-visible
   ============================================================ */

.cat-showcase{
  grid-column:1/-1;
  display:grid;
  place-items:center;
  margin:clamp(8px,1.4vw,20px) 0;
}

.cat-showcase__inner{
  position:relative;
  width:min(100%,1040px);
  overflow:hidden;
  border-radius:var(--vc-radius-lg,16px);
  border:1px solid rgba(255,255,255,0.08);
  background:#070708;
  box-shadow:0 24px 70px rgba(0,0,0,0.6);
  /* stan startowy: zasłonięte od prawej (wipe w prawo) + delikatne uniesienie */
  clip-path:inset(0 100% 0 0 round var(--vc-radius-lg,16px));
  transition:clip-path .9s var(--vc-ease-reveal,cubic-bezier(0.16,1,0.3,1)),
             box-shadow .6s ease;
}
.cat-showcase.is-visible .cat-showcase__inner{
  clip-path:inset(0 0 0 0 round var(--vc-radius-lg,16px));
  box-shadow:0 24px 70px rgba(0,0,0,0.6),
             0 0 0 1px rgba(255,18,48,0.18),
             0 0 42px rgba(255,18,48,0.22);
}

/* warstwa parallax — nieco wyższa niż kontener, by mieć zapas na ruch */
.cat-showcase__media{
  position:relative;
  height:116%;
  margin-top:-8%;
  transform:translate3d(0, var(--band-shift,0px), 0);
  will-change:transform;
}
.cat-showcase__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  /* Ken Burns: start lekko przybliżone, po reveal powolny powrót */
  transform:scale(1.12);
  transition:transform 8s cubic-bezier(0.22,1,0.36,1);
}
.cat-showcase.is-visible .cat-showcase__media img{
  transform:scale(1.0);
}

/* przyciemnienie u dołu pod etykietę */
.cat-showcase__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(4,4,4,0.86) 0%,rgba(4,4,4,0.30) 34%,transparent 60%);
}

.cat-showcase__label{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:6px;
  padding:clamp(16px,2.4vw,28px) clamp(18px,2.6vw,32px);
}
.cat-showcase__kicker{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-size:0.72rem;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;
  color:#ff3147;
}
.cat-showcase__kicker::before{
  content:"";width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#ff1230,#b90018);
  box-shadow:0 0 10px rgba(255,18,48,0.7);
}
.cat-showcase__model{
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:800;line-height:1.04;
  letter-spacing:0.01em;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,0.6);
}

/* wjazd etykiety po wipe */
.cat-showcase__kicker,
.cat-showcase__model{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s var(--vc-ease-reveal,cubic-bezier(0.16,1,0.3,1));
}
.cat-showcase.is-visible .cat-showcase__kicker{transition-delay:.5s;opacity:1;transform:none;}
.cat-showcase.is-visible .cat-showcase__model{transition-delay:.62s;opacity:1;transform:none;}

@media (max-width:760px){
  .cat-showcase__media{height:100%;margin-top:0;transform:none;}
}

@media (prefers-reduced-motion: reduce){
  .cat-showcase__inner{clip-path:inset(0 0 0 0 round var(--vc-radius-lg,16px));transition:none;}
  .cat-showcase__media{transform:none;}
  .cat-showcase__media img{transform:none;transition:none;}
  .cat-showcase__kicker,
  .cat-showcase__model{opacity:1;transform:none;transition:none;}
}