/* Styles for the ad slide */

#ad-container,
#ad-container-2{
    display: flex;
    justify-content: center;
    gap: 12px;
}

#ad-container-2 a:after,
#ad-container a:after {
background: transparent ;
}

#ad-slide {
	max-width: 160px;
	max-height: 256px;
	overflow: hidden;
	position: relative;

	display: flex;
	width: 100%;
	height: 100%;
	text-decoration: none;
	justify-content: center;
margin: 12px;
}

/* Image inside the ad slide */
#ad-slide img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	box-sizing: border-box;
}

/* ------------------------------------------------------ */
/* Effect classes for entrance and movement animations */

/* Slide Up effect: element slides in from bottom */
.slideUp {
	animation: slideUp 0.8s forwards;
}

/* Slide Down effect: element slides in from top */
.slideDown {
	animation: slideDown 0.8s forwards;
}

/* Slide Left effect: element slides in from right */
.slideLeft {
	animation: slideLeft 0.8s forwards;
}

/* Slide Right effect: element slides in from left */
.slideRight {
	animation: slideRight 0.8s forwards;
}

/* Shake effect: quick left-right shake for emphasis */
.shake {
	animation: shake 0.5s;
}

/* Bounce effect: vertical bouncing animation */
.bounce {
	animation: bounce 0.6s;
}

/* Keyframes for slide animations */
@keyframes slideUp {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slideLeft {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideRight {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Shake animation keyframes for quick side-to-side motion */
@keyframes shake {

	0%,
	100% {
		transform: translate(0, 0);
	}

	20% {
		transform: translate(-10px, 0);
	}

	40% {
		transform: translate(10px, 0);
	}

	60% {
		transform: translate(-10px, 0);
	}

	80% {
		transform: translate(10px, 0);
	}
}

/* Bounce animation keyframes for vertical bouncing */
@keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-30px);
	}

	60% {
		transform: translateY(-15px);
	}
}

/* Fade effect: fade in from transparent */
.fade {
	opacity: 0;
	animation: fadeIn 0.8s forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ------------------------------------------------------ */
/* Zoom Effects */

/* Zoom In: element scales from 0 to full size */
.zoomIn {
	transform: scale(0);
	opacity: 0;
	animation: zoomInAnim 0.8s forwards;
}

@keyframes zoomInAnim {
	from {
		transform: scale(0);
		opacity: 0;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* Zoom Out: element scales down to nothing */
.zoomOut {
	transform: scale(1);
	opacity: 1;
	animation: zoomOutAnim 0.8s forwards;
}

@keyframes zoomOutAnim {
	from {
		transform: scale(1);
		opacity: 1;
	}

	to {
		transform: scale(0);
		opacity: 0;
	}
}

/* ------------------------------------------------------ */
/* Flip Effects for 3D rotation */

/* FlipX: flip along Y-axis */
.flipX {
	transform: rotateY(0deg);
	backface-visibility: hidden;
	animation: flipXAnim 0.8s forwards;
}

@keyframes flipXAnim {
	from {
		transform: rotateY(180deg);
		opacity: 0;
	}

	to {
		transform: rotateY(0deg);
		opacity: 1;
	}
}

/* FlipY: flip along X-axis */
.flipY {
	transform: rotateX(0deg);
	backface-visibility: hidden;
	animation: flipYAnim 0.8s forwards;
}

@keyframes flipYAnim {
	from {
		transform: rotateX(180deg);
		opacity: 0;
	}

	to {
		transform: rotateX(0deg);
		opacity: 1;
	}
}

/* ------------------------------------------------------ */
/* Pulsing effect: scales continuously for attention */
.pulse {
	animation: pulseAnim 1s infinite;
}

@keyframes pulseAnim {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

/* Continuous rotation: spins infinitely */
.rotate {
	animation: rotateAnim 2s linear infinite;
}

@keyframes rotateAnim {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* Color pulse: scales and changes border color in a loop */
.colorPulse {
	animation: colorPulseAnim 1s infinite;
}

@keyframes colorPulseAnim {
	0% {
		transform: scale(1);
		border-color: #000;
	}

	50% {
		transform: scale(1.1);
		border-color: #f00;
	}

	100% {
		transform: scale(1);
		border-color: #000;
	}
}

/* ------------------------------------------------------
  Combining slide and fade for smoother transitions */
.slideFadeUp {
	opacity: 0;
	transform: translateY(20px);
	animation: slideFadeUpAnim 0.8s forwards;
}

@keyframes slideFadeUpAnim {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ------------------------------------------------------ */
/* Skew Effect: skew along X-axis with animation */
.skewX {
	transform: skewX(20deg);
	opacity: 0;
	animation: skewXAnim 0.8s forwards;
}

@keyframes skewXAnim {
	to {
		transform: skewX(0deg);
		opacity: 1;
	}
}

/* ------------------------------------------------------ */
/* Fade and scale together for subtle entrance */
.fadeScale {
	opacity: 0;
	transform: scale(0.8);
	animation: fadeScaleIn 0.8s forwards;
}

@keyframes fadeScaleIn {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ------------------------------------------------------ */
/* Drop Bounce: element drops from above with bounce effect */
.dropBounce {
	animation: dropBounceAnim 1s forwards;
}

@keyframes dropBounceAnim {
	0% {
		transform: translateY(-200px);
		opacity: 0;
	}

	80% {
		transform: translateY(20px);
		opacity: 1;
	}

	100% {
		transform: translateY(0);
	}
}

/* ------------------------------------------------------ */
/* Flip Shadow: flip with shadow for 3D effect */
.flipShadow {
	backface-visibility: hidden;
	animation: flipShadowAnim 0.8s forwards;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@keyframes flipShadowAnim {
	from {
		transform: rotateY(180deg);
		opacity: 0;
	}

	to {
		transform: rotateY(0deg);
		opacity: 1;
	}
}

/* ------------------------------------------------------ */