/**
 * Artsource Home Slider
 *
 * Proportions mirror the Slider Revolution "Home Portfolio" grid it replaced
 * (1240x868, 1024x768, 778x960, 480x720). Slider Revolution scaled its height
 * with the container width rather than pinning it, so these are expressed as
 * aspect ratios — a fixed height would leave dead space below the image on any
 * viewport narrower than the grid. Images are contained and anchored
 * top-centre, as before.
 */

.as-slider {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	aspect-ratio: 1240 / 868;
	background: transparent;

	/* Matches the Slider Revolution timeline this replaced: a 1000ms background
	   fade on GSAP's power2.inOut, which is a cubic in-out curve. */
	--as-duration: 1000ms;
	--as-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

.as-slider__viewport {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* ------------------------------------------------------------------- Slides */

.as-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--as-duration) var(--as-ease),
		visibility 0s linear var(--as-duration);
}

.as-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--as-duration) var(--as-ease),
		visibility 0s linear 0s;
}

/* Page-load intro: the first slide starts transparent, then fades up once the
   image has decoded — matching how Slider Revolution entered slide 1.
   Applied by slider.js, so a no-JS visitor still sees the slide immediately. */
.as-slide.is-intro {
	opacity: 0;
	visibility: visible;
	transition: none;
}

.as-slide__img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	object-position: 50% 0%;
}

/* Slide transition: incoming and outgoing slides travel horizontally. */

.as-slider--slide .as-slide {
	transform: translateX(100%);
	transition: transform var(--as-duration) var(--as-ease),
		opacity var(--as-duration) var(--as-ease),
		visibility 0s linear var(--as-duration);
}

.as-slider--slide .as-slide.is-active {
	transform: translateX(0);
	transition: transform var(--as-duration) var(--as-ease),
		opacity var(--as-duration) var(--as-ease),
		visibility 0s linear 0s;
}

.as-slider--slide .as-slide.is-leaving-left {
	transform: translateX(-100%);
}

.as-slider--slide .as-slide.is-entering-left {
	transform: translateX(-100%);
}

/* ------------------------------------------------------------------ Arrows */

.as-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.72);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms ease, background-color 200ms ease;
}

.as-slider:hover .as-slider__arrow,
.as-slider__arrow:focus-visible {
	opacity: 1;
}

.as-slider__arrow:hover {
	background: rgba(255, 255, 255, 0.95);
}

.as-slider__arrow::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 11px;
	border-top: 2px solid #222;
	border-right: 2px solid #222;
	content: "";
}

.as-slider__arrow--prev {
	left: 16px;
}

.as-slider__arrow--prev::before {
	transform: translate(-30%, -50%) rotate(-135deg);
}

.as-slider__arrow--next {
	right: 16px;
}

.as-slider__arrow--next::before {
	transform: translate(-70%, -50%) rotate(45deg);
}

/* -------------------------------------------------------------------- Dots */

.as-slider__dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	padding: 18px 0 0;
}

.as-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	background: transparent;
	border: 1px solid #9a9a9a;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.as-slider__dot:hover {
	border-color: #222;
}

.as-slider__dot.is-active {
	background: #222;
	border-color: #222;
}

/* Keep focus visible for keyboard users without showing a ring on mouse click. */
.as-slider__arrow:focus-visible,
.as-slider__dot:focus-visible {
	outline: 2px solid #222;
	outline-offset: 3px;
}

.as-slider .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	word-wrap: normal !important;
}

/* ------------------------------------------------------------- Breakpoints */

@media (max-width: 1024px) {
	.as-slider {
		aspect-ratio: 1024 / 768;
	}
}

@media (max-width: 778px) {
	.as-slider {
		aspect-ratio: 778 / 960;
	}

	/* No hover on touch devices, so keep the arrows permanently visible. */
	.as-slider__arrow {
		opacity: 1;
	}
}

@media (max-width: 480px) {
	.as-slider {
		aspect-ratio: 480 / 720;
	}
}

/* Users who ask for less motion get instant, non-animated changes.
   slider.js also skips autoplay entirely for them. */
@media (prefers-reduced-motion: reduce) {
	.as-slide,
	.as-slider--slide .as-slide {
		transition: none;
	}
}