.card-animation-layer {
	transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-animation-layer.hidden {
	opacity: 0;
	transform: scale(0.8);
	pointer-events: none;
}

.card-animation-layer.filtered-out {
	opacity: 0;
	transform: scale(0.8) translateY(20px);
	pointer-events: none;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

:root {
	--masonry-size-1: 0.25rem;
	--masonry-size-2: 0.5rem;
	--masonry-size-3: 0.75rem;
	--masonry-size-4: 1rem;
	--masonry-size-5: 1.25rem;
	--masonry-size-content-1: 20rem;
	--masonry-radius-3: 0.5rem;
	--masonry-radius-4: 0.75rem;
	--masonry-shadow-4: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--masonry-surface-2: #f8fafc;
	--masonry-surface-3: #e2e8f0;
	--masonry-surface-4: #cbd5e1;
	--masonry-text-2: #475569;
	--masonry-font-size-1: 0.875rem;
	--masonry-ratio-landscape: 16/9;
	--masonry-ratio-portrait: 3/4;
	--masonry-ratio-square: 1/1;
}

html.dark {
	--masonry-surface-2: #1e293b;
	--masonry-surface-3: #334155;
	--masonry-surface-4: #475569;
	--masonry-text-2: #cbd5e1;
}

@keyframes masonry-slide-in {
	from {
		opacity: 0;
		transform: scale(0.85)
			rotate(calc(var(--masonry-side, 1) * (5deg * var(--masonry-amp, 1))));
	}
	to {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

.masonry-section .card-animation-layer {
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform, opacity;
}

.masonry-section {
	--cols: 2;
	display: grid;
	grid-template-columns: repeat(
		var(--cols),
		minmax(0, var(--masonry-size-content-1))
	);
	gap: var(--masonry-size-5);
	padding-inline: var(--masonry-size-5);
	padding-block: 5vh 18vh;
	place-items: start;
	margin-top: 2rem;
}

@media (min-width: 720px) {
	.masonry-section {
		--cols: 4;
	}
}

@media (min-width: 1200px) {
	.masonry-section {
		--cols: 6;
	}
}

@media (min-width: 1920px) {
	.masonry-section {
		--cols: 8;
	}
}

.masonry-section > .card-animation-layer {
	display: grid;
	gap: var(--masonry-size-2);
}
.masonry-section > .card-animation-layer:nth-of-type(2n + 1) {
	transform-origin: 25vw 100%;
	--masonry-side: -1;
}

.masonry-section > .card-animation-layer:nth-of-type(2n) {
	transform-origin: -25vw 100%;
	--masonry-side: 1;
}

@media (min-width: 720px) {
	.masonry-section > .card-animation-layer:nth-of-type(4n + 1) {
		transform-origin: 50vw 100%;
		--masonry-side: -1;
		--masonry-amp: 2;
	}
	.masonry-section > .card-animation-layer:nth-of-type(4n + 2) {
		transform-origin: 25vw 100%;
		--masonry-side: -1;
	}
	.masonry-section > .card-animation-layer:nth-of-type(4n + 3) {
		transform-origin: -25vw 100%;
		--masonry-side: 1;
	}
	.masonry-section > .card-animation-layer:nth-of-type(4n) {
		transform-origin: -50vw 100%;
		--masonry-side: 1;
		--masonry-amp: 2;
	}
}

@media (min-width: 1200px) {
	.masonry-section > .card-animation-layer:nth-of-type(6n + 1) {
		transform-origin: 75vw 100%;
		--masonry-side: -1;
		--masonry-amp: 3;
	}
	.masonry-section > .card-animation-layer:nth-of-type(6n + 2) {
		transform-origin: 50vw 100%;
		--masonry-side: -1;
		--masonry-amp: 2;
	}
	.masonry-section > .card-animation-layer:nth-of-type(6n + 3) {
		transform-origin: 25vw 100%;
		--masonry-side: -1;
	}
	.masonry-section > .card-animation-layer:nth-of-type(6n + 4) {
		transform-origin: -25vw 100%;
		--masonry-side: 1;
	}
	.masonry-section > .card-animation-layer:nth-of-type(6n + 5) {
		transform-origin: -50vw 100%;
		--masonry-side: 1;
		--masonry-amp: 2;
	}
	.masonry-section > .card-animation-layer:nth-of-type(6n) {
		transform-origin: -75vw 100%;
		--masonry-side: 1;
		--masonry-amp: 3;
	}
}

@media (min-width: 1920px) {
	.masonry-section > .card-animation-layer:nth-of-type(8n + 1) {
		transform-origin: 100vw 100%;
		--masonry-side: -1;
		--masonry-amp: 4;
	}
	.masonry-section > .card-animation-layer:nth-of-type(8n + 2) {
		transform-origin: 75vw 100%;
		--masonry-side: -1;
		--masonry-amp: 3;
	}
	.masonry-section > .card-animation-layer:nth-of-type(8n + 3) {
		transform-origin: 50vw 100%;
		--masonry-side: -1;
		--masonry-amp: 2;
	}
	.masonry-section > .card-animation-layer:nth-of-type(8n + 4) {
		transform-origin: 25vw 100%;
		--masonry-side: -1;
	}
	.masonry-section > .card-animation-layer:nth-of-type(8n + 5) {
		transform-origin: -25vw 100%;
		--masonry-side: 1;
	}
	.masonry-section > .card-animation-layer:nth-of-type(8n + 6) {
		transform-origin: -50vw 100%;
		--masonry-side: 1;
		--masonry-amp: 2;
	}
	.masonry-section > .card-animation-layer:nth-of-type(8n + 7) {
		transform-origin: -75vw 100%;
		--masonry-side: 1;
		--masonry-amp: 3;
	}
	.masonry-section > .card-animation-layer:nth-of-type(8n) {
		transform-origin: -100vw 100%;
		--masonry-side: 1;
		--masonry-amp: 4;
	}
}

.masonry-section .card {
	background: var(--masonry-surface-2);
	border: 1px solid var(--masonry-surface-4);
	padding: var(--masonry-size-3);
	border-radius: var(--masonry-radius-4);
	box-shadow: var(--masonry-shadow-4);
	overflow: hidden;
	position: relative;
	direction: rtl;
}

.masonry-section .card-animation-layer.animate-in .card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		var(--accent, #9a47ff),
		var(--accent2, #ae31e0)
	);
	border-radius: var(--masonry-radius-4) var(--masonry-radius-4) 0 0;
	opacity: 0;
	animation: revealIndicator 0.5s ease-out 0.3s forwards;
}

/* Center the last incomplete row items */
/* Assuming 15 items total */


@media (min-width: 720px) {
	/* Desktop (4 cols): Last row has items 13, 14, 15 (3 items in a 4-col grid) */
	/* To visually center 3 items, we'll have 13 start at column 2, then 14 and 15 follow */
	/* This leaves an empty space on the left, centering the group */
	.masonry-section > .card-animation-layer:nth-child(13) {
		grid-column: 2 / 3; /* Start from column 2 to center the 3 items */
	}
	.masonry-section > .card-animation-layer:nth-child(14) {
		grid-column: 3 / 4;
	}
	.masonry-section > .card-animation-layer:nth-child(15) {
		grid-column: 4 / 5;
	}
}

@media (min-width: 1200px) {
	/* Large (6 cols): All items fill rows evenly - no centering needed */
	/* Reset the grid column positioning for items 13, 14, 15 */
	.masonry-section > .card-animation-layer:nth-child(13),
	.masonry-section > .card-animation-layer:nth-child(14),
	.masonry-section > .card-animation-layer:nth-child(15) {
		grid-column: unset;
	}
}

@keyframes revealIndicator {
	from {
		opacity: 0;
		transform: scaleX(0);
	}
	to {
		opacity: 1;
		transform: scaleX(1);
	}
}

.masonry-section .card.landscape img {
	aspect-ratio: var(--masonry-ratio-landscape);
}

.masonry-section .card.portrait img {
	aspect-ratio: var(--masonry-ratio-portrait);
}

.masonry-section .card.square img {
	aspect-ratio: var(--masonry-ratio-square);
}

.masonry-section .card h3 {
	color: var(--accent, #9a47ff);
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 var(--masonry-size-2) 0;
	line-height: 1.3;
}

.masonry-section .card > p {
	color: var(--masonry-text-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: var(--masonry-size-2) 0;
}

.masonry-section .card > :is(a, p) {
	font-size: var(--masonry-font-size-1);
	line-height: 1.25;
}

.masonry-section .card img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	background-color: var(--masonry-surface-3);
	border-radius: var(--masonry-radius-3);
	margin-bottom: var(--masonry-size-2);
	display: block;
}

.masonry-section .card a {
	color: var(--accent, #9a47ff);
	text-decoration: none;
	font-weight: 500;
}

.masonry-section .card a:hover {
	text-decoration: underline;
}

.masonry-section h5 {
	max-inline-size: 100%;
	text-align: center;
}

html[dir="rtl"] .masonry-section {
	direction: ltr;
}

html.dark .masonry-section .card {
	background: var(--panel-bg, #0d0d0f);
	border: 1px solid var(--stroke, #1f2343);
	color: var(--text, #f6f7ff);
}

html.dark .masonry-section .card p {
	color: var(--muted, #9aa0b5);
}

html.dark .masonry-section .card a {
	color: var(--brand, #f5c443);
}

html.dark .masonry-section .card h3 {
	color: var(--brand, #f5c443);
}

@media (prefers-reduced-motion: reduce) {
	.masonry-section .card-animation-layer {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.masonry-section .card-animation-layer.animate-in {
		opacity: 1 !important;
		transform: none !important;
	}
}

@media (max-width: 768px) {
	.masonry-section .card img {
		height: 180px;
	}
	.masonry-section{
		padding-inline: unset;
	}
}

@media (max-width: 480px) {
	.masonry-section .card img {
		height: 160px;
	}
}