/* Imaret — pointer navigation for the page carousels. */

/* Text panels inside the carousels: fade in each time their slide becomes active (all devices). */
.swiper-slide .imaret-fade {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.9s ease 0.35s, transform 0.9s ease 0.35s;
	will-change: opacity, transform;
}
.swiper-slide-active .imaret-fade,
.swiper:not(.swiper-initialized) .imaret-fade {
	opacity: 1;
	transform: none;
}
/* Tablet/mobile (image stacked above text): let the text panel fill the rest of the slide
   so its centred content sits in the middle of the remaining space. */
@media (max-width: 1024px) {
	.e-n-carousel .swiper-slide .imaret-fade {
		flex-grow: 1;
		--justify-content: flex-start;
		justify-content: flex-start; /* text starts just below the image rather than mid-panel */
		padding-top: 0;
	}
}
/* Phones: one image height for every image+text slide, so the longest texts stay on screen. */
@media (max-width: 767px) {
	.e-n-carousel .swiper-slide:has(.imaret-fade) .elementor-widget-image img {
		height: 36vh;
	}
	/* panels that carry a heading as well need a bit more room for the text */
	.e-n-carousel .swiper-slide:has(.imaret-fade .elementor-widget-heading) .elementor-widget-image img {
		height: 28vh;
	}
}
@media (prefers-reduced-motion: reduce) {
	.swiper-slide .imaret-fade {
		transform: none;
		transition: opacity 0.3s ease;
	}
}

/* Pointer devices only from here on. */
@media (pointer: fine) {

	/* Hide the native cursor over the carousels (the custom cursor replaces it). */
	.elementor-widget-n-carousel,
	.elementor-widget-n-carousel * {
		cursor: none;
	}

	/* …but not while the mouse is over something interactive inside a carousel. */
	.elementor-widget-n-carousel.imaret-nav-native,
	.elementor-widget-n-carousel.imaret-nav-native * {
		cursor: auto;
	}
	.elementor-widget-n-carousel.imaret-nav-native a,
	.elementor-widget-n-carousel.imaret-nav-native button,
	.elementor-widget-n-carousel.imaret-nav-native .swiper-pagination-bullet {
		cursor: pointer;
	}

	/* Hero: cursor hidden only while inside the "scroll down" zone (class toggled by JS). */
	.imaret-nav-hide-cursor,
	.imaret-nav-hide-cursor * {
		cursor: none;
	}

	/* Native prev/next buttons: visually hidden, still in the DOM and focusable. */
	.elementor-widget-n-carousel .elementor-swiper-button,
	.elementor-widget-n-carousel .elementor-swiper-button.swiper-button-disabled {
		opacity: 0 !important;
		pointer-events: none !important;
	}

	/* Keyboard focus on a carousel: no visible ring on mouse click, subtle ring on keyboard focus. */
	.elementor-widget-n-carousel:focus {
		outline: none;
	}
	.elementor-widget-n-carousel:focus-visible {
		outline: 2px solid rgba(255, 255, 255, 0.7);
		outline-offset: -2px;
	}

	/* The custom cursor. */
	.imaret-nav-cursor {
		position: fixed;
		top: 0;
		left: 0;
		width: 52px;
		height: 52px;
		margin: -26px 0 0 -26px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.94);
		box-shadow: 0 2px 14px rgba(0, 0, 0, 0.16);
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
		z-index: 2147483000;
		opacity: 0;
		transform: translate3d(-100px, -100px, 0);
		will-change: transform;
		backface-visibility: hidden;
		transition: opacity 0.12s ease;
	}
	.imaret-nav-cursor.is-visible {
		opacity: 1;
	}
	.imaret-nav-cursor svg {
		display: block;
		width: 22px;
		height: 22px;
	}
}