/*! * SMCstylus Slider – carousel styles: layout, no-JS fallback, controls, dots, effects. * * @author Mihai Calin Simion | https://smcstylus.com * @copyright Copyright (c) 2026 Mihai Calin Simion * @license MIT, see the LICENSE file * @link https://github.com/smcstylus/smcstylus-slider */:root{--ss-ease: cubic-bezier(.23, 1, .32, 1);--ss-accent: #2f6bff;--ss-on-accent: #fff;--ss-ink: #1d2230;--ss-ink2: rgba(29, 34, 48, .55);--ss-surface: #fff;--ss-border: rgba(29, 34, 48, .12);--ss-shadow: 0 6px 20px rgba(20, 24, 40, .12);--ss-radius: 12px;--ss-btn: 44px;--ss-btn-radius: 50%;--ss-dot: rgba(29, 34, 48, .22);--ss-blur: 0px;--ss-glow: 0;--ss-bf: none}.ss{--ss-per: 1;--ss-gap: 0px;--ss-peek: 0px;position:relative;isolation:isolate;outline:none}.ss:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--ss-accent) 40%,transparent);border-radius:var(--ss-radius)}.ss-viewport{position:relative;overflow:hidden;padding-inline:var(--ss-peek);touch-action:pan-y pinch-zoom}.ss--y>.ss-viewport{padding-inline:0;padding-block:var(--ss-peek);touch-action:pan-x pinch-zoom;height:100%}.ss-track{position:relative;display:flex;gap:var(--ss-gap);will-change:transform}.ss--y>.ss-viewport>.ss-track{flex-direction:column;height:100%}.ss-track>*{flex:0 0 calc((100% - var(--ss-gap) * (var(--ss-per) - 1)) / var(--ss-per));min-width:0;box-sizing:border-box;position:relative}.ss--auto>.ss-viewport>.ss-track>*{flex-basis:auto}.ss-track{--ss-w: calc((100% - var(--ss-gap) * (var(--ss-per) - 1)) / var(--ss-per))}.ss-track>[data-ss-span="2"]{flex-basis:calc(var(--ss-w) * 2 + var(--ss-gap))}.ss-track>[data-ss-span="3"]{flex-basis:calc(var(--ss-w) * 3 + var(--ss-gap) * 2)}.ss-track>[data-ss-span="4"]{flex-basis:calc(var(--ss-w) * 4 + var(--ss-gap) * 3)}.ss-off>.ss-viewport>.ss-track{flex-wrap:wrap;transform:none!important}.ss-off>.ss-viewport{overflow:visible}.ss-off>.ss-viewport>.ss-track>*{opacity:1!important;translate:none!important}.ss-disabled{opacity:.35;pointer-events:none}.ss--autoheight>.ss-viewport>.ss-track{align-items:flex-start}.ss--autoheight>.ss-viewport{transition:height var(--ss-speed) var(--ss-ease)}.ss-track>.ss-aside{position:absolute;flex:none}.ss-track img,.ss-track a{-webkit-user-drag:none}.ss-track img{-webkit-user-select:none;user-select:none}.ss-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.ss-dragging>.ss-viewport>.ss-track a,.ss-dragging>.ss-viewport>.ss-track button{pointer-events:none}.ss:not(.ss-ready)>.ss-viewport>.ss-track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.ss:not(.ss-ready)>.ss-viewport>.ss-track::-webkit-scrollbar{display:none}.ss:not(.ss-ready)>.ss-viewport>.ss-track>*{scroll-snap-align:start}.ss--fade>.ss-viewport>.ss-track{display:grid;transform:none!important}.ss--fade>.ss-viewport>.ss-track>*{grid-area:1 / 1;opacity:calc(1 - var(--ss-a, 1))}.ss--fade>.ss-viewport>.ss-track>:not(.ss-visible){pointer-events:none}.ss-arrow{display:grid;place-items:center;width:var(--ss-btn);height:var(--ss-btn);padding:0;border:1px solid var(--ss-border);border-radius:var(--ss-btn-radius);background:var(--ss-surface);color:var(--ss-ink);box-shadow:var(--ss-shadow);backdrop-filter:var(--ss-bf);-webkit-backdrop-filter:var(--ss-bf);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s var(--ss-ease),opacity .25s,background .2s,color .2s,border-color .2s}.ss-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.ss-arrow:hover{background:var(--ss-accent);border-color:var(--ss-accent);color:var(--ss-on-accent)}.ss-arrow:active{transform:scale(.92)}.ss-arrow:disabled{opacity:0;pointer-events:none}.ss-arrows-inside>.ss-arrow,.ss-arrows-outside>.ss-arrow{position:absolute;top:50%;z-index:30;translate:0 -50%}.ss-arrows-inside>.ss-prev{inset-inline-start:12px}.ss-arrows-inside>.ss-next{inset-inline-end:12px}.ss-arrows-outside>.ss-prev{inset-inline-start:calc(var(--ss-btn) * -1 - 12px)}.ss-arrows-outside>.ss-next{inset-inline-end:calc(var(--ss-btn) * -1 - 12px)}.ss-arrows-hover>.ss-arrow{position:absolute;top:50%;z-index:30;translate:0 -50%;opacity:0}.ss-arrows-hover>.ss-prev{inset-inline-start:12px;transform:translate(-8px)}.ss-arrows-hover>.ss-next{inset-inline-end:12px;transform:translate(8px)}.ss-arrows-hover:hover>.ss-arrow,.ss-arrows-hover:focus-within>.ss-arrow{opacity:1;transform:none}[dir=rtl] .ss-arrow svg{transform:scaleX(-1)}.ss-arrows-edge>.ss-arrow{position:absolute;top:0;bottom:0;z-index:30;width:56px;height:auto;padding:0;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ss-ink);display:flex;align-items:center}.ss-arrows-edge>.ss-prev{inset-inline-start:0;justify-content:flex-start;background:none}.ss-arrows-edge>.ss-next{inset-inline-end:0;justify-content:flex-end;background:none}.ss-arrows-edge{--ss-fl: 64px;--ss-fr: 64px}.ss-arrows-edge.ss-at-start{--ss-fl: 0px}.ss-arrows-edge.ss-at-end{--ss-fr: 0px}.ss-arrows-edge>.ss-viewport{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--ss-fl),#000 calc(100% - var(--ss-fr)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--ss-fl),#000 calc(100% - var(--ss-fr)),transparent)}.ss--y.ss-arrows-edge>.ss-viewport{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--ss-fl),#000 calc(100% - var(--ss-fr)),transparent);mask-image:linear-gradient(to bottom,transparent,#000 var(--ss-fl),#000 calc(100% - var(--ss-fr)),transparent)}.ss--y.ss-arrows-edge>.ss-arrow{left:0;right:0;width:auto;height:44px;justify-content:center;rotate:none;translate:none}.ss--y.ss-arrows-edge>.ss-prev{top:0;bottom:auto;align-items:flex-start}.ss--y.ss-arrows-edge>.ss-next{top:auto;bottom:0;align-items:flex-end}.ss--y.ss-arrows-edge>.ss-arrow svg{rotate:90deg}[dir=rtl] .ss-arrows-edge>.ss-viewport{-webkit-mask-image:linear-gradient(to left,transparent,#000 var(--ss-fl),#000 calc(100% - var(--ss-fr)),transparent);mask-image:linear-gradient(to left,transparent,#000 var(--ss-fl),#000 calc(100% - var(--ss-fr)),transparent)}.ss-arrows-edge>.ss-arrow svg{width:30px;height:30px;padding:6px;border-radius:50%;box-sizing:border-box;background:var(--ss-surface);border:1px solid var(--ss-border);transition:background .2s,color .2s}.ss-arrows-edge>.ss-arrow:hover{background-color:transparent;color:var(--ss-on-accent)}.ss-arrows-edge>.ss-arrow:hover svg{background:var(--ss-accent);border-color:var(--ss-accent)}.ss-arrows-edge>.ss-arrow:active{transform:none}.ss-arrows-edge>.ss-arrow:active svg{transform:scale(.9)}.ss--y>.ss-arrow{left:50%;top:auto;translate:-50% 0;rotate:90deg}.ss--y>.ss-prev{top:8px;inset-inline-start:50%}.ss--y>.ss-next{bottom:8px;inset-inline-end:auto}@media(max-width:640px){.ss-arrows-outside>.ss-prev{inset-inline-start:4px}.ss-arrows-outside>.ss-next{inset-inline-end:4px}.ss{--ss-btn: 38px}}@media(hover:none){.ss-arrows-hover>.ss-arrow{opacity:1;transform:none}}.ss-arrows-onhover>.ss-arrow,.ss-bar-onhover>.ss-bar{opacity:0;transition:opacity .3s var(--ss-ease),transform .3s var(--ss-ease),background .2s,color .2s}.ss-arrows-onhover>.ss-prev{transform:translate(-6px)}.ss-arrows-onhover>.ss-next{transform:translate(6px)}.ss-bar-onhover>.ss-bar{transform:translateY(6px)}.ss-arrows-onhover:is(:hover,:focus-within)>.ss-arrow:not(:disabled),.ss-bar-onhover:is(:hover,:focus-within)>.ss-bar{opacity:1;transform:none}@media(hover:none){.ss-arrows-onhover>.ss-arrow:not(:disabled),.ss-bar-onhover>.ss-bar{opacity:1;transform:none}}.ss-bar-over>.ss-bar{position:absolute;left:0;right:0;bottom:14px;z-index:31;margin:0;pointer-events:none;--ss-dot: rgba(255, 255, 255, .5)}.ss-bar-over>.ss-bar>*{pointer-events:auto}.ss-bar-over>.ss-bar .ss-counter{color:#ffffffd9;text-shadow:0 1px 3px rgba(0,0,0,.5)}.ss-bar-over>.ss-bar .ss-counter b{color:#fff}.ss-play-hover .ss-play{opacity:0;transform:scale(.85);transition:opacity .25s,transform .25s var(--ss-ease)}.ss-play-hover:hover .ss-play,.ss-play-hover:focus-within .ss-play{opacity:1;transform:none}@media(hover:none){.ss-play-hover .ss-play{opacity:1;transform:none}}.ss-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}.ss-bar:empty{display:none}.ss-static>.ss-arrow,.ss-static>.ss-bar{display:none}.ss-counter{font:500 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ss-ink2);font-variant-numeric:tabular-nums}.ss-counter b{color:var(--ss-ink);font-weight:600}.ss-counter i{font-style:normal;margin:0 4px;opacity:.5}.ss-play{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--ss-border);border-radius:50%;background:var(--ss-surface);color:var(--ss-ink);cursor:pointer}.ss-play svg{width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}.ss-dots{position:relative;display:flex;align-items:center;gap:2px;max-width:100%}.ss-dot{position:relative;z-index:1;display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.ss-dot>span{display:block;width:8px;height:8px;border-radius:99px;background:var(--ss-dot);font-size:0;transition:background .25s,transform .25s var(--ss-ease)}.ss-dot:hover>span{background:color-mix(in srgb,var(--ss-accent) 55%,var(--ss-dot))}.ss-dots--max{overflow:hidden;justify-content:flex-start;flex:none}.ss-dots--max>.ss-dot{translate:calc(var(--ss-dsh, 0px) * -1) 0}.ss-dots--max>.ss-dot>span{scale:var(--ss-ds, 1)}.ss-ind{position:absolute;left:0;top:0;bottom:0;z-index:0;pointer-events:none;border-radius:99px;display:none}.ss-dots-dot>.ss-dots>.ss-dot>span{background:color-mix(in srgb,var(--ss-accent) calc(var(--ss-dp, 0) * 100%),var(--ss-dot));transform:scale(calc(1 + var(--ss-dp, 0) * .25));transition:none}.ss-dots-bar>.ss-dots>.ss-dot{padding:0 3px}.ss-dots-bar>.ss-dots>.ss-dot>span{width:calc(8px + var(--ss-dp, 0) * 20px);background:color-mix(in srgb,var(--ss-accent) calc(var(--ss-dp, 0) * 100%),var(--ss-dot));transition:none}.ss-dots-line>.ss-dots{gap:6px}.ss-dots-line>.ss-dots>.ss-dot{padding:0;min-width:0;height:18px}.ss-dots-line>.ss-dots>.ss-dot>span{width:28px;height:3px}.ss-dots-line>.ss-dots>.ss-ind{display:block;top:7.5px;bottom:auto;height:3px;background:var(--ss-accent);box-shadow:0 0 calc(10px * var(--ss-glow)) var(--ss-accent)}.ss-dots-capsule>.ss-dots,.ss-dots-numbers>.ss-dots{padding:4px;border-radius:99px;background:color-mix(in srgb,var(--ss-surface) 70%,transparent);border:1px solid var(--ss-border);backdrop-filter:var(--ss-bf);-webkit-backdrop-filter:var(--ss-bf);box-shadow:var(--ss-shadow),0 0 calc(24px * var(--ss-glow)) color-mix(in srgb,var(--ss-accent) 35%,transparent)}.ss-dots-capsule>.ss-dots>.ss-dot{height:26px;min-width:26px}.ss-dots-capsule>.ss-dots>.ss-dot>span{width:6px;height:6px}.ss-dots-capsule>.ss-dots>.ss-ind,.ss-dots-numbers>.ss-dots>.ss-ind{display:block;top:4px;bottom:4px;background:linear-gradient(90deg,var(--ss-accent),var(--ss-accent2, var(--ss-accent)));box-shadow:0 0 calc(16px * var(--ss-glow)) color-mix(in srgb,var(--ss-accent) 70%,transparent)}.ss-dots-capsule>.ss-dots>.ss-dot>span{background:color-mix(in srgb,var(--ss-on-accent) calc(var(--ss-dp, 0) * 100%),var(--ss-dot));transition:none}.ss-dots-numbers>.ss-dots>.ss-dot{height:28px;padding:0 10px}.ss-dots-numbers>.ss-dots>.ss-dot>span{width:auto;height:auto;background:none;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:color-mix(in srgb,var(--ss-on-accent) calc(var(--ss-dp, 0) * 100%),var(--ss-ink2));transition:none}.ss-dots-switch>.ss-dots{gap:2px;padding:5px;border-radius:99px;background:#121318c7;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 12px 40px #0000004d,0 0 0 1px #0003,0 0 32px color-mix(in srgb,var(--ss-accent) 40%,transparent)}.ss-dots-switch>.ss-dots>.ss-dot{height:34px;padding:0 15px;border-radius:99px}.ss-dots-switch>.ss-dots>.ss-dot>span{width:auto;height:auto;background:none;white-space:nowrap;font:500 13px/1 system-ui,-apple-system,sans-serif;color:color-mix(in srgb,#0b0c10 calc(var(--ss-dp, 0) * 100%),rgba(255,255,255,.72));transition:none}.ss-dots-switch>.ss-dots>.ss-ind{display:block;top:5px;bottom:5px;background:#fff;box-shadow:0 0 18px color-mix(in srgb,var(--ss-accent) 70%,transparent)}.ss-dots-switch>.ss-dots>.ss-dot:hover>span{color:color-mix(in srgb,#0b0c10 calc(var(--ss-dp, 0) * 100%),#fff)}@media(max-width:640px){.ss-dots-switch>.ss-dots>.ss-dot{padding:0 11px;height:32px}.ss-dots-switch>.ss-dots>.ss-dot>span{font-size:12.5px}}.ss-dots-progress>.ss-dots{gap:6px;flex:1;max-width:420px}.ss-dots-progress>.ss-dots>.ss-dot{flex:1;padding:0;min-width:0;height:18px}.ss-dots-progress>.ss-dots>.ss-dot>span{position:relative;width:100%;height:3px;overflow:hidden;background:var(--ss-dot)}.ss-dots-progress>.ss-dots>.ss-dot>span:after{content:"";position:absolute;inset:0;background:var(--ss-accent);transform-origin:0 50%;transform:scaleX(0)}.ss-dots-progress>.ss-dots>.ss-dot.ss-past>span:after{transform:scaleX(1)}.ss-dots-progress>.ss-dots>.ss-dot.ss-on>span:after{animation:ss-fill var(--ss-autoplay) linear both;animation-play-state:paused}.ss-dots-progress>.ss-dots.ss-run>.ss-dot.ss-on>span:after{animation-play-state:running}[dir=rtl] .ss-dots-progress>.ss-dots>.ss-dot>span:after{transform-origin:100% 50%}@keyframes ss-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.ss-fx-scale>.ss-viewport>.ss-track>*{scale:calc(1 - var(--ss-a, 0) * .14);opacity:calc(1 - var(--ss-a, 0) * .45)}.ss-fx-coverflow>.ss-viewport{perspective:1200px}.ss-fx-coverflow>.ss-viewport>.ss-track{transform-style:preserve-3d}.ss-fx-coverflow>.ss-viewport>.ss-track>*{transform:translate(calc(clamp(-2,var(--ss-p, 0),2)*-22%)) rotateY(calc(clamp(-1,var(--ss-p, 0),1)*-40deg)) translateZ(calc(var(--ss-a, 0) * -120px));filter:brightness(calc(1 - var(--ss-a, 0) * .35))}.ss-fx-parallax>.ss-viewport>.ss-track>*{overflow:hidden}.ss-fx-parallax>.ss-viewport>.ss-track>* :is(picture,.ss-par),.ss-fx-parallax>.ss-viewport>.ss-track>* :not(picture)>img{translate:calc(var(--ss-p, 0) * -50%) 0}[dir=rtl] .ss-fx-parallax>.ss-viewport>.ss-track>* :is(picture,.ss-par),[dir=rtl] .ss-fx-parallax>.ss-viewport>.ss-track>* :not(picture)>img{translate:calc(var(--ss-p, 0) * 50%) 0}.ss--y.ss-fx-parallax>.ss-viewport>.ss-track>* :is(picture,.ss-par),.ss--y.ss-fx-parallax>.ss-viewport>.ss-track>* :not(picture)>img{translate:0 calc(var(--ss-p, 0) * -50%)}.ss-fx-zoom>.ss-viewport>.ss-track>*{scale:calc(1 + var(--ss-a, 0) * .12)}.ss-fx-cards{padding-bottom:48px}.ss-fx-cards>.ss-viewport{overflow:visible}.ss-fx-cards>.ss-viewport>.ss-track>*{--up: max(var(--ss-p, 0), 0);--gone: min(var(--ss-p, 0), 0);opacity:calc(1 - (min(var(--up),3)*.22) + max(var(--gone),-1)*1);transform:translate(calc(var(--gone) * 115%)) rotate(calc(var(--gone) * 14deg)) translateY(calc(min(var(--up),3)*14px)) scale(calc(1 - (min(var(--up),3)*.07)));transform-origin:50% 100%;box-shadow:0 10px 30px rgba(0,0,0,calc(.18 - (min(var(--up),3)/25)));border-radius:var(--ss-radius)}[dir=rtl] .ss-fx-cards>.ss-viewport>.ss-track>*{transform:translate(calc(var(--gone) * -115%)) rotate(calc(var(--gone) * -14deg)) translateY(calc(min(var(--up),3)*14px)) scale(calc(1 - (min(var(--up),3)*.07)))}@media(prefers-reduced-motion:reduce){.ss-fx-coverflow>.ss-viewport>.ss-track>*,.ss-fx-cards>.ss-viewport>.ss-track>*{transform:none}}.ss-card{display:flex;flex-direction:column;height:100%;box-sizing:border-box;color:var(--ss-ink);text-decoration:none}.ss-card .ss-card-img{aspect-ratio:1;overflow:hidden;margin-bottom:10px}.ss-card .ss-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.ss-card h3{margin:0;font-size:15px;font-weight:600;line-height:1.4;transition:color .2s}.ss-card p{margin:6px 0 0;font-size:13px;color:var(--ss-ink2)}