/* Homepage "Selected work" carousel (section 18192c2b on page 366): glass-bubble cursor + mouse grab/swipe.
   Glass look ported from Bencho "Glass bubble" (MIT, bencho.dev/licence) as a 60px cursor. */
.iw-drag-cursor {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	pointer-events: none;
	background: transparent;
	/* clean glass, no frost: Safari/Firefox get this; Chromium swaps in the refracting lens from the JS */
	-webkit-backdrop-filter: saturate(1.1) brightness(1.03);
	backdrop-filter: saturate(1.1) brightness(1.03);
	/* Bencho light model: thin lit band inside the rim, bright up-left, weaker catch down-right,
	   a hair of red/blue fringe at the very edge, soft shadow a little below */
	box-shadow:
		inset 1px 1.4px 0.6px -0.4px rgba(255, 255, 255, 0.95),
		inset -1px -1.4px 0.6px -0.4px rgba(255, 255, 255, 0.4),
		inset 0.6px 0 0.4px -0.2px rgba(255, 70, 70, 0.22),
		inset -0.6px 0 0.4px -0.2px rgba(70, 130, 255, 0.24),
		inset 0 0 0 0.5px rgba(255, 255, 255, 0.35),
		0 9px 20px -6px rgba(0, 0, 0, 0.14),
		0 1px 3px rgba(0, 0, 0, 0.06);
	opacity: 0;
	will-change: transform;
	transition: opacity 160ms ease-out;
}
.iw-drag-cursor.is-visible {
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	[data-id="18192c2b"] .elementor-loop-container,
	[data-id="18192c2b"] .elementor-loop-container * {
		cursor: none !important;
	}
}

[data-id="18192c2b"] .elementor-loop-container.is-dragging {
	scroll-snap-type: none !important;
	user-select: none;
}
[data-id="18192c2b"] .elementor-loop-container img {
	-webkit-user-drag: none;
}

/* Liquid-glass cursor (Bencho Glass bubble, WebGL) — see carousel-drag.js. The canvas travels with the
   pointer; outside the ball it is transparent except for the shadow the ball casts. */
.iw-glass {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	will-change: transform;
	transition: opacity 160ms ease-out;
}
.iw-glass.is-visible {
	opacity: 1;
}

/* Native scrollbar hidden; a short custom indicator (scroll-indicator.js) sits under the cards instead. */
[data-id="18192c2b"] .elementor-loop-container {
	scrollbar-width: none !important;
}
[data-id="18192c2b"] .elementor-loop-container::-webkit-scrollbar {
	display: none !important;
	height: 0 !important;
}
/* Room above and below the cards inside the scroll track: a scroll container clips vertically too, so
   without this the hovered card's border and its rounded top corners were cut flat. The negative
   margin keeps the section spacing exactly as before. */
[data-id="18192c2b"] .elementor-loop-container {
	padding-top: 24px !important;
	padding-bottom: 24px !important;
	margin-top: -24px !important;
}

/* Scroll progress ring at the end of the carousel's filter row, the same height as the filter pills.
   Empty inside; the stroke fills clockwise from 12 o'clock as the carousel scrolls. Click it to move to
   the next project. The pill row keeps room on the right so the pills wrap before they reach it; on a
   phone, where the pills wrap, it sits at the end of the last row. */
.iw-scroll-ring {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 40px;
	height: 40px;
	line-height: 0;
	z-index: 1;
}
.iw-scroll-ring.is-hidden {
	visibility: hidden;
}
.iw-scroll-ring__btn {
	all: unset;
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
}
.iw-scroll-ring .iw-scroll-ring__btn,
.iw-scroll-ring .iw-scroll-ring__btn:hover,
.iw-scroll-ring .iw-scroll-ring__btn:focus,
.iw-scroll-ring .iw-scroll-ring__btn:active {
	/* the theme paints buttons pink on hover/focus; this one stays a bare ring */
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	box-shadow: none !important;
	outline: none;
}
.iw-scroll-ring .iw-scroll-ring__btn:focus-visible {
	outline: 2px solid #111111;
	outline-offset: 2px;
}
.iw-scroll-ring svg {
	display: block;
	width: 40px;
	height: 40px;
	transform: rotate(-90deg);
}
.iw-scroll-ring__track {
	fill: none;
	stroke: #ececec;
	stroke-width: 3;
}
.iw-scroll-ring__fill {
	fill: none;
	stroke: #9e9e9e;
	stroke-width: 3;
	stroke-linecap: round;
}