.msbb-slider { position:relative; isolation:isolate; width:min(100%, 1400px); margin:0 auto; overflow:hidden; background:#171717; }
.msbb-slider--full { left:50%; width:100vw; max-width:none; margin-left:-50vw; }
.msbb-slider-track { position:relative; z-index:1; display:flex; direction:ltr; transition:transform .35s ease-out; }
.msbb-slide { min-width:100%; }
.msbb-slide a { display:block; }
.msbb-slide picture { display:block; }
.msbb-slider-image { display:block; width:100%; height:auto; aspect-ratio:16/6; object-fit:cover; }
.msbb-slider--fade .msbb-slider-track { position:relative; display:block; aspect-ratio:16/6; }
.msbb-slider--fade .msbb-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .4s ease-out, visibility .4s; }
.msbb-slider--fade .msbb-slide.is-active { opacity:1; visibility:visible; }
.msbb-slider--parallax .msbb-slider-image { transform:translateY(var(--msbb-parallax-y, 0)) scale(1.08); }
.msbb-slider-control { position:absolute; z-index:4; top:50%; display:grid; place-items:center; width:48px; height:48px; padding:0; border:1px solid rgba(255,255,255,.7); border-radius:999px; background:rgba(10,35,18,.78); color:#fff; cursor:pointer; transform:translateY(-50%); box-shadow:0 4px 14px rgba(0,0,0,.3); transition:background-color .2s ease, transform .2s ease; }
.msbb-slider-control svg { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; }
.msbb-slider-control:hover { background:#2f7d32; transform:translateY(-50%) scale(1.06); }
.msbb-slider-control:focus-visible, .msbb-slider-dots button:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.msbb-slider-prev { left:16px; }
.msbb-slider-next { right:16px; }
.msbb-slider-dots { position:absolute; z-index:4; right:0; bottom:12px; left:0; display:flex; justify-content:center; gap:8px; }
.msbb-slider-dots button { width:12px; height:12px; padding:0; border:2px solid #fff; border-radius:50%; background:transparent; cursor:pointer; }
.msbb-slider-dots button[aria-current="true"] { background:#fff; }
.msbb-slider-foliage { position:absolute; z-index:3; bottom:-6px; width:130px; color:rgba(35,125,53,.58); pointer-events:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,.18)); transform-origin:bottom center; animation:msbbJungleSway 5.5s ease-in-out infinite alternate; }
.msbb-slider-foliage svg { display:block; width:100%; height:auto; overflow:visible; }
.msbb-slider-foliage path:first-child { fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:round; }
.msbb-slider-foliage path:last-child { fill:currentColor; }
.msbb-slider-foliage--left { left:-8px; }
.msbb-slider-foliage--right { right:-8px; transform:scaleX(-1); animation-name:msbbJungleSwayRight; animation-delay:-1.7s; }
@keyframes msbbJungleSway { from { transform:rotate(-2deg); } to { transform:rotate(3deg); } }
@keyframes msbbJungleSwayRight { from { transform:scaleX(-1) rotate(-2deg); } to { transform:scaleX(-1) rotate(3deg); } }
.msbb-scroll-hint { position:fixed; z-index:999; right:50%; bottom:max(18px, env(safe-area-inset-bottom)); display:grid; place-items:center; width:52px; height:52px; padding:0; border:1px solid rgba(255,255,255,.75); border-radius:999px; background:rgba(10,35,18,.88); color:#fff; cursor:pointer; opacity:0; visibility:hidden; pointer-events:none; transform:translate(50%, 12px); box-shadow:0 6px 20px rgba(0,0,0,.3); transition:opacity .2s ease, transform .2s ease, visibility .2s; }
.msbb-scroll-hint.is-visible { opacity:1; visibility:visible; pointer-events:auto; transform:translate(50%, 0); animation:msbbScrollHint 1.8s ease-in-out infinite; }
.msbb-scroll-hint svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; }
.msbb-scroll-hint:hover { background:#2f7d32; }
.msbb-scroll-hint:focus-visible { outline:3px solid #fff; outline-offset:3px; }
@keyframes msbbScrollHint { 0%,100% { transform:translate(50%, 0); } 50% { transform:translate(50%, 6px); } }
@keyframes msbbScrollHintMobile { 0%,100% { transform:translateY(0); } 50% { transform:translateY(6px); } }
@media (max-width:560px) { .msbb-slider-image, .msbb-slider--fade .msbb-slider-track { aspect-ratio:4/3; } .msbb-slider-control { width:44px; height:44px; } .msbb-slider-prev { left:8px; } .msbb-slider-next { right:8px; } .msbb-slider-foliage { bottom:-3px; width:92px; } .msbb-slider-foliage--left { left:-4px; } .msbb-slider-foliage--right { right:-4px; } .msbb-scroll-hint { right:6%; top:85%; bottom:auto; transform:translateY(12px); } .msbb-scroll-hint.is-visible { transform:translateY(0); animation-name:msbbScrollHintMobile; } }
[dir="rtl"] .msbb-slider-prev { right:16px; left:auto; }
[dir="rtl"] .msbb-slider-next { right:auto; left:16px; }
[dir="rtl"] .msbb-slider-control svg { transform:scaleX(-1); }
@media (max-width:560px) { [dir="rtl"] .msbb-slider-prev { right:8px; left:auto; } [dir="rtl"] .msbb-slider-next { right:auto; left:8px; } }
@media (prefers-reduced-motion:reduce) { .msbb-slider-track, .msbb-slider--fade .msbb-slide, .msbb-scroll-hint { transition:none; } .msbb-slider--parallax .msbb-slider-image { transform:none; } .msbb-slider-foliage, .msbb-scroll-hint.is-visible { animation:none; } }