/* Globalny efekt wejścia tła hero — jeden zoom + fade, wolno i płynnie */

:root {
  --hero-reveal-duration: 2s;
  --hero-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.hero.hero--reveal {
  overflow: hidden;
  background-image: none;
}

.hero.hero--reveal > .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--hero-image);
  background-repeat: no-repeat;
  background-size: inherit;
  background-position: inherit;
  opacity: 0;
  transform: scale(1.06);
  filter: blur(5px) brightness(0.88);
  will-change: opacity, transform, filter;
  animation: hero-media-reveal var(--hero-reveal-duration) var(--hero-reveal-ease) both;
}

@keyframes hero-media-reveal {
  from {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(5px) brightness(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1);
  }
}

/* Linia pod tytułem hero — lekki gradient, rysowanie od lewej, delikatny shimmer */
.hero-row__left::after {
  opacity: 0;
  transform: scaleX(0);
  will-change: transform, opacity, background-position;
  animation:
    hero-line-draw var(--hero-line-draw-duration, 1.35s) var(--hero-line-ease, cubic-bezier(0.16, 1, 0.3, 1))
      var(--hero-line-draw-delay, 0.32s) forwards,
    hero-line-shimmer var(--hero-line-shimmer-duration, 7s) ease-in-out
      calc(var(--hero-line-draw-duration, 1.35s) + var(--hero-line-draw-delay, 0.32s) + 0.15s) infinite;
}

@keyframes hero-line-draw {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes hero-line-shimmer {
  0%,
  100% {
    background-position: 0% 50%;
    opacity: 0.82;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero--reveal {
    background-image: var(--hero-image);
    overflow: visible;
  }

  .hero.hero--reveal > .hero__media {
    display: none !important;
  }

  .hero-row__left::after {
    animation: none;
    opacity: 0.5;
    transform: scaleX(1);
    background-size: 100% 100%;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.38) 50%,
      rgba(255, 255, 255, 0.08) 100%
    );
    box-shadow: none;
  }
}