/* ==========================================================================
   KSK Lyrics Art (Samsara of Words / 言の葉の輪廻)
   ========================================================================== */

   .lyric-sutra-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    pointer-events: none;
    z-index: 10; /* Above dust, below motifs/UI */
    overflow: hidden;
}

.lyric-sutra-line {
    position: absolute;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--font-serif);
    color: var(--chestnut-pale);
    opacity: 0; /* Default hidden, animated by keyframes */
    will-change: transform, opacity;
    white-space: nowrap;
    letter-spacing: 0.2em;
    text-shadow: 0 0 12px rgba(212, 213, 200, 0.4);

    /* CSS Variables injected via JS */
    /* --x-pos: 50%; */
    /* --y-pos: 50%; */
    /* --anim-duration: 20s; */
    /* --scale: 1; */
    /* --blur: 0px; */

    left: var(--x-pos);
    top: var(--y-pos);
    filter: blur(var(--blur));
}

.direction-rise {
    animation: lyric-rise-anim var(--anim-duration) ease-in-out forwards;
}

.direction-fall {
    animation: lyric-fall-anim var(--anim-duration) ease-in-out forwards;
}

.direction-static {
    animation: lyric-static-anim var(--anim-duration) ease-in-out forwards;
}

.lyrics-paused .lyric-sutra-line {
    animation-play-state: paused;
}

@keyframes lyric-rise-anim {
    0% {
        opacity: 0;
        transform: translateY(15vh) scale(var(--scale));
    }
    30% {
        opacity: 0.8;
    }
    70% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateY(-25vh) scale(var(--scale));
    }
}

@keyframes lyric-fall-anim {
    0% {
        opacity: 0;
        transform: translateY(-15vh) scale(var(--scale));
    }
    30% {
        opacity: 0.8;
    }
    70% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateY(25vh) scale(var(--scale));
    }
}

@keyframes lyric-static-anim {
    0% {
        opacity: 0;
        transform: scale(calc(var(--scale) * 0.95));
    }
    50% {
        opacity: 0.9;
        transform: scale(var(--scale));
    }
    100% {
        opacity: 0;
        transform: scale(calc(var(--scale) * 1.05));
    }
}