/* Keep the zoom running until the outgoing home slide is fully transparent.
   Loaded after template styles, including older templates saved in CMS. */
.sx-hero-slides figure.on img,
.sx-hero-slides figure.is-exiting img{animation:sxKen 9s ease-out forwards}
@keyframes sxKen{from{transform:scale(1.02)}to{transform:scale(1.10)}}
@media(prefers-reduced-motion:reduce){
  .sx-hero-slides figure.on img,
  .sx-hero-slides figure.is-exiting img{animation:none}
}

/* ---------- STRZAŁKA „przewiń niżej" ----------
   Ta sama, co w ofercie ślubnej. Element buduje hero-slideshow.js w każdym hero,
   które ma pojemnik po kropkach slajdów, więc tutaj opisujemy wyłącznie wygląd.
   Pole klikalne ma 48x56 px, żeby dało się w nie trafić kciukiem. */
.sx-hero .sx-hero-dots{display:none}
.sx-hero .sx-scroll{position:absolute;left:50%;bottom:clamp(18px,3.4svh,34px);transform:translateX(-50%);
  z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;
  width:48px;height:56px;justify-content:flex-end;color:rgba(255,255,255,.86);
  text-decoration:none;opacity:1;transition:opacity .5s ease,color .3s}
.sx-hero .sx-scroll:hover{color:#fff}
.sx-hero .sx-scroll-line{width:1px;height:26px;background:linear-gradient(to bottom,
  rgba(255,255,255,0),rgba(255,255,255,.75));transform-origin:top}
.sx-hero .sx-scroll-arrow{width:20px;height:20px;display:block}
@media(prefers-reduced-motion:no-preference){
  .sx-hero .sx-scroll-line{animation:sxScrollLine 2.4s ease-in-out infinite}
  .sx-hero .sx-scroll-arrow{animation:sxScrollArrow 2.4s ease-in-out infinite}
}
@keyframes sxScrollLine{
  0%,100%{transform:scaleY(.35);opacity:.35}
  50%{transform:scaleY(1);opacity:1}
}
@keyframes sxScrollArrow{
  0%,100%{transform:translateY(-3px);opacity:.7}
  50%{transform:translateY(2px);opacity:1}
}
/* Po zjechaniu z hero strzałka nie ma już sensu — chowamy ją miękko. */
.sx-hero.is-scrolled .sx-scroll{opacity:0;pointer-events:none}