@import "win-transition.css";
@import "lose-transition.css";
@import "menus.css";
@import "lives.css";

#timer {
    width: 300px;
    height: 50px;
    position: absolute;
    top: auto;
    right: auto;
    bottom: 5px;
    left: 5px;
    z-index: 1;
    overflow: hidden;
}

.timerFill {
    position: absolute;
    height: 100%;
    width: 100%;
}

#timerTop {
    background-image: url(./art/timertopframe.png);
    z-index: 1;
}

#timerEmpty {
    background-image: url(./art/timerbackground.png);
}

#timerFull {
    background-image: url(./art/timer.png);
    background-color: white;
}

@keyframes wave {
    from {
        transform: rotate(-4deg);
    }

    to {
        transform: rotate(20deg);
    }
}

#gda-chan-arm {
    animation: wave 2s infinite alternate;
    transform-origin: 100% 100%;
}

/* We have custom CSS, we have custom config.ini files, but now we need custom sort-of almost CSS.

Because of the way certain animations have to work (transition animations, life animations, etc.), we need precise control over the timing of each animation.
Precision timing is something CSS sucks at. You have to juggle setting up a million different animation-delays and so many IDs if you want your animation to play out to your exact standards. And if you change the timing of one element, it changes how everything else plays out.

What if you could set up a global animation to dynamically control when and for how long other animations play for? We can use Javascript to read CSS rules and come up with the timing for us. So this is where we introduce


COOL CASCADING STYLESHEETS (CCSS)

Which is a framework for introducing exact timings into one animation that is actually a bunch of smaller animations (with Javascript stringing everything together).

I've attempted to design this similarly to how you might use a timeline in Unity, Blender, or some video editing software. Just with more text than you might expect from those things.

How it works is outlined in comments for win-transition.css, and a few comments in lose-transition.css.

SOME FEATURES:
- Control the universal timeline of an animation
- Play multiple animation simultaneously! (Not that you need to in this project, but who knows if this will ever become its own project).
- Dynamic length/timeline stuff!
- Chain CSS animations!
- Set variables for elements from other CSS animations!*/


/*Universal animations to use:*/

/*Initial loading should have a white background:*/

@keyframes paperExit2 {
    from {
        transform: translate(570px, 0);
    }
    to {
        transform: translate(0, 0);
    }
}

@keyframes paperEnter1{
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(-960px, 0);
    }
}

@keyframes paperExit1 {
    from {
        transform: translate(-960px, 0);
    }
    to {
        transform: translate(0, 0);
    }
}

@keyframes paperEnter3 {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(200px, 400px);
    }
}

@keyframes paperExit3 {
    from {
        transform: translate(200px, 400px);
    }
    to {
        transform: translate(0, 0);
    }
}

/*These keyframes assume the element is already hidden, we're just resetting:*/
@keyframes hideElement {
    from {
        transform: translate(0, 0);
    }
}