/* ============================================
   Horizontal Slide FX for Elementor v2.0.0
   ============================================ */

/* Astra fix — overflow-x:clip nie niszczy position:sticky */
html, body {
  overflow-x: clip !important;
}

/* ── Wrapper ── */
.scrollfx-hs-wrapper {
  position: relative;
  width: 100%;
}

/* ── Sticky kontener ── */
.scrollfx-hs-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* ── Każdy panel ── */
.scrollfx-hs-panel {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
}

/* Panel bazowy — pełna szerokość, z tyłu */
.scrollfx-hs-base {
  left: 0;
  right: 0;
  width: 100% !important;
  z-index: 1;
}

/* Panele wjeżdżające */
.scrollfx-hs-slide {
  z-index: 2;
}

/* Tło panelu */
.scrollfx-hs-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Wideo jako tło */
.scrollfx-hs-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gradient overlay */
.scrollfx-hs-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0) 70%
  );
  pointer-events: none;
  z-index: 2;
}

/* Tekst na panelu */
.scrollfx-hs-text {
  position: absolute;
  z-index: 3;
  text-decoration: none;
  cursor: default;
  max-width: 80%;
}

a.scrollfx-hs-text { cursor: pointer; }
a.scrollfx-hs-text:hover .scrollfx-hs-label {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.scrollfx-hs-label {
  display: block;
  font-size: clamp(22px, 3vw, 42px);
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.scrollfx-hs-sublabel {
  display: block;
  font-size: clamp(13px, 1.2vw, 16px);
  color: rgba(255,255,255,0.75);
  line-height: 1.4;
  max-width: 260px;
}

/* Elementor editor — wyłącz animacje */
.elementor-editor-active .scrollfx-hs-slide {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scrollfx-hs-slide { transition: none !important; }
}

/* ── Animacja tekstu ── */
.scrollfx-hs-text-anim {
  will-change: opacity, transform;
}

/* Edytor Elementor — pokaż tekst normalnie */
.elementor-editor-active .scrollfx-hs-text-anim {
  opacity: 1 !important;
  transform: none !important;
}