/* Fade In: 元素從透明淡入 */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Slide In: 元素從左方 400px 外淡入 */
@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide Out: 元素從右方 400px 外淡出 */
@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* Slide Up: 元素從上方 50px 外淡入 */
@keyframes slideUp {
	from {
		transform: translateY(50px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}


/* Slide Down: 元素從上方 -10px 處淡入並向下移動到原位 */
@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* Slide In Up: 元素從上方 30px 外淡入 */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Modal Up: 元素從上方 50px 處淡入並縮放到 94% */
@keyframes modalUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Zoom: 元素從縮放 0 淡入並放大到 1 */
@keyframes modalZoom {
	from {
		transform: scale(0);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* Spin: 元素旋轉 360 度 */
@keyframes spin {
	to { transform: rotate(360deg); }
}


/* Pulse: 元素在 0.6 opacity 之間跳動 */
@keyframes pulse {
	0%, 100% { 
        opacity: 1; 
    }
	50% { 
        opacity: 0.6; 
    }
}





/* Shimmer: 元素水平移動產生閃爍效果 */
@keyframes shimmer {
	0% { 
        transform: translateX(-100%); 
    }
	100% { transform: translateX(100%); }
}

/* Bounce: 元素上下彈跳 */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Glow: 元素發光效果 */
@keyframes glow {
    0%, 100% {
        filter: drop-shadow(0 0 10px var(--white));
    }

    50% {
        filter: drop-shadow(0 0 20px var(--teal, var(--blue)));
    }
}


/* Tech line: 光條跳動線條 */
@keyframes techline {
    0% { 
        background-position: 200% 0 
    }
    100% { 
        background-position: -200% 0 
    }
}

/* Tech Pulse: 光條跳動圍繞 */
@keyframes techPulse {
    0%, 100% {
        opacity: .5;
        transform: scale(1)
    }

    50% {
        opacity: .8;
        transform: scale(1.05)
    }
}