/* 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);
  }
}

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

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