/*
    MerchStudio version 0.01 - Core File
    Copyright (c) 2025 MerchStudio Inc.
    Client-side CSS for banner carousel animations and styling.
    @author      MerchStudio Admin
    @version     tpl/core/common/css/banner.css - 0.01 - 11-05-2025 - merchstudio

    # include by client/css_load.tpl
*/

/**
 * Banner Carousel
 * The carousel supports multiple animation types via a data-animation
 * attribute.
 */
.banner_carousel {
	position: relative;
	width: 100%;
	margin: auto;
	overflow: hidden; /* This is our "mask" */
	border-radius: 8px;
	box-shadow: 0 4px 10px var(--shadow);
}

.banner_slides {
	position: relative;
    /*@media (min-width: 991px) {
		height: 418px;
	}
    @media (min-width: 601px) and (max-width: 990px) {
		height: 242px;
	}
    @media (min-width: 300px) and (max-width: 600px) {
		height: 155px;
	}*/
}

.banner_slide {
	display: none; /* Hide slides by default (for FADE) */
	width: 100%;
}

.banner_slide.active {
	display: block; /* Show active slide */
    position: relative;
}

/* --- 1. Fade Animation (Default) --- */
/* This logic remains the same, as it works well. */
.banner_carousel[data-animation="fade"] .banner_slide.active {
	animation: fade_in 0.8s ease-in-out;
}

.banner_carousel[data-animation="fade"] .banner_slide.exiting {
	animation: fade_out 0.8s ease-in-out forwards;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
}

/* --- 2. Slide (Horizontal) & Scroll (Vertical) Animations --- */
/*
 * For these animations, all slides are stacked, always block,
 * and we control visibility with opacity and z-index.
*/
.banner_carousel[data-animation="slide"] .banner_slide,
.banner_carousel[data-animation="scroll"] .banner_slide {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0; /* All slides are invisible by default */
	z-index: 5; /* Base stack */
	/*
	 * We add a will-change hint to let the browser optimize
	 * transform and opacity animations.
	 */
	will-change: transform, opacity;
}

.banner_carousel[data-animation="slide"] .banner_slide.active,
.banner_carousel[data-animation="scroll"] .banner_slide.active {
    position: relative;
	opacity: 1; /* The active slide is visible */
	z-index: 10; /* And on top */
}

.banner_carousel[data-animation="slide"] .banner_slide.exiting,
.banner_carousel[data-animation="scroll"] .banner_slide.exiting {
	z-index: 12; /* Exiting slide is above active */
	opacity: 1; /* Ensure it's visible to animate out */
}

.banner_carousel[data-animation="slide"] .banner_slide.entering,
.banner_carousel[data-animation="scroll"] .banner_slide.entering {
	z-index: 15; /* Entering slide is on top of everything */
	opacity: 0; /* Start invisible */
}

/* --- 2a. Slide (Horizontal) --- */
.banner_carousel[data-animation="slide"] .banner_slide.exiting.next {
	animation: slide_out_to_left 0.8s ease-in-out forwards;
}
.banner_carousel[data-animation="slide"] .banner_slide.entering.next {
	animation: slide_in_from_right 0.8s ease-in-out forwards;
}
.banner_carousel[data-animation="slide"] .banner_slide.exiting.prev {
	animation: slide_out_to_right 0.8s ease-in-out forwards;
}
.banner_carousel[data-animation="slide"] .banner_slide.entering.prev {
	animation: slide_in_from_left 0.8s ease-in-out forwards;
}

/* --- 2b. Scroll (Vertical) --- */
.banner_carousel[data-animation="scroll"] .banner_slide.exiting.next {
	animation: slide_out_to_top 0.8s ease-in-out forwards;
}
.banner_carousel[data-animation="scroll"] .banner_slide.entering.next {
	animation: slide_in_from_bottom 0.8s ease-in-out forwards;
}
.banner_carousel[data-animation="scroll"] .banner_slide.exiting.prev {
	animation: slide_out_to_bottom 0.8s ease-in-out forwards;
}
.banner_carousel[data-animation="scroll"] .banner_slide.entering.prev {
	animation: slide_in_from_top 0.8s ease-in-out forwards;
}


/* --- Common Slide Content --- */
.banner_slide img {
	width: 100%;
	display: block;
	object-fit: cover;
	max-height: 500px; /* Sensible default max height */
    height: auto;
}

.banner_caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 15px;
	text-align: center;
	font-size: 1.1em;
}

/* --- Navigation Controls --- */
.banner_nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	cursor: pointer;
	padding: 10px 15px;
	font-size: 24px;
	z-index: 20; /* Above all slides */
	border-radius: 4px;
	transition: background-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	min-width: unset;
}

.banner_nav:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.banner_nav.prev {
	left: 10px;
}

.banner_nav.next {
	right: 10px;
}

.banner_dots {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 20; /* Above all slides */
	/*
	 * If there's a caption, move the dots up to be on top of it.
	 * We select dots that are siblings of a caption.
	 */
	.banner_caption + & {
		bottom: 60px; /* Adjust as needed based on caption height */
	}
}

.banner_dot {
	width: 12px;
	height: 12px;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.banner_dot:hover,
.banner_dot.active {
	background-color: white;
}

/* --- Animation Keyframes --- */
/* These already include opacity, which is perfect. */

@keyframes fade_in {
	from { opacity: 0.4; }
	to { opacity: 1; }
}

@keyframes fade_out {
	from { opacity: 1; }
	to { opacity: 0; }
}

/* --- Vertical Scroll Keyframes --- */
@keyframes slide_out_to_top {
	from { transform: translateY(0); opacity: 1; }
	to { transform: translateY(-100%); opacity: 0; }
}
@keyframes slide_in_from_bottom {
	from { transform: translateY(100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
@keyframes slide_out_to_bottom {
	from { transform: translateY(0); opacity: 1; }
	to { transform: translateY(100%); opacity: 0; }
}
@keyframes slide_in_from_top {
	from { transform: translateY(-100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* --- Horizontal Slide Keyframes --- */
@keyframes slide_out_to_left {
	from { transform: translateX(0); opacity: 1; }
	to { transform: translateX(-100%); opacity: 0; }
}
@keyframes slide_in_from_right {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}
@keyframes slide_out_to_right {
	from { transform: translateX(0); opacity: 1; }
	to { transform: translateX(100%); opacity: 0; }
}
@keyframes slide_in_from_left {
	from { transform: translateX(-100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}