/* Hallmark · component: on-scroll photographic gallery · genre: editorial · theme: Ivanko/Osty studied-DNA
 * tone: luxury · anchor hue: warm amber · motion: scroll-scrubbed unfurl + counter-moving columns
 * states: default · hover · focus · active · disabled · loading · error · success
 * pre-emit critique: P5 H5 E4 S5 R5 V5
 */

.elementor-widget-ivanko-scroll-gallery {
	position: relative;
	left: 50%;
	width: var(--ivanko-scroll-viewport-width, 100vw);
	max-width: none !important;
	min-width: 0;
	flex-shrink: 0;
	transform: translateX(-50%);
}

.ivanko-scroll-gallery {
	position: relative;
	width: 100%;
	min-width: 0;
	height: var(--ivanko-scroll-length-vh, 540vh);
	height: var(--ivanko-scroll-length, 540dvh);
	box-sizing: border-box;
	background: var(--ivanko-color-paper);
	color: var(--ivanko-color-scroll-ink);
	font-family: var(--ivanko-font-body);
	outline: none;
}

.ivanko-scroll-gallery *,
.ivanko-scroll-gallery *::before,
.ivanko-scroll-gallery *::after { box-sizing: border-box; }

.ivanko-scroll-gallery:focus-visible {
	outline: 2px solid var(--ivanko-color-focus);
	outline-offset: 3px;
}

.ivanko-scroll-gallery__scene {
	position: sticky;
	top: var(--ivanko-scroll-sticky-offset, 0px);
	inset-block-start: var(--ivanko-scroll-sticky-offset, 0px);
	display: grid;
	width: 100%;
	height: calc(100vh - var(--ivanko-scroll-sticky-offset, 0px));
	height: calc(100dvh - var(--ivanko-scroll-sticky-offset, 0px));
	min-height: 32rem;
	place-items: center;
	overflow: hidden;
	overflow: clip;
	background: var(--ivanko-color-paper);
}

.ivanko-scroll-gallery__stage {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 0;
	background: var(--ivanko-color-scroll-surface);
	color: var(--ivanko-color-scroll-ink);
	transform: scale3d(0.92, 0.86, 1);
	transform-origin: center;
	contain: paint;
	isolation: isolate;
}

.ivanko-scroll-gallery__stage::after {
	position: absolute;
	inset: 0;
	z-index: 4;
	border: 2px solid var(--ivanko-color-scroll-rule);
	border-radius: inherit;
	content: '';
	opacity: var(--ivanko-frame-opacity, 1);
	pointer-events: none;
}

.ivanko-scroll-gallery__matrix {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--ivanko-scroll-columns, 4), minmax(0, 1fr));
	gap: var(--ivanko-space-md);
	width: 220%;
	min-width: 0;
	transform: translate3d(-50%, -50%, -700px) rotateX(22deg) rotateY(-42deg) rotateZ(12deg);
	transform-style: preserve-3d;
	transform-origin: center;
	backface-visibility: hidden;
}

.ivanko-scroll-gallery__column {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: var(--ivanko-space-md);
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}

.ivanko-scroll-gallery__card {
	position: relative;
	flex: 0 0 auto;
	min-width: 0;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--ivanko-color-scroll-raised);
	opacity: 0.8;
	transition: opacity var(--ivanko-dur-short) var(--ivanko-ease-out);
}

.ivanko-scroll-gallery--landscape .ivanko-scroll-gallery__card { aspect-ratio: 4 / 3; }
.ivanko-scroll-gallery--square .ivanko-scroll-gallery__card { aspect-ratio: 1; }

.ivanko-scroll-gallery__image,
.elementor .ivanko-scroll-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

.ivanko-scroll-gallery__error { display: none; }
.ivanko-scroll-gallery__card.is-broken .ivanko-scroll-gallery__image { display: none; }
.ivanko-scroll-gallery__card.is-broken .ivanko-scroll-gallery__error {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: var(--ivanko-space-md);
	color: var(--ivanko-color-scroll-muted);
	font-size: var(--ivanko-text-sm);
	text-align: center;
}

.ivanko-scroll-gallery__shade {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(to bottom, var(--ivanko-color-scroll-shadow) 0%, transparent 26%, transparent 74%, var(--ivanko-color-scroll-shadow) 100%),
		linear-gradient(to right, var(--ivanko-color-scroll-shadow) 0%, transparent 22%, transparent 78%, var(--ivanko-color-scroll-shadow) 100%);
	opacity: var(--ivanko-scroll-shade-opacity, 0.94);
	pointer-events: none;
}

