/**
 * Images in Shapes - CSS
 * @package Pretpot_Elementor_Kit
 */

/* Base Styles */
.pretpot-images-in-shapes {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 300px;
	height: 300px;
	vertical-align: middle;
}

.pretpot-images-in-shapes img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.pretpot-shape-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

/* Shape: Square */
.pretpot-shape-square {
	clip-path: inset(0 0 0 0);
}

/* Shape: Rectangle (2:1 ratio) */
.pretpot-shape-rectangle {
	clip-path: inset(0 0 0 0);
	aspect-ratio: 2 / 1;
}

/* Shape: Circle */
.pretpot-shape-circle {
	clip-path: circle(50% at 50% 50%);
	border-radius: 50%;
}

/* Shape: Oval */
.pretpot-shape-oval {
	clip-path: ellipse(50% 35% at 50% 50%);
}

/* Triangles */
.pretpot-shape-triangle-up {
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.pretpot-shape-triangle-down {
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.pretpot-shape-triangle-left {
	clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
}

.pretpot-shape-triangle-right {
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.pretpot-shape-triangle-top-left {
	clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}

.pretpot-shape-triangle-top-right {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

.pretpot-shape-triangle-bottom-left {
	clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}

.pretpot-shape-triangle-bottom-right {
	clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

/* Shape: Trapezoid */
.pretpot-shape-trapezoid {
	clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

/* Shape: Parallelogram */
.pretpot-shape-parallelogram {
	clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

/* Shape: Pentagon */
.pretpot-shape-pentagon {
	clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

/* Shape: Hexagon */
.pretpot-shape-hexagon {
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Shape: Octagon */
.pretpot-shape-octagon {
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* Shape: Star (6 Points) */
.pretpot-shape-star-6 {
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Shape: Star (5 Points) */
.pretpot-shape-star-5 {
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Shape: Starburst */
.pretpot-shape-starburst {
	clip-path: polygon(50% 0%, 60% 20%, 80% 20%, 65% 35%, 75% 60%, 50% 45%, 25% 60%, 35% 35%, 20% 20%, 40% 20%);
}

/* Shape: Heart */
.pretpot-shape-heart {
	clip-path: path('M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z');
}

/* Shape: Diamond */
.pretpot-shape-diamond {
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Shape: Egg */
.pretpot-shape-egg {
	clip-path: ellipse(50% 45% at 50% 55%);
}

/* Shape: Pac-Man */
.pretpot-shape-pacman {
	clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
	border-radius: 50%;
}

/* Shape: Talk Bubble */
.pretpot-shape-talk-bubble {
	clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

/* Shape: TV Screen */
.pretpot-shape-tv-screen {
	clip-path: inset(0% 5% 0% 5% round 10% 10% 50% 50%);
}

/* Hover Effects */
.pretpot-images-in-shapes {
	transition: clip-path 0.3s ease, transform 0.3s ease;
}

.pretpot-images-in-shapes:hover {
	/* Default scale handled by Elementor controls */
}

/* Hover Shape Transformations */
.pretpot-images-in-shapes.pretpot-hover-circle:hover {
	clip-path: circle(50% at 50% 50%) !important;
}

.pretpot-images-in-shapes.pretpot-hover-square:hover {
	clip-path: inset(0 0 0 0) !important;
}

.pretpot-images-in-shapes.pretpot-hover-hexagon:hover {
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) !important;
}

.pretpot-images-in-shapes.pretpot-hover-star:hover {
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) !important;
}

.pretpot-images-in-shapes.pretpot-hover-heart:hover {
	clip-path: path('M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z') !important;
}

.pretpot-images-in-shapes.pretpot-hover-diamond:hover {
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
	.pretpot-images-in-shapes {
		max-width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

/* Border Support for Clipped Elements */
.pretpot-images-in-shapes {
	box-sizing: border-box;
}

/* Animation Keyframes */
@keyframes pretpot-shape-morph {
	0% {
		clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	}
	50% {
		clip-path: circle(50% at 50% 50%);
	}
	100% {
		clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	}
}

.pretpot-images-in-shapes.pretpot-animate-morph {
	animation: pretpot-shape-morph 4s ease-in-out infinite;
}

/* Accessibility - Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.pretpot-images-in-shapes,
	.pretpot-images-in-shapes * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Image Loading State */
.pretpot-images-in-shapes img {
	background-color: #f0f0f0;
}

.pretpot-images-in-shapes img[src=""],
.pretpot-images-in-shapes img:not([src]) {
	visibility: hidden;
}