.showreel {
    position: relative;
    display: grid;                 /* overlap bez utraty wysokości */
    width: min(1200px, 100%);      /* 1200px na desktopie, 100% na mobile */
    margin: 24px auto;
    border-radius: 16px;
    overflow: hidden;
    background: #0b1b2a;
    box-shadow: 0 14px 36px rgba(0,0,0,.18);
    --dur: 24s;                    /* można nadpisać per-widget */
  }
  .showreel__slide {
    grid-area: 1 / 1;
    position: relative;
    opacity: 0;
    transform: scale(1.02);
    animation: showreel-fade var(--dur) linear infinite;
    /* animation-delay ustawiamy JS-em per-slajd */
  }
  .showreel__slide img {
    display: block;
    width: 100%;
    height: auto;                  /* brak cropu */
    filter: saturate(1.02) contrast(1.02);
  }
  .showreel__slide figcaption{
    position:absolute; left:16px; bottom:16px;
    color:#fff; background:rgba(0,0,0,.45);
    border-left:4px solid #1f8bff;
    padding:.6rem .8rem; border-radius:12px;
    backdrop-filter: blur(2px);
  }
  .showreel__slide figcaption strong{display:block; font-size:1rem;}
  .showreel__slide figcaption span{font-size:.9rem; opacity:.9;}

  @keyframes showreel-fade{
    0%{opacity:0; transform:scale(1.02);}
    6%{opacity:1; transform:scale(1.00);}
    12%{opacity:1; transform:scale(1.00);}
    18%{opacity:0; transform:scale(1.00);}
    100%{opacity:0;}
  }

  .showreel.is-paused .showreel__slide,
  .showreel.is-paused .showreel__progress { animation-play-state: paused; }

  .showreel__toggle{
    position:absolute; right:12px; bottom:12px;
    width:40px; height:40px; border-radius:50%; border:0;
    background: rgba(0,0,0,.45); color:#fff;
    display:grid; place-items:center; cursor:pointer;
  }
  .showreel__progress{
    position:absolute; left:0; bottom:0; height:3px; width:100%;
    background: rgba(255,255,255,.12);
  }
  .showreel__progress::after{
    content:""; display:block; height:100%; width:0;
    background: linear-gradient(90deg,#1f8bff,#00c0a3);
    animation: showreel-progress var(--dur) linear infinite;
  }
  @keyframes showreel-progress{ to{ width:100%; } }

  @media (prefers-reduced-motion: reduce){
    .showreel__slide{ animation:none; opacity:1; }
    .showreel__progress{ display:none; }
  }