/**
 * Glassmorphism Icon Widget Styles
 */

:root {
	--float-intensity: 1;
}

/* Base Styles */
.glassmorphism-icon-widget {
	display: inline-block;
	pointer-events: none;
}

/* Make absolutely positioned widgets stay in place */
.glassmorphism-icon-widget[style*="position: absolute"],
.glassmorphism-icon-widget[style*="position: fixed"] {
	transform-style: preserve-3d;
	will-change: transform;
}

/* Editor specific styles */
.elementor-editor .glassmorphism-icon-widget {
	transition: left 0.3s ease, top 0.3s ease;
}

.elementor-editor .glassmorphism-icon-widget.is-dragging {
	transition: none !important;
	cursor: move !important;
}

.glassmorphism-circle {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	pointer-events: auto;
}

/* Glass effect enhancement */
.glassmorphism-circle::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 50%;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.1) 0%,
		rgba(255, 255, 255, 0.05) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	pointer-events: none;
}

/* Icon Container */
.glassmorphism-icon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.glassmorphism-icon svg {
	width: 37px;
	height: 37px;
	fill: rgba(255, 255, 255, 0.5);
}

.glassmorphism-icon svg path {
	fill: inherit;
}

/* Hover Effects */
.glassmorphism-circle:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
	background: rgba(255, 255, 255, 0.15);
}

/* Subtle Floating Animations */
@keyframes float-1 {
	0%, 100% {
		transform: translateY(0px) translateX(0px);
	}
	25% {
		transform: translateY(calc(-8px * var(--float-intensity, 1))) translateX(calc(3px * var(--float-intensity, 1)));
	}
	50% {
		transform: translateY(calc(-5px * var(--float-intensity, 1))) translateX(calc(-3px * var(--float-intensity, 1)));
	}
	75% {
		transform: translateY(calc(-10px * var(--float-intensity, 1))) translateX(calc(2px * var(--float-intensity, 1)));
	}
}

@keyframes float-2 {
	0%, 100% {
		transform: translateY(0px) translateX(0px);
	}
	33% {
		transform: translateY(calc(-7px * var(--float-intensity, 1))) translateX(calc(-4px * var(--float-intensity, 1)));
	}
	66% {
		transform: translateY(calc(-4px * var(--float-intensity, 1))) translateX(calc(4px * var(--float-intensity, 1)));
	}
}

@keyframes float-3 {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(calc(-12px * var(--float-intensity, 1)));
	}
}

@keyframes float-4 {
	0%, 100% {
		transform: translateY(0px) translateX(0px);
	}
	25% {
		transform: translateY(calc(-5px * var(--float-intensity, 1))) translateX(calc(-5px * var(--float-intensity, 1)));
	}
	50% {
		transform: translateY(calc(-8px * var(--float-intensity, 1))) translateX(0px);
	}
	75% {
		transform: translateY(calc(-5px * var(--float-intensity, 1))) translateX(calc(5px * var(--float-intensity, 1)));
	}
}

@keyframes pulse-float {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(calc(-6px * var(--float-intensity, 1)));
	}
}

@keyframes orbit {
	0% {
		transform: rotate(0deg) translateX(calc(8px * var(--float-intensity, 1))) rotate(0deg);
	}
	100% {
		transform: rotate(360deg) translateX(calc(8px * var(--float-intensity, 1))) rotate(-360deg);
	}
}

@keyframes floating {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(calc(-10px * var(--float-intensity, 1)));
	}
	100% {
		transform: translateY(0px);
	}
}

/* Animation Classes - Slower and more subtle */
.floating-animation {
	animation: floating 6s ease-in-out infinite;
}

.float-animation-1 {
	animation: float-1 6s ease-in-out infinite;
}

.float-animation-2 {
	animation: float-2 7s ease-in-out infinite;
	animation-delay: 0.5s;
}

.float-animation-3 {
	animation: float-3 5.5s ease-in-out infinite;
	animation-delay: 1s;
}

.float-animation-4 {
	animation: float-4 6.5s ease-in-out infinite;
	animation-delay: 1.5s;
}

.float-animation-5 {
	animation: pulse-float 5s ease-in-out infinite;
	animation-delay: 2s;
}

.float-animation-6 {
	animation: orbit 12s linear infinite;
}

.float-animation-7 {
	animation: float-1 5.8s ease-in-out infinite;
	animation-delay: 0.8s;
}

/* Hover state for all floating animations */
.glassmorphism-icon-widget[class*="float-animation"]:hover {
	animation-play-state: paused;
}

/* Rotation Animation */
@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.rotation-animation .glassmorphism-icon {
	animation: rotation 20s linear infinite;
}

/* Pulse Animation */
@keyframes pulse {
	0% {
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	}
	50% {
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 
		            0 0 0 10px rgba(255, 255, 255, 0.1);
	}
	100% {
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
		            0 0 0 20px rgba(255, 255, 255, 0);
	}
}

.pulse-animation {
	animation: pulse 2s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.glassmorphism-circle {
		width: 80px;
		height: 80px;
	}
	
	.glassmorphism-icon svg {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 480px) {
	.glassmorphism-circle {
		width: 60px;
		height: 60px;
	}
	
	.glassmorphism-icon svg {
		width: 24px;
		height: 24px;
	}
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.glassmorphism-circle {
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.1);
	}
}

/* Interaction states */
.glassmorphism-circle.interactive {
	cursor: pointer;
}

.glassmorphism-circle.interactive:active {
	transform: scale(0.95);
}

/* Elementor Editor Enhancements */
.elementor-editor .glassmorphism-circle {
	cursor: move;
	position: relative;
}

.elementor-editor .glassmorphism-circle::after {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	border: 2px dashed transparent;
	border-radius: 50%;
	transition: border-color 0.3s;
	pointer-events: none;
}

.elementor-editor .glassmorphism-circle:hover::after {
	border-color: rgba(0, 120, 255, 0.3);
}

.elementor-editor .glassmorphism-icon-widget.is-dragging .glassmorphism-circle::after {
	border-color: rgba(0, 120, 255, 0.6);
	border-style: solid;
}

/* Position indicator tooltip */
.position-indicator {
	font-family: 'Outfit', monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.5px;
}

/* Dragging overlay */
.dragging-overlay {
	background: transparent !important;
}

/* Ensure proper stacking in editor */
.elementor-editor .elementor-element-editable {
	position: relative;
}

.elementor-editor .elementor-widget-glassmorphism_icon {
	z-index: auto;
}

.elementor-editor .elementor-widget-glassmorphism_icon.ui-draggable-dragging {
	z-index: 9999 !important;
}

/* Multiple glass layers for depth */
.glassmorphism-circle.depth-effect::after {
	content: '';
	position: absolute;
	top: 10%;
	left: 10%;
	right: 10%;
	bottom: 10%;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}