/**
 * 流動線條動畫樣式
 * 可重用的流動線條效果 CSS
 * 
 * Copyright (c) 2024 全三角有限公司
 * 統一編號：93608760
 * All rights reserved.
 */

/* 流動線條容器 */
.flowing-lines {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    z-index: 0;
    will-change: contents;
}

/* 暫停動畫狀態 */
.flowing-lines.paused,
body.page-exiting .flowing-lines {
    animation-play-state: paused !important;
    -webkit-animation-play-state: paused !important;
}

body.page-exiting .flowing-lines svg,
body.page-exiting .flowing-lines .flow-line {
    animation-play-state: paused !important;
    -webkit-animation-play-state: paused !important;
    transform: none !important;
}

/* 流動線條 SVG */
.flowing-lines .flow-line {
    position: absolute;
    width: 200vw;
    height: 100px;
    left: 0;
    filter: blur(1.5px);
    opacity: 1;
    will-change: transform;
    display: block;
    min-width: 2400px;
}

.flowing-lines .flow-line path {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4));
}

/* 流動線條動畫 */
@keyframes flowLine {
    0% {
        transform: translateX(var(--start-x, 100%)) translateY(0) scale(1);
    }
    25% {
        transform: translateX(calc(var(--start-x, 100%) * 0.75 - 25%)) translateY(var(--amplitude-1, 0px)) scale(var(--scale-1, 1));
    }
    50% {
        transform: translateX(calc(var(--start-x, 100%) * 0.5 - 50%)) translateY(var(--amplitude-2, 0px)) scale(var(--scale-2, 1));
    }
    75% {
        transform: translateX(calc(var(--start-x, 100%) * 0.25 - 75%)) translateY(var(--amplitude-3, 0px)) scale(var(--scale-3, 1));
    }
    100% {
        transform: translateX(-100%) translateY(0) scale(1);
    }
}

/* 流動線條振幅和大小變動動畫（使用 Web Animations API 時） */
@keyframes flowLineAmplitude {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(var(--amplitude-1, 0px));
    }
    50% {
        transform: translateY(var(--amplitude-2, 0px));
    }
    75% {
        transform: translateY(var(--amplitude-3, 0px));
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes flowLineScale {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(var(--scale-1, 1));
    }
    50% {
        transform: scale(var(--scale-2, 1));
    }
    75% {
        transform: scale(var(--scale-3, 1));
    }
    100% {
        transform: scale(1);
    }
}