:root {
    /* Animation Durations */
    --animation-fast: 1s;
    --animation-pengu: 6s;

    /* Z-Index Layers */
    --z-ice-track: 9998;
    --z-pengu: 9999;
    --z-flying-post: 10000;

    /* Layout */
    --ice-track-height: 30px;
    --pengu-width: 200px;
    --pengu-height: 150px;
    --pengu-bottom: 10px;
}

/* Ice Track at Bottom */
.ice-track {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--ice-track-height);
    z-index: var(--z-ice-track);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ice-track.active {
    opacity: 1;
}

.ice-track svg {
    width: 100%;
    height: 100%;
}

/* Pengu Animation Container */
.pengu-container {
    position: fixed;
    bottom: var(--pengu-bottom);
    left: calc(-1 * var(--pengu-width) - 50px);
    width: var(--pengu-width);
    height: var(--pengu-height);
    z-index: var(--z-pengu);
    pointer-events: none;
}

.pengu-sliding,
.pengu-standing {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

/* Frame switching animations */
.pengu-container.animate .pengu-sliding {
    animation: showSliding var(--animation-pengu) ease-in-out forwards;
}

.pengu-container.animate .pengu-standing {
    animation: showStanding var(--animation-pengu) ease-in-out forwards;
}

@keyframes showSliding {
    0%, 40% {
        opacity: 1;
    }
    42%, 58% {
        opacity: 0;
    }
    60%, 100% {
        opacity: 1;
    }
}

@keyframes showStanding {
    0%, 40% {
        opacity: 0;
    }
    42%, 58% {
        opacity: 1;
    }
    60%, 100% {
        opacity: 0;
    }
}

/* Slide animation */
.pengu-container.animate {
    animation: penguSlide var(--animation-pengu) ease-in-out forwards;
}

@keyframes penguSlide {
    0% {
        left: calc(-1 * var(--pengu-width) - 50px);
    }
    40% {
        left: var(--stop-position);
    }
    60% {
        left: var(--stop-position);
    }
    100% {
        left: 100%;
    }
}

/* Flying post animation from pengu mouth */
.post-flying {
    animation: postFly var(--animation-fast) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform-style: preserve-3d;
    perspective: 1000px;
}

@keyframes postFly {
    0% {
        transform:
            translate(var(--start-x), var(--start-y))
            scale(0.1)
            rotateZ(0deg);
        opacity: 0.7;
    }
    50% {
        transform:
            translate(
                calc(var(--end-x) * 0.5),
                calc(var(--end-y) * 0.3)
            )
            scale(0.6)
            rotateZ(180deg);
        opacity: 0.9;
    }
    100% {
        transform:
            translate(var(--end-x), var(--end-y))
            scale(1)
            rotateZ(360deg);
        opacity: 1;
    }
}

#penguStage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: var(--z-pengu);
}