/* Animated fade-in */
[data-animate] {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .9s ease, transform .6s ease
}

	[data-animate].in {
		opacity: 1;
		transform: none
	}

	[data-animate].fallback {
		opacity: 1;
		transform: none;
		visibility: visible;
	}

/* This breaks the fade-in but keeping it for possible later use */
/*[data-animate]:not(.in) {opacity: 1;}*/

/* Base slide panel */
[data-slide] {
	position: fixed;
	top: var(--header-height);

	overflow-y: auto;
	z-index: 1000;
	transition: transform 0.4s ease;
}

/* Slide in from right by default */
[data-slide="left"] {
	right: 0;
	transform: translateX(100%);
}

	[data-slide="left"].in {
		transform: translateX(0);
	}

/* Slide in from left */
[data-slide="right"] {
	left: 0;
	transform: translateX(-100%);
}

	[data-slide="right"].in {
		transform: translateX(0);
	}

/* Optional fallback (always visible) */
[data-slide].fallback {
	transform: translateX(0);
	visibility: visible;
}

[data-rotate] {
	display: inline-block;
	transition: transform 0.3s ease;
	display: inline-block; /* ensures transform applies neatly */
}

[data-rotate="False"] {
	transform: rotate(0deg);
}

[data-rotate="True"] {
	transform: rotate(180deg);
}


.image-rotation-container {
	position: relative;
	width: 100%;
	height: 250px;
	overflow: hidden;
}

	.image-rotation-container img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 100%;
		object-fit: contain;
		opacity: 0;
		transition: opacity 1.5s ease-in-out;
	}

		.image-rotation-container img.active {
			opacity: 1;
			z-index: 1;
		}

.accordian-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

	.accordian-panel.open {
		max-height: 1000px; /* Adjust as needed */
	}