/* Custom Keyframes for Cover Animation: Slow Zoom/Pulse */
@keyframes slow-zoom {
    0% { transform: scale(1.0); }
    50% { transform: scale(1.02); } /* Subtle zoom in */
    100% { transform: scale(1.0); }
}

/* Custom Keyframes for Realistic 3D Hot Air Balloon Loader */
@keyframes float-balloon-3d {
    0% {
        transform: translateY(0) rotateZ(0deg) perspective(500px) rotateX(0deg);
    }
    33% {
        transform: translateY(-12px) rotateZ(3deg) perspective(500px) rotateX(5deg);
    }
    66% {
        transform: translateY(-5px) rotateZ(-3deg) perspective(500px) rotateX(-5deg);
    }
    100% {
        transform: translateY(0) rotateZ(0deg) perspective(500px) rotateX(0deg);
    }
}

/* Custom animations for travel elements */
@keyframes cloud-drift {
    0% { transform: translateX(-20%) translateY(0); opacity: 0.7; }
    50% { transform: translateX(20%) translateY(-3px); opacity: 0.9; }
    100% { transform: translateX(60%) translateY(0); opacity: 0.7; }
}
@keyframes sway-slow {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(0.2deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
@keyframes pin-bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}
@keyframes plane-fly {
    0% { transform: translateX(-15%) translateY(0) rotate(2deg); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translateX(55%) translateY(-8%) rotate(2deg); }
    100% { transform: translateX(115%) translateY(-12%) rotate(2deg); opacity: 0; }
}
@keyframes car-drive {
    0% { transform: translateX(-15%); opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(115%); opacity: 0; }
}
@keyframes boat-float {
    0% { transform: translateX(-10%) translateY(0) rotate(0deg); }
    50% { transform: translateX(50%) translateY(-3px) rotate(1deg); }
    100% { transform: translateX(110%) translateY(0) rotate(0deg); }
}
@keyframes train-chug {
    0% { transform: translateX(-20%); }
    100% { transform: translateX(120%); }
}

/* Animation classes */
.animate-drift { animation: cloud-drift 38s linear infinite; }
.animate-drift-slow { animation: cloud-drift 55s linear infinite; }
.animate-sway { animation: sway-slow 6s ease-in-out infinite; }
.animate-pin { animation: pin-bounce 2.8s ease-in-out infinite; }
.animate-plane { animation: plane-fly 18s linear infinite; }
.animate-car { animation: car-drive 14s linear infinite; }
.animate-boat { animation: boat-float 20s ease-in-out infinite; }
.animate-bird { animation: bird-glide 12s ease-in-out infinite; }

/* Custom Styles for Book Container */
#book-container-wrapper {
    width: 100%;
    height: 100vh;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    #book-container-wrapper {
        width: 80%;
        max-width: 1000px;
        margin: 0 auto;
    }
}

#book-container {
    aspect-ratio: 3/4;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 90vh;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    perspective: 2000px;
    margin: 0 auto;
    background-color: white;
    transform-style: flat;
}

/* The element that holds the content and rotates */
#page-display {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    transform-style: preserve-3d;
    transform-origin: left center;
    backface-visibility: hidden;
    transform: rotateY(0deg);
    transition: transform 1.2s cubic-bezier(0.4, 0.2, 0.2, 1);
    position: relative;
}

/* Styling for the page content */
.book-page-content {
    width: 100%;
    height: 100%;
    padding: 0;
    overflow-y: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* Re-add padding specifically for non-image pages */
.book-page-content:not(.image-page) {
    padding: 1.5rem;
}

/* Cover page background image */
.cover-page-bg {
    background-image: url('../src/cover.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.no-transition {
    transition: none !important;
}

/* Bootstrap compatibility styles */
.bg-opacity-75 {
    background-color: rgba(255, 255, 255, 0.75) !important;
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

/* Custom button hover effects */
.btn:hover {
    transform: scale(1.05);
}

/* Media Queries for Responsive Book Design */

/* For tablets (e.g., iPads) in portrait and landscape */
@media (max-width: 1024px) {
    #book-container-wrapper {
        padding: 15px;
    }

    #book-container {
        max-height: 85vh;
    }
}

/* For mobile devices in landscape */
@media (max-width: 767px) and (orientation: landscape) {
    #book-container-wrapper {
        padding: 10px;
    }

    #book-container {
        max-height: 90vh;
    }

    .book-page-content:not(.image-page) {
        padding: 1rem;
    }
}

/* For mobile devices in portrait */
@media (max-width: 480px) {
    #book-container-wrapper {
        padding: 10px;
    }

    #book-container {
        max-height: 80vh;
        box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.3);
    }

    .book-page-content:not(.image-page) {
        padding: 0.75rem;
    }

    /* Adjust button positions for smaller screens */
    #prev-button {
        left: -5px;
    }

    #next-button {
        right: -5px;
    }
}