/* Page Transition Animations */

/* Main container that holds the pages */
.page-transition-container {
    position: relative;
    min-height: 100vh;
    width: 100%;
}

/* Hide initial page load flash by covering the entire page */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-accent); /* Match transition color */
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.6s ease 0.6s; /* Delay fade out until transition completes */
    pointer-events: none;
}

body.loaded::before {
    opacity: 0;
}

/* When continuing a transition, body::before should fade out much faster */
body.is-continuing-transition.loaded::before {
    transition: opacity 0.1s ease !important; /* Very fast fade, no delay */
}

html[data-theme="dark"] body::before {
    background-color: var(--dark-primary-accent);
}

/* Base transition styles */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000; /* Increased from 9998 to be above body::before */
    pointer-events: none;
    transform: translateY(-100%); /* Start from top */
    visibility: hidden; /* Start hidden */
}

/* Transition overlay */
.page-transition-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-accent);
    transform: translateY(0);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Transition logo */
.page-transition-logo {
    width: 200px;
    height: auto;
    opacity: 0; /* Initially hidden, will be made visible by animations or JS */
    transform: scale(0.8) translateY(20px);
    transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
    filter: brightness(0) invert(1); /* Make logo white */
    max-width: 30vw; /* Responsive sizing */
    min-width: 80px; /* Minimum size for mobile */
}

/* Logo visible state during page load transition continuation (incoming) */
/* And when made visible via JS directly */
.page-transition[style*="visibility: visible"] .page-transition-logo,
.page-transition.incoming-transition .page-transition-logo {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition-duration: 0.01s; /* Make appearance very fast */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .page-transition-logo {
        width: 100px;
        max-width: 25vw;
    }
}

@media (max-width: 480px) {
    .page-transition-logo {
        width: 80px;
        max-width: 20vw;
    }
}

/* Logo pulse animation during outgoing transition */
.page-transition.transition-active .page-transition-logo {
    animation: logo-pulse 1.2s ease-in-out forwards;
    animation-delay: 0.2s; /* Start logo animation slightly after overlay starts */
}

@keyframes logo-pulse {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    30% {
        opacity: 1;
        transform: scale(1.05) translateY(0);
    }
    70% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% { /* Ensure logo stays visible throughout the outgoing animation */
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

html[data-theme="dark"] .page-transition-overlay {
    background-color: var(--dark-primary-accent);
}

/* Active transition styles (outgoing) */
.page-transition.transition-active {
    animation: page-transition-in 1.2s cubic-bezier(0.76, 0, 0.24, 1) forwards;
    pointer-events: all;
    visibility: visible; /* Make visible when active */
}

/* Exit transition styles for the overlay (incoming page) */
.page-transition-out .page-transition-overlay {
    animation: page-transition-overlay-out 1.2s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* Animations */
@keyframes page-transition-in { /* For overlay sliding in during outgoing transition */
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0%);
    }
}

@keyframes page-transition-overlay-out { /* For overlay sliding out during incoming transition */
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100%);
    }
}

/* Content transitions - initially hidden */
.content-transition {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    /* Delay transition to ensure page is fully loaded */
    transition-delay: 0.4s;
}

.content-transition.show {
    opacity: 1;
    transform: translateY(0);
}

/* Hide content during page load to prevent flash */
body:not(.loaded) main.content-transition {
    opacity: 0 !important;
}

/* Page specific transitions can be added here */
body.home-to-listing .page-transition-overlay,
body.listing-to-home .page-transition-overlay {
    background-color: var(--primary-accent, #4a6fdc);
}

body.home-to-about .page-transition-overlay,
body.about-to-home .page-transition-overlay {
    background-color: var(--secondary-color, #ff6b6b);
}

body.home-to-contact .page-transition-overlay,
body.contact-to-home .page-transition-overlay {
    background-color: var(--primary-accent, #4a6fdc);
}

body.home-to-agents .page-transition-overlay,
body.agents-to-home .page-transition-overlay,
body.listing-to-agents .page-transition-overlay,
body.agents-to-listing .page-transition-overlay {
    background-color: var(--primary-accent, #4a6fdc);
}

body.listing-to-detail .page-transition-overlay,
body.detail-to-listing .page-transition-overlay {
    background-color: var(--primary-accent, #4a6fdc);
}

body.detail-to-simulation .page-transition-overlay,
body.simulation-to-detail .page-transition-overlay {
    background-color: var(--secondary-color, #ff6b6b);
}