/*
 * ============================================================
 *  JUICE BOX — Liquid Drain Animation
 * ============================================================
 *  Styles and keyframes for the liquid overlay that drains
 *  downward when transitioning from the title screen to gameplay.
 * ============================================================
 */

/* ---- Liquid overlay ----
   Fills the screen with a random color, then drains downward to reveal the game.
   Only shown when transitioning from the title screen. */
#liquid-overlay {
    position: fixed;
    inset: 0;
    z-index: 5;                     /* Between title screen (10) and grid (default) */
    pointer-events: none;           /* Don't block clicks during drain */
    overflow: hidden;               /* Prevent any content overflow */
    max-width: 100vw;
    max-height: 100vh;

    /* Start fully covering the screen */
    clip-path: inset(0);
    
    /* Start invisible, fade in when .visible is added */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Fade in the liquid before draining */
#liquid-overlay.visible {
    opacity: 1;
}

/* When .hidden, completely remove it */
#liquid-overlay.hidden {
    display: none;
}

/* When .draining is added, animate through three segments matching the audio:
   - 0-10%: Fast drain of 4% of liquid
   - 10-90%: Medium drain of remaining liquid (reduced by 2% to compensate for first segment)
   - 90-100%: Finish draining last 2%
   Animation duration is set dynamically in JS to match audio length. */
#liquid-overlay.draining {
    animation: liquidDrain 1s linear forwards;
}

@keyframes liquidDrain {
    0% {
        clip-path: inset(0);  /* Full screen covered */
    }
    10% {
        clip-path: inset(4% 0 0 0);  /* 4% drained (doubled from 2%) */
    }
    90% {
        clip-path: inset(98% 0 0 0);  /* Most liquid drained (leaving 2% for final segment) */
    }
    100% {
        clip-path: inset(100% 0 0 0);  /* Fully drained (finishes remaining 2%) */
    }
}