/* Page transition overlay system */
.page-transition-overlay {
    position: fixed;
    top: 0; /* Ensure it starts at the absolute top */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh; /* Use viewport height to ensure full coverage */
    margin: 0; /* Reset any margins */
    padding: 0; /* Reset any padding */
    background-color: var(--bg-primary, #121212);
    z-index: 999; 
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.025s ease-out;
    will-change: opacity;
    visibility: hidden;
    overflow: hidden;
    border: none; /* Ensure no borders */
}

/* Progress bar styles */
.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px; /* Slightly increased height */
    background: rgba(255, 255, 255, 0.4); /* Lighter background */
    border-radius: 2px; /* Rounded corners */
    overflow: hidden; /* Ensure progress stays within bounds */
  }

.progress-bar.active {
    animation: progressScale 0.15s ease-out forwards;
}

@keyframes progressScale {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

/* Add a simple progress bar animation at the top (of the overlay) */
.page-transition-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background-color: var(--text-primary, #715df2);
    z-index: 2;
}

.page-transition-overlay.active::before {
    animation: progressBar 0.15s ease-out forwards;
}

@keyframes progressBar {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.page-transition-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

/* Body fade-in animation - only for content below header */
/* Body fade-in animation for all content */
/* Body fade-in animation - only for content below header */
@media (max-width: 1224px) {
    /* Target only main content areas */
    .bottom-section, 
    .container > .anime-info,
    .container > .episode-list,
    .container > .comments-section {
        animation: bodyFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        transform-origin: center;
        opacity: 0;
        transform: scale(0.97);
    }
    
    @keyframes bodyFadeIn {
        0% { 
            opacity: 0;
            transform: scale(0.97);
        }
        100% { 
            opacity: 1;
            transform: scale(1);
        }
    }
}

/* Ensure smooth transitions */
html, body {
    transition: background-color 0.025s ease-out;
    margin: 0; /* Ensure body has no margin */
    padding: 0; /* Ensure body has no padding */
}