/**
 * AP Decorative Element Shared Styles
 *
 * Shared CSS for decorative accent elements with looping animations.
 * Used by both AP Animated Element module and AP Content Layout decorative elements.
 */

/* ===========================================
   BASE STYLES
   =========================================== */

.ap-decorative-element {
	position: absolute;
	pointer-events: none;
	display: block;
	z-index: 10;
}

.ap-decorative-element__image {
	display: block;
	width: 100%;
	height: auto;
}

/* ===========================================
   POSITION CLASSES - HORIZONTAL
   =========================================== */

.ap-decorative-element--h-left {
	left: 0;
}

.ap-decorative-element--h-center {
	left: 50%;
	transform: translateX(-50%);
}

.ap-decorative-element--h-right {
	right: 0;
}

/* ===========================================
   POSITION CLASSES - VERTICAL
   =========================================== */

.ap-decorative-element--v-top {
	top: 0;
}

.ap-decorative-element--v-center {
	top: 50%;
	transform: translateY(-50%);
}

.ap-decorative-element--v-bottom {
	bottom: 0;
}

/* Combined center positioning */
.ap-decorative-element--h-center.ap-decorative-element--v-center {
	transform: translate(-50%, -50%);
}

/* ===========================================
   ANIMATION KEYFRAMES
   =========================================== */

@keyframes ap-deco-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

@keyframes ap-deco-sway {
	0%, 100% {
		transform: rotate(-3deg);
	}
	50% {
		transform: rotate(3deg);
	}
}

@keyframes ap-deco-float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@keyframes ap-deco-twinkle {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.6;
	}
}

/* ===========================================
   ANIMATION CLASSES
   =========================================== */

.ap-decorative-element--anim-pulse .ap-decorative-element__image {
	animation-name: ap-deco-pulse;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.ap-decorative-element--anim-sway .ap-decorative-element__image {
	animation-name: ap-deco-sway;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	transform-origin: top center;
}

.ap-decorative-element--anim-float .ap-decorative-element__image {
	animation-name: ap-deco-float;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.ap-decorative-element--anim-twinkle .ap-decorative-element__image {
	animation-name: ap-deco-twinkle;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

/* ===========================================
   ANIMATION SPEED CLASSES
   =========================================== */

.ap-decorative-element--speed-slow .ap-decorative-element__image {
	animation-duration: 6s;
}

.ap-decorative-element--speed-medium .ap-decorative-element__image {
	animation-duration: 4s;
}

.ap-decorative-element--speed-fast .ap-decorative-element__image {
	animation-duration: 2s;
}

/* ===========================================
   REDUCED MOTION PREFERENCE
   =========================================== */

@media (prefers-reduced-motion: reduce) {
	.ap-decorative-element__image {
		animation: none !important;
	}
}