@keyframes pageTurn {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(-10deg) scale(0.95); }
    100% { transform: rotateY(0deg); }
}

.page-changing {
    animation: pageTurn 0.5s ease;
}

@keyframes tailSwish {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.wonder-cover-container:hover .wonder-svg {
    animation: tailSwish 0.5s ease infinite;
}

@keyframes capeFlutter {
    0% { transform: skew(0deg); }
    25% { transform: skew(2deg); }
    75% { transform: skew(-2deg); }
    100% { transform: skew(0deg); }
}

.wonder-svg path:last-child {
    animation: capeFlutter 3s ease infinite;
    transform-origin: top center;
}

@keyframes cardDraw {
    0% { transform: translateY(-50px) rotate(-5deg); opacity: 0; }
    100% { transform: translateY(0) rotate(0); opacity: 1; }
}

.wonder-card {
    animation: cardDraw 0.3s ease-out;
}

.timer-bar {
    transition: width 0.1s linear;
}

.meter-bar {
    transition: height 0.5s ease;
}

.weather-icon, .time-icon {
    transition: transform 0.3s ease;
}

.weather-icon:hover, .time-icon:hover {
    transform: scale(1.2) rotate(10deg);
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-20px); }
}

.special-event {
    animation: bounce 0.5s ease;
}

@keyframes walkCycle {
    0% { left: -100px; }
    100% { left: 110%; }
}

.wonder-silhouette {
    animation: walkCycle 20s linear infinite;
}

@keyframes buttonPress {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.sketch-button:active {
    animation: buttonPress 0.1s ease;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}