/* ===== SBWiLK – About Scrolly (sekwencje + pozycje + kształty akcentu) ===== */

.sbw-as{
  --as-gap: 48px;
  --as-accent: #eaf3ff;
  display: grid;
  row-gap: var(--as-gap);
}

.sbw-as .asect{
  position: relative;
  min-height: var(--asect-minvh, 72vh);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  --acc-size: 1;
}
@media (max-width: 980px){
  .sbw-as .asect{ grid-template-columns: 1fr; min-height: auto; }
}

/* ===== Media (grafika) ===== */
.sbw-as .asect-media{
  position: relative;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.10));
  border-radius: 22px;
  overflow: hidden;
  will-change: transform, opacity;
  transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease;
  opacity: 1; transform: none;
}
.sbw-as .asect-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* start: slide z boku */
.js .asect.layout-img-left  .asect-media{ opacity:0; transform: translateX(-36px); }
.js .asect.layout-img-right .asect-media{ opacity:0; transform: translateX(36px); }
.js .asect.layout-full-bleed .asect-media{ opacity:0; transform: translateY(28px); }
.js .asect.in-img .asect-media{ opacity:1; transform:none; }

/* ===== Treść ===== */
.sbw-as .asect-content{ position: relative; z-index: 2; }
.sbw-as .asect-content.overlay{
  position: absolute; inset: auto 6% 6% 6%;
  z-index: 3; max-width: 780px;
}
@media (max-width:980px){
  .sbw-as .asect-content.overlay{ position: relative; inset: auto; margin-top: -90px; }
}

/* full-bleed układ */
.sbw-as .asect.layout-full-bleed{ grid-template-columns: 1fr; }
.sbw-as .asect.layout-full-bleed .asect-media{ border-radius: 18px; }
.sbw-as .asect-overlay{
  position:absolute; inset:0;
  background: var(--overlay, rgba(255,255,255,.78));
  opacity: .78;
  clip-path: polygon(0 64%, 100% 48%, 100% 100%, 0 100%);
  z-index:2;
  border-bottom-left-radius:18px;
  border-bottom-right-radius:18px;
  pointer-events:none;
}

/* ===== Akcent tła – baza ===== */
.sbw-as .asect::before{ content:none; }
.sbw-as .asect.has-accent::before{
  content:""; position:absolute; inset:0; z-index:0;
  background: var(--as-accent); opacity:.55; border-radius:22px;
  /* transform budujemy ze zmiennych (pozycja + flip + rozmiar) */
  --flip: 1;       /* 1 lub -1 (acc-mirror) */
  --tx: 0%;        /* tłumaczenie poziome (pozycja) */
  --ty: 0%;        /* startowe wejście (lekki slide z góry) */
  --sk: -12deg;    /* lekki skew (tylko diagonal) */
  transform: scaleX(var(--flip)) translate(var(--tx), var(--ty)) skewX(var(--sk)) scale(var(--acc-size));
  transform-origin: center top;
  will-change: transform, opacity;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
}

/* ===== Kształty akcentu ===== */
/* 1) Diagonal – skośny pas */
.sbw-as .asect.has-accent.shape-diagonal::before{
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 90%);
  /* skew aktywny */
}
/* 2) Bevel – ścięte rogi po przekątnej */
.sbw-as .asect.has-accent.shape-bevel::before{
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  --sk: 0deg; /* bez ukośnego przechyłu */
}
/* 3) Curve – łagodna „falka” na dole (aproksymacja wielopunktowym polygonem) */
.sbw-as .asect.has-accent.shape-curve::before{
  /* polygon z większą liczbą punktów udaje łagodną krzywą */
  clip-path: polygon(
    0 0, 100% 0,
    100% 78%, 95% 80%, 90% 82%, 85% 84%, 80% 85.5%,
    70% 87%, 58% 88%, 46% 88.8%, 34% 89.2%, 22% 89.6%,
    12% 90%, 0 90.4%
  );
  --sk: 0deg;
}

@media (max-width:980px){
  .sbw-as .asect.has-accent::before{
    clip-path:none; border-radius:18px;
  }
}

/* ===== Pozycje akcentu (docelowe) ===== */
.sbw-as .asect.has-accent.acc-left::before  { --tx:  6%; }
.sbw-as .asect.has-accent.acc-center::before{ --tx:  0%; }
.sbw-as .asect.has-accent.acc-right::before { --tx: -6%; }

/* Odbicie lustrzane (poziome) */
.sbw-as .asect.has-accent.acc-mirror::before{ --flip: -1; }

/* stan startowy akcentu (przed sekwencją) */
.js .asect.has-accent::before{
  opacity:0;
  --ty: -6%;
}
.js .asect.in-acc.has-accent::before{
  opacity:.55;
  --ty: 0%;
}

/* ===== Dekoracje – kropki ===== */
.sbw-as .asect-decor{ position:absolute; inset:8% 4% 8% 4%; z-index:1; pointer-events:none; }
.sbw-as .asect-decor .dot{
  position:absolute; border-radius:50%; width:10px; height:10px;
  opacity:.22; filter: blur(.2px);
  will-change: opacity, transform;
  transition: opacity .5s ease, transform .5s ease;
}
.js .asect .asect-decor .dot{ opacity:0; transform: scale(.6); }
.js .asect.in-dots .asect-decor .dot{ opacity:var(--dot-o,.22); transform: scale(1); }

/* ===== Teksty – wejścia ===== */
.sbw-as .asect-accent{ font-weight:900; letter-spacing:.3px; color:#0a7a54; margin-bottom:8px; }
.sbw-as .asect-title{ font-weight:900; font-size: clamp(28px, 3.8vw, 48px); line-height:1.05; margin:0 0 10px; color:#0b0f14; }
.sbw-as .asect-text{ color:#455468; max-width: 64ch; }
.sbw-as .asect-btn{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:16px; padding:12px 18px; border-radius:999px;
  background:#0a7a54; color:#fff; text-decoration:none; font-weight:900;
  box-shadow: 0 8px 28px rgba(10,122,84,.22);
}
.sbw-as .asect-btn:after{ content:"→"; }

.rev{ opacity:1; transform:none; }
.js .rev{ opacity:0; transform: translateY(14px) scale(.98); }
.js .rev.in{ opacity:1; transform:none; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }

/* parallax */
.sbw-as .par{ will-change: transform; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .js .rev{ opacity:1 !important; transform:none !important; }
  .sbw-as .par{ transform:none !important; }
  .js .asect.has-accent::before{ opacity:.55 !important; transform:none !important; }
  .js .asect .asect-decor .dot{ opacity:.22 !important; transform:none !important; }
}