/* ================================================
   LOISTE STUDIO - CINEMATIC PAGE TRANSITIONS
   Strictly Additive & SEO Safe
   ================================================ */

.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #faf9f7;
    /* Highest possible z-index to stay above everything */
    z-index: 2147483647;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: opacity;
}

/* Texture overlay for the transition for extra detail */
.transition-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZmlsdGVyIGlkPSJub2lzZSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuODUiIG51bU9jdGF2ZXM9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNub2lzZSkiIG9wYWNpdHk9IjAuMDMiPjwvcmVjdD48L3N2Zz4=');
    pointer-events: none;
    opacity: 0.4;
}

/* Active state for exit transitions */
.transition-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Initial entrance animation (fade out overlay on load) */
.transition-overlay.is-initial-load {
    opacity: 1;
    visibility: visible;
    animation: transitionReveal 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes transitionReveal {
    0% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* --- Preloader Styles --- */
.transition-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.loader-circle {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(193, 182, 164, 0.2);
    border-top: 2px solid var(--color-bronze, #C1B6A4);
    border-radius: 50%;
    animation: loaderRotate 0.8s linear infinite;
}

.loader-text {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: 0.5em;
    color: var(--color-bronze, #C1B6A4);
    margin-right: -0.5em;
    /* Offset for letter spacing centering */
    opacity: 0.8;
}

@keyframes loaderRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Hide loader when transition is not active */
.transition-overlay:not(.is-active):not(.is-initial-load) .transition-loader {
    opacity: 0;
    pointer-events: none;
}

/* --- Grain Effect --- */
.transition-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}

/* Disable for Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .transition-overlay {
        display: none !important;
    }
}