/* --- Base Styles for the Animation Container --- */
#puzzle-animation-container {
    position: fixed;
    /* The container is now full-screen by default */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Changed from 85vh */
    display: none;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 9990;
    overflow: hidden;
}

/* NEW: This class pushes the container down ONLY for pop-ups */
#puzzle-animation-container.popup-area {
    top: 15vh;
    height: 85vh;
}

#puzzle-animation-image {
    height: auto;
    position: absolute;
}


/* --- Styles ONLY for the RUNNING Animation --- */
/* This positions the running animation vertically */
#puzzle-animation-container.is-running #puzzle-animation-image {
    top: var(--run-vertical-pos, 50%);
    transform: translateY(-50%); /* This vertically centers the image on the line */
}


/* --- Styles ONLY for the POP-UP Animation --- */
/* This anchors the pop-up animation to the bottom of the screen */
#puzzle-animation-container.is-popup #puzzle-animation-image {
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for horizontal centering */
    bottom: -50%; /* Start it completely off-screen at the bottom */
}


/* --- Keyframes (These define the actual movements) --- */

/* This is the flexible running animation */
@keyframes looping-run-horizontal {
    /* Movement Phase */
    0%   { transform: translateX(var(--start-pos, 100vw)) translateY(-50%); opacity: 1; }
    41%  { transform: translateX(var(--end-pos, -100vw)) translateY(-50%); opacity: 1; }
    
    /* Hold at the end */
    59%  { transform: translateX(var(--end-pos, -100vw)) translateY(-50%); opacity: 1; }
    
    /* Instantly jump back to the start (off-screen) */
    59.1% { transform: translateX(var(--start-pos, 100vw)) translateY(-50%); opacity: 0; }
    
    /* Off-screen Pause */
    100% { transform: translateX(var(--start-pos, 100vw)) translateY(-50%); opacity: 0; }
}

/* This is the NEW, CORRECTED pop-up animation */
@keyframes looping-popup {
    /* Rise Phase */
    0%   { bottom: -50%; opacity: 0; }
    12%  { bottom: var(--popup-height, 5vh); opacity: 1; } /* Rise to the specified height */
    
    /* Hold Phase */
    47%  { bottom: var(--popup-height, 5vh); opacity: 1; }
    
    /* Sink Phase */
    59%  { bottom: -50%; opacity: 0; } /* Sink back down */

    /* Off-screen Pause */
    100% { bottom: -50%; opacity: 0; }
}


/* --- Animation Triggers (Reusable Classes) --- */
/* These connect the keyframes to the image */

#puzzle-animation-image.animate-popup-standard,
#puzzle-animation-image.animate-popup-slow {
  animation-name: looping-popup;
  animation-timing-function: ease-out; /* A slightly nicer easing */
}

#puzzle-animation-image.animate-run-rtl-standard,
#puzzle-animation-image.animate-run-rtl-slow {
  animation-name: looping-run-horizontal;
  animation-timing-function: linear;
}