.app-container {
  .hero-video-banner {
    position: relative;
    overflow: hidden;
    height: 640px;
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: left;
    background-color: #191325;
    min-height: 90vh;
  }

  .hero-video-banner::after {
    content: "";
    background: linear-gradient(
      180deg,
      rgba(25, 19, 37, 1) 0%,
      rgba(25, 19, 37, 0) 100%
    );
    height: 35%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .hero-video-banner__video video,
  .hero-video-banner__video img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    object-position: top;
  }

  .hero-video-banner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #19132580;
    z-index: 1;
  }

  .hero-video-banner__content {
    position: relative;
    z-index: 2;
    max-width: 1192px;
    padding: 96px 100px;
    width: 100%;
    display: flex;
    gap: 32px;
    align-items: flex-end;
    @media (max-width: 1400px) {
      padding: 96px 50px;

    }
    @media (max-width: 1000px) {
      padding: 64px 16px;
      flex-direction: column;
    }
  }
  .hero-video-banner__content-text {
    width: 61%;
    @media (max-width: 1000px) {
      width: 100%;
    }
    .button-border-white {
      margin-bottom: 8px;
    }
  }
  .hero-video-banner__content-descript {
    width: 39%;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    @media (max-width: 1000px) {
      width: 100%;
    }
    svg {
      min-width: 24px;
    }
    p {
      margin-bottom: 0;
      font-size: 19px;
      font-weight: 600;
      @media (max-width: 1000px) {
        font-size: 16px;
        font-weight: 400;
      }
    }
  }
  .hero-video-banner__content * {
    color: white;
  }

  .hero-video-banner__content p {
    font-size: 1.25rem;
    max-width: 600px;
  }

  .hero-video-banner__content a.button {
    margin-top: 32px;
  }
}

/* --- INITIAL (ukryte przed startem) --- */
.hero-video-banner .hero-video-banner__content-text h1,
.hero-video-banner .button,
.hero-video-banner .hero-video-banner__content-descript,
.hero-video-banner .hero-video-banner__video video,
.hero-video-banner .hero-video-banner__video img {
  opacity: 0;
  transform: translateY(24px);
}

/* video start scale dla efektu ken-burns */
.hero-video-banner .hero-video-banner__video video,
.hero-video-banner .hero-video-banner__video img {
  transform: scale(1.06) translateY(0); /* nie przesuwamy pionowo treści */
}

/* --- RUN (po dodaniu .animate-in) --- */
.hero-video-banner.animate-in .hero-video-banner__content-text h1 {
  animation: fadeUp 800ms cubic-bezier(.22,.65,.25,1) forwards;
}

.hero-video-banner.animate-in .button {
  animation: slideLeft 650ms cubic-bezier(.22,.65,.25,1) 160ms forwards;
}

.hero-video-banner.animate-in .hero-video-banner__content-descript {
  animation: slideRight 700ms cubic-bezier(.22,.65,.25,1) 340ms forwards;
}

/* video: szybki fade-in + powolny ken-burns */
.hero-video-banner.animate-in .hero-video-banner__video video,
.hero-video-banner.animate-in .hero-video-banner__video img {
  animation:
    videoFade 900ms ease-out forwards,
    kenBurns 8s cubic-bezier(.22,.65,.25,1) 200ms forwards;
}

/* opcjonalnie lekki fade overlay, żeby nie był „na raz” */
.hero-video-banner .hero-video-banner__overlay { opacity: .0; transition: opacity .8s ease; }
.hero-video-banner.animate-in .hero-video-banner__overlay { opacity: .5; }

/* --- KEYFRAMES --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

@keyframes slideLeft {
  from { opacity: 0; transform: translate(-28px, 0); }
  to   { opacity: 1; transform: translate(0, 0); }
}

@keyframes slideRight {
  from { opacity: 0; transform: translate(28px, 0); }
  to   { opacity: 1; transform: translate(0, 0); }
}

@keyframes videoFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* delikatny ken-burns: skala 1.06 -> 1.0 i subtelny pan w górę */
@keyframes kenBurns {
  0%   { transform: scale(1.06) translateY(0); }
  100% { transform: scale(1.0)  translateY(0); }
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-video-banner.animate-in .hero-video-banner__content-text h1,
  .hero-video-banner.animate-in .button,
  .hero-video-banner.animate-in .hero-video-banner__content-descript,
  .hero-video-banner.animate-in .hero-video-banner__video video,
  .hero-video-banner.animate-in .hero-video-banner__video img,
  .hero-video-banner .hero-video-banner__overlay {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}