/* Home page picture slideshow (also used for the preview in the admin) */
.ss-stage { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #2f3a2c; }
.ss-slide { position: absolute; inset: 0; opacity: 0; z-index: 0; }
.ss-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-slide.is-active { opacity: 1; z-index: 2; }
.ss-slide.is-leaving { z-index: 1; }

/* the effect is chosen in the admin (data-effect); speed and interval come from --ss-speed / --ss-interval */
.ss-ready[data-effect="fade"] .ss-slide, .ss-ready[data-effect="zoom"] .ss-slide { transition: opacity var(--ss-speed, 1400ms) ease; }
.ss-ready[data-effect="fade"] .ss-slide.is-leaving, .ss-ready[data-effect="zoom"] .ss-slide.is-leaving { opacity: 1; transition: none; }   /* stays solid underneath while the next one fades in */

.ss-ready[data-effect="zoom"] .ss-slide img { transform: scale(1); transition: transform calc(var(--ss-interval, 6s) + var(--ss-speed, 1400ms) + 600ms) linear; }
.ss-ready[data-effect="zoom"] .ss-slide.is-active img, .ss-ready[data-effect="zoom"] .ss-slide.is-leaving img { transform: scale(1.12); }
.ss-prime .ss-slide img { transform: scale(1) !important; transition: none !important; }

.ss-ready[data-effect="blur"] .ss-slide { filter: blur(16px); transition: opacity var(--ss-speed, 1400ms) ease, filter var(--ss-speed, 1400ms) ease; }
.ss-ready[data-effect="blur"] .ss-slide.is-active { filter: blur(0); }
.ss-ready[data-effect="blur"] .ss-slide.is-leaving { opacity: 0; }

.ss-ready[data-effect="slide"] .ss-slide { opacity: 1; visibility: hidden; transform: translateX(100%); transition: transform var(--ss-speed, 1400ms) cubic-bezier(.65, 0, .35, 1); }
.ss-ready[data-effect="slide"] .ss-slide.is-active, .ss-ready[data-effect="slide"] .ss-slide.is-leaving, .ss-ready[data-effect="slide"] .ss-slide.is-enter { visibility: visible; }
.ss-ready[data-effect="slide"] .ss-slide.is-active { transform: none; }
.ss-ready[data-effect="slide"] .ss-slide.is-enter { transform: translateX(100%); transition: none; z-index: 2; }
.ss-ready[data-effect="slide"] .ss-slide.is-leaving { transform: translateX(-100%); }
.ss-ready[data-effect="slide"][data-dir="prev"] .ss-slide.is-enter { transform: translateX(-100%); }
.ss-ready[data-effect="slide"][data-dir="prev"] .ss-slide.is-leaving { transform: translateX(100%); }

.ss-ready[data-effect="none"] .ss-slide { transition: none; }
@media (prefers-reduced-motion: reduce) { .ss-slide, .ss-slide img { transition: none !important; } }

/* dots and arrows (created by the script) */
.ss-dots { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; gap: 10px; z-index: 4; pointer-events: none; }
.ss-dot { pointer-events: auto; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .3s, background .3s; }
.ss-dot:hover { background: rgba(255, 255, 255, .8); } .ss-dot[aria-current="true"] { width: 28px; background: #fff; }
.ss-dot:focus-visible, .ss-arrow:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ss-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .28); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ss-arrow:hover { background: rgba(0, 0, 0, .45); } .ss-arrow svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss-prev { left: 16px; } .ss-next { right: 16px; }
@media (max-width: 600px) { .ss-arrow { width: 36px; height: 36px; } .ss-prev { left: 8px; } .ss-next { right: 8px; } }
.ss { touch-action: pan-y; }

/* admin preview */
.ss-demo { position: relative; height: 210px; border-radius: 14px; overflow: hidden; isolation: isolate; background: #2f3a2c; }
.ss-demo::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(30, 40, 28, calc(.5 * var(--k, 1))); }
.ss-demo .ss-dots { z-index: 5; bottom: 12px; } .ss-demo .ss-arrow { z-index: 5; }
.ss-demo .msg { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; z-index: 6; text-align: center; padding: 20px; font-size: .95rem; }