/* Container */
.sss-slider{position:relative;width:100%}
.sss-slider.sss-snap{scroll-snap-type:y mandatory;overflow-y:auto;max-height:100vh}
.sss-sections{position:relative}

/* Section & inner grid */
.sss-section{position:relative;display:flex;align-items:center;justify-content:center;padding:4rem 1rem;scroll-snap-align:start}
.sss-inner{width:100%;max-width:1200px;display:grid;grid-template-columns:1fr 1fr;gap:24px;position:relative}

/* Center soft glow like Pallas */
.sss-inner::before{
  content:""; position:absolute; top:-6vh; bottom:-6vh; left:50%; width:60px; transform:translateX(-50%);
  pointer-events:none;
  background: radial-gradient(closest-side, rgba(0,0,0,.18), rgba(0,0,0,0) 70%);
  opacity:.42; filter: blur(1px);
}

/* Halves */
.sss-half{position:relative;overflow:hidden;border-radius:20px;min-height:60vh;background:#fff;
  box-shadow:0 10px 40px rgba(2,6,23,.10);
  transition:transform 1000ms cubic-bezier(0.77,0,0.175,1), opacity 900ms ease;
  opacity:0;
}
.sss-media{position:absolute;inset:0;background-size:cover;background-position:center}
.sss-content{position:relative;z-index:2;padding:2rem;background:linear-gradient(to bottom, rgba(255,255,255,.88), rgba(255,255,255,.68))}

/* Start positions for merge */
.sss-left{ transform: translateX(-100%); }
.sss-right{ transform: translateX(100%); }

/* Animate in */
.sss-section.in-view .sss-half{ transform: translateX(0); opacity:1; }

/* Arrows */
.sss-nav{position:fixed; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  border:2px solid #111; background:#fff; opacity:.85; z-index:50;
}
.sss-prev{left:24px}
.sss-next{right:24px}
.sss-nav::before{content:""; position:absolute; inset:0; margin:auto; width:10px; height:10px; border-top:2px solid #111; border-right:2px solid #111; transform:rotate(225deg)}
.sss-next::before{ transform:rotate(45deg) }

/* Dots */
.sss-dots{position:fixed; right:24px; bottom:24px; list-style:none; margin:0; padding:0; display:flex; gap:8px; z-index:50}
.sss-dots li{width:10px; height:10px; border-radius:50%; border:2px solid #111; background:transparent; cursor:pointer; opacity:.6}
.sss-dots li.active, .sss-dots li:hover{ background:#111; opacity:1 }

@media(max-width:920px){
  .sss-inner{grid-template-columns:1fr}
  .sss-half{transform:none!important; opacity:1!important; min-height:44vh}
  .sss-nav, .sss-dots{position:absolute}
}