/**
 * File Name:     oculr.css
 * Version:       0.86
 * Last Modified: 2026-10-14
 * Package:       Oculr
 *
 * Slideshow styling layered over Swiper's bundle stylesheet.
 */

:root {
	--oculr-bg: #000;
	--oculr-nav-bg: rgb(255 255 255 / 3.3%);
	--oculr-paused: #f00;
	--oculr-muted: #aaa;
	--oculr-space: 0.625rem;
	--oculr-z-tools: 10;
}

body {
	background: var(--oculr-bg);
	margin: 0;
	padding: 0;
}

.mySwiper {
	& .swiper-slide img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: contain;
	}

	& .swiper-button-next,
	& .swiper-button-prev {
		inset-block: 0;
		block-size: 100%;
		margin-block-start: 0;
		padding: var(--oculr-space);
		background-color: var(--oculr-nav-bg);
	}

	& .swiper-button-prev {
		inset-inline-start: 0;
	}

	& .swiper-button-next {
		inset-inline-end: 0;
	}

	&.paused .swiper-button-next,
	&.paused .swiper-button-prev {
		color: var(--oculr-paused);
	}

	&.swiper-scale-effect .swiper-slide-cover {
		transition: 8.5s ease-out;
		transform: scale(1.08);
	}

	&.swiper-scale-effect .swiper-slide.swiper-slide-active .swiper-slide-cover {
		transform: scale(1);
	}
}

/* Toolbar: kept in the DOM (hover target for pause) but visually hidden. */
#tools {
	display: none;
	position: absolute;
	z-index: var(--oculr-z-tools);
	inline-size: 100%;
	block-size: 3px;
	padding: var(--oculr-space);
	color: var(--oculr-muted);
	background-color: rgb(0 0 0 / 10%);
}

.oculr-message {
	margin: 0;
	padding: clamp(1rem, 5vw, 3rem);
	color: var(--oculr-muted);
	font: 1rem/1.5 system-ui, sans-serif;
	text-align: center;
}