/* Complex Slider — frontend */
.cs-slider { --cs-w: 1400px; --cs-h: 650px; --cs-bg: #0b0f19; --cs-radius: 0px;
	position: relative; max-width: var(--cs-w); margin: 24px auto; background: var(--cs-bg);
	border-radius: var(--cs-radius); overflow: hidden; isolation: isolate;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.cs-layout-fullwidth { max-width: 100%; border-radius: 0; margin-left: 0; margin-right: 0; }
.cs-layout-fullscreen { max-width: 100%; margin: 0; border-radius: 0; height: 100vh; height: 100svh; }
.cs-layout-fullscreen .cs-viewport, .cs-layout-fullscreen .cs-track, .cs-layout-fullscreen .cs-slide { height: 100%; }
.cs-empty { border: 1.5px dashed #c3cfe8; border-radius: 0; padding: 26px; text-align: center; color: #5b6b8c; background: #f5f8ff; margin: 20px 0; }

.cs-viewport { position: relative; overflow: hidden; height: clamp(320px, 46vw, var(--cs-h)); }
.cs-layout-fullwidth .cs-viewport { height: clamp(360px, 44vw, var(--cs-h)); }
.cs-track { position: relative; width: 100%; height: 100%; }
.cs-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.cs-slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; z-index: 2; }

/* slide animation: track transform */
.cs-anim-slide .cs-track { display: flex; }
.cs-anim-slide .cs-slide { position: relative; flex: 0 0 100%; opacity: 1; visibility: visible; transition: none; }
.cs-anim-slide .cs-track { transition: transform .7s cubic-bezier(.22,.8,.24,1); }
.cs-anim-zoom .cs-slide { transform: scale(1.08); transition: opacity .8s ease, transform 1.4s ease, visibility 0s linear .8s; }
.cs-anim-zoom .cs-slide.is-active { transform: scale(1); transition: opacity .8s ease, transform 1.4s ease; }
/* twirl: rotate + zoom entrance, rotate-out exit (JS toggles .is-exiting) */
.cs-anim-twirl .cs-slide { transform: rotate(14deg) scale(.92); filter: blur(6px);
	transition: opacity .75s ease, transform .95s cubic-bezier(.22,.8,.24,1), filter .75s ease, visibility 0s linear .8s; }
.cs-anim-twirl .cs-slide.is-active { transform: rotate(0deg) scale(1); filter: blur(0);
	transition: opacity .75s ease, transform .95s cubic-bezier(.22,.8,.24,1), filter .75s ease; z-index: 3; }
.cs-anim-twirl .cs-slide.is-exiting { opacity: 0; transform: rotate(-12deg) scale(.96); filter: blur(5px); z-index: 2; }
/* wipe: curtain sweep over the incoming slide */
.cs-anim-wipe .cs-slide { transition: none; }
.cs-anim-wipe .cs-slide::after { content: ""; position: absolute; inset: 0; z-index: 4; background: var(--cs-bg);
	transform: translateX(-101%); visibility: hidden; pointer-events: none; }
.cs-anim-wipe .cs-slide.is-incoming { opacity: 1; visibility: visible; transition: none; z-index: 3;
	animation: csWipeHold .9s linear both; }
.cs-anim-wipe .cs-slide.is-incoming::after { visibility: visible; animation: csWipeIn .9s cubic-bezier(.65,.05,.25,1) both; }
.cs-anim-wipe .cs-slide.is-exiting { opacity: 1; visibility: visible; transition: none; z-index: 2; }
@keyframes csWipeHold { 0%, 44% { visibility: hidden; } 45%, 100% { visibility: visible; } }
@keyframes csWipeIn { 0% { transform: translateX(-101%); } 45% { transform: translateX(0); } 100% { transform: translateX(101%); } }
/* clip / mask reveal: incoming slide revealed by an animated clip-path */
.cs-anim-clip .cs-slide { transition: none; }
.cs-anim-clip .cs-slide.is-active { opacity: 1; visibility: visible; transition: none; z-index: 3;
	animation: csClipIn .9s cubic-bezier(.65,.05,.25,1) both; }
.cs-anim-clip .cs-slide.is-exiting { opacity: 1; visibility: visible; transition: none; z-index: 2; }
@keyframes csClipIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* blind: vertical slats open with a stagger to reveal the incoming slide */
.cs-anim-blind .cs-slide { transition: none; }
.cs-anim-blind .cs-slide.is-active { opacity: 1; visibility: visible; transition: none; z-index: 2; }
.cs-anim-blind .cs-slide.is-exiting { opacity: 1; visibility: visible; transition: none; z-index: 1; }
.cs-blind-mask { position: absolute; inset: 0; z-index: 3; display: flex; pointer-events: none; visibility: hidden; }
.cs-blind-mask span { flex: 1 1 auto; background: var(--cs-bg); transform: scaleY(1); transform-origin: 50% 0; }
.cs-anim-blind.is-animating .cs-blind-mask { visibility: visible; }
.cs-anim-blind.is-animating .cs-blind-mask span { animation: csBlindOpen .45s cubic-bezier(.4,0,.2,1) both; }
.cs-anim-blind.is-animating .cs-blind-mask span:nth-child(2) { animation-delay: .07s; }
.cs-anim-blind.is-animating .cs-blind-mask span:nth-child(3) { animation-delay: .14s; }
.cs-anim-blind.is-animating .cs-blind-mask span:nth-child(4) { animation-delay: .21s; }
.cs-anim-blind.is-animating .cs-blind-mask span:nth-child(5) { animation-delay: .28s; }
.cs-anim-blind.is-animating .cs-blind-mask span:nth-child(6) { animation-delay: .35s; }
.cs-anim-blind.is-animating .cs-blind-mask span:nth-child(7) { animation-delay: .42s; }
.cs-anim-blind.is-animating .cs-blind-mask span:nth-child(8) { animation-delay: .49s; }
@keyframes csBlindOpen { from { transform: scaleY(1); } to { transform: scaleY(0.0001); } }

.cs-bg { position: absolute; inset: 0; }
.cs-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-overlay { position: absolute; inset: 0; }
.cs-slide-link { position: absolute; inset: 0; z-index: 1; }
.cs-layers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cs-layer { position: absolute; line-height: 1.25 !important; pointer-events: auto; max-width: 92%; }
.cs-layer.is-center { transform: translateX(-50%); }
.cs-layer.is-right { transform: translateX(-100%); }
.cs-layer a { color: inherit; text-decoration: none; pointer-events: auto; }
/* typography overrides theme styles */
.cs-layer, .cs-layer * { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; line-height: 1.25 !important; }
.cs-layer-heading { margin: 0; font-weight: 800 !important; letter-spacing: -0.02em !important; text-wrap: balance; }
.cs-layer-text { font-weight: 400 !important; }
.cs-layer-badge { display: inline-block; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cs-glass { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.25); }
.cs-btn { display: inline-block; text-decoration: none; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.cs-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.cs-layer-image img { max-width: 100%; border-radius: 0; display: block; }

/* layer entrance animations (re-triggered by JS per slide) */
.cs-slide .cs-layer { opacity: 0; }
.cs-slide.is-active .cs-layer { animation-fill-mode: both; animation-duration: .8s; animation-timing-function: cubic-bezier(.22,.8,.24,1); }
.cs-slide.is-active .anim-fadeIn { animation-name: csFadeIn; opacity: 1; }
.cs-slide.is-active .anim-fadeInUp { animation-name: csFadeUp; }
.cs-slide.is-active .anim-fadeInDown { animation-name: csFadeDown; }
.cs-slide.is-active .anim-fadeInLeft { animation-name: csFadeLeft; }
.cs-slide.is-active .anim-fadeInRight { animation-name: csFadeRight; }
.cs-slide.is-active .anim-zoomIn { animation-name: csZoomIn; }
@keyframes csFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes csFadeUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes csFadeDown { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes csFadeLeft { from { opacity: 0; transform: translateX(-38px); } to { opacity: 1; transform: translateX(0); } }
@keyframes csFadeRight { from { opacity: 0; transform: translateX(38px); } to { opacity: 1; transform: translateX(0); } }
@keyframes csZoomIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
/* keep centering transforms when animating */
.cs-slide.is-active .cs-layer.is-center.anim-fadeInUp { animation-name: csFadeUpC; }
.cs-slide.is-active .cs-layer.is-center.anim-fadeInDown { animation-name: csFadeDownC; }
.cs-slide.is-active .cs-layer.is-center.anim-zoomIn { animation-name: csZoomInC; }
.cs-slide.is-active .cs-layer.is-right.anim-fadeInUp { animation-name: csFadeUpR; }
@keyframes csFadeUpC { from { opacity: 0; transform: translateX(-50%) translateY(34px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes csFadeDownC { from { opacity: 0; transform: translateX(-50%) translateY(-34px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes csZoomInC { from { opacity: 0; transform: translateX(-50%) scale(.86); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes csFadeUpR { from { opacity: 0; transform: translateX(-100%) translateY(34px); } to { opacity: 1; transform: translateX(-100%) translateY(0); } }
@media (prefers-reduced-motion: reduce) {
	.cs-slide, .cs-track, .cs-slide.is-active .cs-layer { animation: none !important; transition: opacity .2s ease !important; }
	.cs-slide .cs-layer { opacity: 1; }
}

/* arrows — bottom right, square, hover-only */
.cs-arrow { position: absolute; bottom: 16px; z-index: 7; width: 46px; height: 46px; border-radius: 0;
	border: 1px solid rgba(255,255,255,.35); background: rgba(10,16,32,.5); color: #fff; cursor: pointer;
	display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	transition: background .2s, opacity .25s ease, transform .25s ease;
	opacity: 0; pointer-events: none; }
.cs-slider:hover .cs-arrow, .cs-slider:focus-within .cs-arrow { opacity: 1; pointer-events: auto; }
.cs-arrow:hover { background: rgba(255,255,255,.92); color: #0b0f19; transform: translateY(-2px); }
.cs-next { right: 16px; } .cs-prev { right: 70px; }

/* thumbnails */
.cs-thumbs { position: absolute; bottom: 14px; left: 16px; z-index: 5; display: flex; gap: 8px; }
.cs-thumb { width: 64px; height: 40px; border-radius: 0; overflow: hidden; border: 2px solid rgba(255,255,255,.35); padding: 0; cursor: pointer; background: #000; opacity: .7; transition: all .2s; }
.cs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-thumb.is-active { border-color: #fff; opacity: 1; transform: translateY(-2px); }

/* progress */
.cs-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,.18); z-index: 6; }
.cs-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6c8cff, #9a6bff); }

/* responsive: JS also scales fonts via --cs-scale */
.cs-slider { --cs-scale: 1; }
@media (max-width: 900px) {
	.cs-arrow { width: 40px; height: 40px; opacity: 1; pointer-events: auto; } /* no hover on touch: always visible */
	.cs-next { right: 10px; } .cs-prev { right: 58px; bottom: 10px; } .cs-next { bottom: 10px; }
	.cs-thumbs { display: none; }
	.cs-layer-heading { letter-spacing: -0.01em !important; }
}
@media (max-width: 560px) {
	.cs-viewport { height: 460px; }
	.cs-layer-badge { letter-spacing: .08em; }
}