.ivanko-scroll-gallery__status {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: var(--ivanko-space-lg);
	z-index: 5;
	max-width: 65ch;
	padding: var(--ivanko-space-xs) var(--ivanko-space-sm);
	background: var(--ivanko-color-scroll-caption);
	color: var(--ivanko-color-scroll-ink);
	font-size: var(--ivanko-text-sm);
	line-height: 1.5;
	opacity: 0;
	transform: translate3d(-50%, var(--ivanko-space-xs), 0);
	transition: opacity var(--ivanko-dur-short) var(--ivanko-ease-out), transform var(--ivanko-dur-short) var(--ivanko-ease-out);
	pointer-events: none;
}

.ivanko-scroll-gallery.is-loading .ivanko-scroll-gallery__status,
.ivanko-scroll-gallery.has-error .ivanko-scroll-gallery__status {
	opacity: 1;
	transform: translate3d(-50%, 0, 0);
}

.ivanko-scroll-gallery.is-loading .ivanko-scroll-gallery__stage { opacity: 0.78; }
.ivanko-scroll-gallery.is-ready .ivanko-scroll-gallery__stage { opacity: 1; }
.ivanko-scroll-gallery.has-error .ivanko-scroll-gallery__status { color: var(--ivanko-color-card-error); }
.ivanko-scroll-gallery.is-scrolling .ivanko-scroll-gallery__card { opacity: 0.9; }

.ivanko-scroll-gallery.is-disabled {
	height: auto;
	min-height: 0;
	opacity: 0.82;
	cursor: not-allowed;
}
.ivanko-scroll-gallery.is-reduced {
	height: auto;
	min-height: 0;
}
.ivanko-scroll-gallery.is-disabled .ivanko-scroll-gallery__scene,
.ivanko-scroll-gallery.is-reduced .ivanko-scroll-gallery__scene {
	position: relative;
	height: calc(100vh - var(--ivanko-scroll-sticky-offset, 0px));
	height: calc(100dvh - var(--ivanko-scroll-sticky-offset, 0px));
}
.ivanko-scroll-gallery.is-disabled .ivanko-scroll-gallery__stage,
.ivanko-scroll-gallery.is-reduced .ivanko-scroll-gallery__stage { transform: none !important; }
.ivanko-scroll-gallery.is-disabled .ivanko-scroll-gallery__matrix,
.ivanko-scroll-gallery.is-reduced .ivanko-scroll-gallery__matrix {
	transform: translate3d(-50%, -50%, 0) rotateX(3deg) rotateY(-7deg) rotateZ(1.5deg) !important;
}

@media (hover: hover) and (pointer: fine) {
	.ivanko-scroll-gallery__card:hover { opacity: 1; }
}

@media (min-width: 40rem) {
	.ivanko-scroll-gallery__matrix {
		gap: var(--ivanko-space-lg);
		width: 165%;
	}
	.ivanko-scroll-gallery__column { gap: var(--ivanko-space-lg); }
}

@media (min-width: 70rem) {
	.ivanko-scroll-gallery__matrix { width: 126%; }
}

@media (max-width: 39.99rem) {
	.ivanko-scroll-gallery.uses-scroll-lock {
		height: 260vh;
		height: 260dvh;
	}
	.ivanko-scroll-gallery.uses-scroll-lock .ivanko-scroll-gallery__scene {
		position: absolute;
		top: 0;
		inset-block-start: 0;
	}
	.ivanko-scroll-gallery.uses-scroll-lock.is-lock-reverse .ivanko-scroll-gallery__scene {
		top: auto;
		inset-block-start: auto;
		inset-block-end: 0;
		bottom: 0;
	}
	.ivanko-scroll-gallery__scene { min-height: 28rem; }
	.ivanko-scroll-gallery.uses-scroll-lock .ivanko-scroll-gallery__stage { touch-action: none; }
	.ivanko-scroll-gallery.is-scroll-locked { overscroll-behavior: none; }
	.ivanko-scroll-gallery__matrix,
	.ivanko-scroll-gallery__column { gap: var(--ivanko-space-sm); }
	.ivanko-scroll-gallery__status { width: calc(100% - 2rem); text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.ivanko-scroll-gallery {
		height: auto;
		min-height: 0;
	}
	.ivanko-scroll-gallery__scene { position: relative; }
	.ivanko-scroll-gallery__stage {
		min-height: 100vh;
		min-height: 100svh;
		opacity: 1;
		transform: none !important;
	}
	.ivanko-scroll-gallery__matrix {
		transform: translate3d(-50%, -50%, 0) rotateX(3deg) rotateY(-7deg) rotateZ(1.5deg) !important;
	}
	.ivanko-scroll-gallery__column { transform: none !important; }
	.ivanko-scroll-gallery__card,
	.ivanko-scroll-gallery__status { transition-duration: 150ms; }
}

body.elementor-editor-active .ivanko-scroll-gallery { height: 220dvh; }