@use '../utils' as *;

// ============================================================
// Block: scroll gallery
// Sticky stage: scale → chapter lines → progress → next slide.
// Galaxy field inspired by Wolverine c-particles.
// ============================================================

.block-scroll-gallery {
	position: relative;
	color: var(--c-text);
	background: var(--c-gray-100);

	&__track {
		position: relative;
	}

	&__inner {
		position: sticky;
		top: 0;
		height: 100lvh;
		overflow: hidden;
	}

	&__spacer {
		// Fallback; JS sets height from chapter count.
		height: 320lvh;
	}

	// --- Particle galaxy (behind image + texts) ---------------
	&__galaxy {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		overflow: hidden;
	}

	&__galaxy-field {
		position: absolute;
		top: -25%;
		left: 0;
		width: 100%;
		height: 150%;
		perspective: 800px;
		transform-style: preserve-3d;
	}

	&__galaxy-particle {
		position: absolute;
		aspect-ratio: 1 / 1;
		width: rem(50);
		will-change: transform;
		transform: translate3d(-50%, -50%, 0);
		transform-origin: 50% 50%;

		@include md-up {
			width: rem(104);
		}

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	&__galaxy-fade {
		position: absolute;
		left: -10%;
		z-index: 1;
		width: 120%;
		height: rem(160);
		pointer-events: none;

		&--top {
			top: 0;
			background: linear-gradient(to bottom, var(--c-gray-100), transparent);
		}

		&--bottom {
			bottom: 0;
			background: linear-gradient(to top, var(--c-gray-100), transparent);
		}
	}

	&__texts {
		display: contents;
	}

	&__text {
		position: absolute;
		z-index: 0;
		margin: 0;
		line-height: 1;
		text-transform: uppercase;
		letter-spacing: -0.02em;
		pointer-events: none;
		will-change: transform;

		span {
			display: block;
		}

		&--top {
			top: var(--space-lg);
			left: 50%;
			z-index: 2;
			translate: -50% 0;
		}

		&--bottom {
			bottom: var(--space-lg);
			left: 50%;
			z-index: 2;
			translate: -50% 0;
		}
	}

	&__images {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
		will-change: transform, clip-path;
		transform-origin: 50% 50%;
	}

	&__item {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	&__img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	&__shade {
		position: absolute;
		inset: 0;
		z-index: 2;
		background: var(--c-black);
		opacity: 0;
		pointer-events: none;
	}

	// --- Chapters overlay (ref: Genesis analyse panel) --------
	&__chapters {
		position: absolute;
		inset: 0;
		z-index: 3;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-gap);
		padding-inline: var(--space-gap);
		color: #fff;
		pointer-events: none;
		opacity: 0;
	}

	&__chapters-above,
	&__chapters-below {
		position: relative;
		display: grid;
		width: 100%;
		pointer-events: none;
	}

	&__chapter-above {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-area: 1 / 1;
		column-gap: var(--space-gap);
		width: 100%;
		pointer-events: none;
	}

	&__progress {
		position: relative;
		flex-shrink: 0;
		width: calc(100% + (var(--space-gap) * 2));
		margin-inline: calc(var(--space-gap) * -1);
		height: 1px;
		pointer-events: none;
	}

	&__progress-track {
		position: absolute;
		inset: 0;
		background: rgb(255 255 255 / 35%);
	}

	&__progress-fill {
		position: absolute;
		inset: 0;
		background: #fff;
		transform: scaleX(0);
		transform-origin: left center;
		will-change: transform;
	}

	&__chapter {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-area: 1 / 1;
		align-items: start;
		column-gap: var(--space-gap);
		width: 100%;
		pointer-events: none;

		&[data-chapter-active] {
			pointer-events: auto;
		}
	}

	&__chapter-title {
		grid-column: 1 / span 5;
		margin: 0;
		font-variant-numeric: tabular-nums;
		letter-spacing: 0.08em;
		line-height: 1.5;
		color: inherit;

		@include sm {
			grid-column: 1 / -1;
		}
	}

	&__chapter-kicker {
		grid-column: 1 / span 5;
		margin: 0;
		text-transform: uppercase;
		line-height: 1.2;
		color: inherit;

		@include sm {
			grid-column: 1 / -1;
		}
	}

	&__chapter-body {
		margin: 0;
		text-transform: uppercase;
		color: inherit;
		line-height: 1.45;
	}

	&__chapter-right {
		grid-column: 7 / span 6;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-md);
		min-width: 0;
		max-width: col-width(6);

		@include sm {
			grid-column: 1 / -1;
			max-width: none;
		}
	}

	&__accordion {
		width: 100%;
		max-width: none;
		margin: 0;
		color: inherit;
		pointer-events: auto;
	}

	.accordion-css__list {
		grid-column-gap: 0;
		grid-row-gap: 0;
	}

	.accordion-css__item {
		background: transparent;
		border-radius: 0;
		border-top: 1px dotted rgb(255 255 255 / 45%);
		will-change: transform, opacity;

		&:last-child {
			border-bottom: 1px dotted rgb(255 255 255 / 45%);
		}
	}

	.accordion-css__item-top {
		padding: var(--space-xs) 0;
		cursor: pointer;
	}

	.accordion-css__item-h3 {
		margin: 0;
		font-weight: 400;
		line-height: 1.5;
		color: inherit;
		text-transform: none;
	}

	.accordion-css__item-icon {
		color: inherit;
	}

	.accordion-css__item-bottom-content {
		padding-bottom: var(--space-xs);
	}

	.accordion-css__item-p {
		margin: 0;
		color: rgb(255 255 255 / 75%);
		line-height: 1.45;
	}
}
