/**
 * TO Scroll Gallery — portrait batches pinned while scrolling.
 * Scoped: .toaew-sg / --toaew-sg-*
 *
 * Items share fixed slot columns (absolute) so batch changes
 * crossfade in place without flex reflow jumps.
 */

.toaew-sg {
	--toaew-sg-gap: 16px;
	--toaew-sg-radius: 16px;
	--toaew-sg-aspect: 2 / 3;
	--toaew-sg-large: 1.18;
	--toaew-sg-small: 0.78;
	--toaew-sg-bg: transparent;
	--toaew-sg-pages: 1;
	--toaew-sg-scroll: 80;
	--toaew-sg-visible: 6;
	--toaew-sg-duration: 0.7s;
	--toaew-sg-ease: cubic-bezier( 0.22, 1, 0.36, 1 );
	--toaew-sg-fit: cover;

	position: relative;
	width: 100%;
	background: var( --toaew-sg-bg );
	min-height: calc( var( --toaew-sg-pages ) * var( --toaew-sg-scroll ) * 1vh );
}

.toaew-sg__spacer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.toaew-sg__sticky {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	width: 100%;
	box-sizing: border-box;
	overflow-x: clip;
	overflow-y: hidden;
	padding: 0 clamp( 12px, 2vw, 32px );
}

.toaew-sg__row {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 4vh 0 6vh;
	list-style: none;
	min-height: min( 68vh, 560px );
	max-height: 80vh;
}

.toaew-sg__item {
	--toaew-sg-col: calc(
		( 100% - ( var( --toaew-sg-visible ) - 1 ) * var( --toaew-sg-gap ) )
		/ var( --toaew-sg-visible )
	);

	position: absolute;
	bottom: 4vh;
	top: auto;
	margin: 0;
	width: var( --toaew-sg-col );
	left: calc( var( --toaew-sg-slot, 0 ) * ( var( --toaew-sg-col ) + var( --toaew-sg-gap ) ) );
	box-sizing: border-box;

	opacity: 0;
	transform: translate3d( 0, 28px, 0 );
	filter: blur( 0 );
	pointer-events: none;
	z-index: 1;
	will-change: opacity, transform;
	transition:
		opacity var( --toaew-sg-duration ) var( --toaew-sg-ease ),
		transform var( --toaew-sg-duration ) var( --toaew-sg-ease ),
		filter calc( var( --toaew-sg-duration ) * 0.85 ) ease;
	transition-delay: calc( var( --toaew-sg-stagger, 0 ) * 55ms );
}

/* Direction: forward (scroll down) — leave up, enter from below */
.toaew-sg.is-forward .toaew-sg__item.is-leaving {
	opacity: 0;
	transform: translate3d( 0, -32px, 0 );
	filter: blur( 2px );
	z-index: 2;
	pointer-events: none;
}

.toaew-sg.is-forward .toaew-sg__item.is-entering,
.toaew-sg.is-forward .toaew-sg__item.is-visible {
	opacity: 1;
	transform: translate3d( 0, 0, 0 );
	filter: blur( 0 );
	z-index: 3;
	pointer-events: auto;
}

.toaew-sg.is-forward .toaew-sg__item.is-entering:not( .is-visible ) {
	opacity: 0;
	transform: translate3d( 0, 36px, 0 );
}

/* Direction: reverse (scroll up) — leave down, enter from above */
.toaew-sg.is-reverse .toaew-sg__item.is-leaving {
	opacity: 0;
	transform: translate3d( 0, 32px, 0 );
	filter: blur( 2px );
	z-index: 2;
	pointer-events: none;
}

.toaew-sg.is-reverse .toaew-sg__item.is-entering,
.toaew-sg.is-reverse .toaew-sg__item.is-visible {
	opacity: 1;
	transform: translate3d( 0, 0, 0 );
	filter: blur( 0 );
	z-index: 3;
	pointer-events: auto;
}

.toaew-sg.is-reverse .toaew-sg__item.is-entering:not( .is-visible ) {
	opacity: 0;
	transform: translate3d( 0, -36px, 0 );
}

/* Idle visible (no direction class yet) */
.toaew-sg__item.is-visible {
	opacity: 1;
	transform: translate3d( 0, 0, 0 );
	pointer-events: auto;
	z-index: 3;
}

.toaew-sg__frame {
	position: relative;
	width: 100%;
	aspect-ratio: var( --toaew-sg-aspect );
	border-radius: var( --toaew-sg-radius );
	overflow: hidden;
	background: #e8e8e8;
	box-shadow: 0 10px 30px rgba( 15, 15, 15, 0.08 );
}

/*
 * Alternate sizes: same column width (no horizontal scale/overlap),
 * only height changes via aspect-ratio so faces stay fully in frame width.
 */
.toaew-sg--alternate .toaew-sg__item.is-large .toaew-sg__frame {
	aspect-ratio: 2 / 3.15;
	transform: none;
}

.toaew-sg--alternate .toaew-sg__item.is-small .toaew-sg__frame {
	aspect-ratio: 2 / 2.45;
	transform: none;
}

.toaew-sg--alternate .toaew-sg__item.is-small {
	bottom: calc( 4vh + 4% );
}

.toaew-sg__img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center;
}

.toaew-sg--fit-contain .toaew-sg__img {
	object-fit: contain !important;
}

.toaew-sg--fit-fill .toaew-sg__img {
	object-fit: fill !important;
}

.toaew-sg__caption {
	margin-top: 8px;
	font-size: 0.75rem;
	line-height: 1.3;
	color: #6b7280;
	text-align: center;
}

.toaew-sg--equal .toaew-sg__frame {
	transform: none;
}

@media ( max-width: 1024px ) {
	.toaew-sg {
		--toaew-sg-gap: 12px;
		--toaew-sg-visible: 4;
	}
}

@media ( max-width: 767px ) {
	.toaew-sg {
		--toaew-sg-visible: 3;
	}

	.toaew-sg__sticky {
		min-height: 70vh;
	}

	.toaew-sg__row {
		min-height: 52vh;
		max-height: 72vh;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.toaew-sg__item {
		transition: none !important;
		filter: none !important;
	}
}