@charset "utf-8";
/* CSS Document */

#colorBtn.container{
	padding: 20px 0;
	display: flex;
	justify-content: end;
	align-items: center;
	gap: 40px;
}

        .button-container {
            position: relative;
        }

        .animated-button {
            position: relative;
            padding: 12px 32px;
            font-size: 16px;
            color: #3E3E3E;
            background: #FFF;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			opacity: 1;  /* 添加這行，確保 100% 不透明 */
            z-index: 1;
        }


@media (max-width: 768px) {
  /* 當螢幕寬度小於或等於 768px 時應用此樣式 */
  #colorBtn.container{
	justify-content: center;
	gap: 24px;
	padding: 20px 10px;
	}
	
	#colorBtn.container.helper-only{
	justify-content: flex-end;
	}
	
	.animated-button {
	padding: 12px 16px;	
	}
	
	.button-content span {
	white-space: nowrap;
	font-size: 14px;
	}
}
        /* 彩色漸層邊框 */
        .animated-button::before {
            content: '';
            position: absolute;
            inset: -3px;
            background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #00d2d3);
            background-size: 200% 200%;
            border-radius: 50px;
            z-index: -1;
            animation: gradient-shift 3s ease infinite;
            padding: 3px;
            -webkit-mask: linear-gradient(#F69 0 0) content-box, linear-gradient(#F69 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }

        @keyframes gradient-shift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 虛化擴散的光暈效果 */
        .animated-button::after {
            content: '';
            position: absolute;
            top: -8px;
            left: -8px;
            right: -8px;
            bottom: -8px;
            background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #00d2d3);
            background-size: 200% 200%;
            border-radius: 50px;
            z-index: -2;
            opacity: 0;
        }

.animated-button:hover::after {
	
            animation: gradient-shift 3s ease infinite, glow-pulse 1s ease-in-out infinite;
}

        @keyframes glow-pulse {
            0%, 100% {
                opacity: 0;
                transform: scale(0.95);
				filter: blur(5px);
            }
            50% {
                opacity: 0.4;
                transform: scale(1.05);
				filter: blur(10px);
            }
        }

        .animated-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        }

        .animated-button:hover::after {
            opacity: 0.8;
            filter: blur(20px);
        }

        .animated-button:active {
            transform: translateY(-1px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .button-content {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .icon {
            width: 28px;
            height: 28px;
        }