home/Projects/docs.pivoine.art/components/icons/KomposeIcon.css

/* Kompose Icon Styles */

.kompose-icon-wrapper {
	position: relative;
	display: inline-block;
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	transform-style: preserve-3d;
}

.kompose-icon-wrapper:not(.is-interactive) {
	cursor: default;
}

.kompose-icon {
	width: 100%;
	height: 100%;
	display: block;
	filter: drop-shadow(0 4px 20px rgba(0, 220, 130, 0.2));
	transition: filter 0.4s ease;
}

/* Hover Effects */
.kompose-icon-wrapper.is-interactive:hover {
	transform: scale(1.05) translateY(-2px);
}

.kompose-icon-wrapper.is-interactive:hover .kompose-icon {
	filter: drop-shadow(0 8px 30px rgba(0, 220, 130, 0.4));
	animation: subtle-pulse 2s ease-in-out infinite;
}

.kompose-icon-wrapper.is-interactive:hover .bg-rect {
	animation: bg-glow 2s ease-in-out infinite;
}

.kompose-icon-wrapper.is-interactive:hover .k-letter {
	animation: letter-glow 1.5s ease-in-out infinite;
}

.kompose-icon-wrapper.is-interactive:hover .k-vertical {
	animation: line-slide-vertical 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kompose-icon-wrapper.is-interactive:hover .k-diagonal-top {
	animation: line-slide-diagonal-top 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
}

.kompose-icon-wrapper.is-interactive:hover .k-diagonal-bottom {
	animation: line-slide-diagonal-bottom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)
		0.2s;
}

.kompose-icon-wrapper.is-interactive:hover .status-dot {
	animation: pulse-expand 1s ease-in-out infinite;
}

.kompose-icon-wrapper.is-interactive:hover .status-ring {
	animation: ring-pulse 1.5s ease-in-out infinite;
}

.kompose-icon-wrapper.is-interactive:hover .corner {
	opacity: 1 !important;
	animation: corner-extend 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Click/Active Effects */
.kompose-icon-wrapper.is-clicked {
	animation: click-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kompose-icon-wrapper.is-clicked .kompose-icon {
	animation: rotate-3d 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	filter: drop-shadow(0 12px 40px rgba(0, 220, 130, 0.6));
}

.kompose-icon-wrapper.is-clicked .k-letter {
	animation: letter-flash 0.6s ease-out;
	filter: url(#intenseglow192);
}

.kompose-icon-wrapper.is-clicked .status-dot {
	animation: dot-burst 0.6s ease-out;
}

/* Ripple Effect */
.ripple {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(0, 220, 130, 0.6) 0%,
		rgba(0, 220, 130, 0) 70%
	);
	transform: translate(-50%, -50%) scale(0);
	animation: ripple-expand 0.8s ease-out;
	pointer-events: none;
}

/* Default animations for status dot */
.status-dot {
	animation: default-pulse 2s ease-in-out infinite;
}

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

/* Keyframe Animations */
@keyframes subtle-pulse {
	0%,
	100% {
		filter: drop-shadow(0 8px 30px rgba(0, 220, 130, 0.4));
	}
	50% {
		filter: drop-shadow(0 8px 35px rgba(0, 220, 130, 0.6));
	}
}

@keyframes bg-glow {
	0%,
	100% {
		filter: brightness(1);
	}
	50% {
		filter: brightness(1.1);
	}
}

@keyframes letter-glow {
	0%,
	100% {
		filter: url(#glow192);
	}
	50% {
		filter: url(#intenseglow192);
	}
}

@keyframes line-slide-vertical {
	0% {
		stroke-dasharray: 96;
		stroke-dashoffset: 96;
	}
	100% {
		stroke-dasharray: 96;
		stroke-dashoffset: 0;
	}
}

@keyframes line-slide-diagonal-top {
	0% {
		stroke-dasharray: 68;
		stroke-dashoffset: 68;
	}
	100% {
		stroke-dasharray: 68;
		stroke-dashoffset: 0;
	}
}

@keyframes line-slide-diagonal-bottom {
	0% {
		stroke-dasharray: 68;
		stroke-dashoffset: 68;
	}
	100% {
		stroke-dasharray: 68;
		stroke-dashoffset: 0;
	}
}

@keyframes pulse-expand {
	0%,
	100% {
		r: 11.52;
		opacity: 0.9;
	}
	50% {
		r: 14;
		opacity: 1;
	}
}

@keyframes ring-pulse {
	0%,
	100% {
		r: 17.28;
		opacity: 0.3;
		stroke-width: 3;
	}
	50% {
		r: 20;
		opacity: 0.6;
		stroke-width: 2;
	}
}

@keyframes corner-extend {
	0% {
		stroke-dasharray: 13.44;
		stroke-dashoffset: 13.44;
	}
	100% {
		stroke-dasharray: 13.44;
		stroke-dashoffset: 0;
	}
}

@keyframes click-bounce {
	0% {
		transform: scale(1) translateY(0) rotateY(0deg);
	}
	30% {
		transform: scale(0.92) translateY(0) rotateY(0deg);
	}
	50% {
		transform: scale(1.08) translateY(-4px) rotateY(180deg);
	}
	70% {
		transform: scale(0.98) translateY(0) rotateY(360deg);
	}
	100% {
		transform: scale(1) translateY(0) rotateY(360deg);
	}
}

@keyframes rotate-3d {
	0% {
		transform: perspective(800px) rotateY(0deg);
	}
	50% {
		transform: perspective(800px) rotateY(180deg);
	}
	100% {
		transform: perspective(800px) rotateY(360deg);
	}
}

@keyframes letter-flash {
	0%,
	100% {
		opacity: 1;
	}
	20%,
	60% {
		opacity: 0.7;
	}
	40%,
	80% {
		opacity: 1;
	}
}

@keyframes dot-burst {
	0% {
		r: 11.52;
		opacity: 0.9;
	}
	50% {
		r: 20;
		opacity: 1;
	}
	100% {
		r: 11.52;
		opacity: 0.9;
	}
}

@keyframes ripple-expand {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(2.5);
		opacity: 0;
	}
}

@keyframes default-pulse {
	0%,
	100% {
		opacity: 0.6;
		r: 11.52;
	}
	50% {
		opacity: 1;
		r: 13.44;
	}
}

@keyframes default-ring-pulse {
	0%,
	100% {
		opacity: 0.3;
	}
	50% {
		opacity: 0.5;
	}
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.kompose-icon-wrapper.is-interactive:hover {
		transform: scale(1.03) translateY(-1px);
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.kompose-icon-wrapper,
	.kompose-icon,
	.kompose-icon *,
	.ripple {
		animation: none !important;
		transition: none !important;
	}

	.kompose-icon-wrapper.is-interactive:hover {
		transform: scale(1.02);
	}
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
	.kompose-icon-wrapper.is-interactive:active {
		transform: scale(0.95);
	}
}