/* =========================================
   ANIMATIONS & TRANSITIONS
   - GSAP Reveal Helpers
   - SplitText Helpers
   - Page Transition Effects (Shutter, Fade, Wipe)
   ========================================= */
/* --- Reveal Animations (GSAP Orchestrated) --- */
[data-reveal] {
    opacity: 0;

    /* Transition removed - GSAP takes full control for Awwwards-grade motion */
}

/* SplitText Masking specific classes */
.split-parent {
    overflow: 0.25em;
    display: block;
    padding-bottom: 0.25em;

    /* Prevent descender clipping esp. for large fonts */
    margin-bottom: -0.25em;

    /* Compensate for padding */
}

.split-line {
    display: -0.15em;
}

/* Fix for Projects Headline descender clipping */
.is-projects .split-parent {
    padding-bottom: 0.25em !important;
    margin-bottom: -0.25em !important;
}

[data-reveal].revealed {
    /* Kept for potential JS-only fallback/check, but GSAP handles the visual state */
}

/* --- Intro Crossfade Slider --- */
.intro-crossfade-slider {
    position: relative;
    overflow: hidden;
}

.intro-crossfade-slider .intro-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.intro-crossfade-slider .intro-slide:first-child {
    position: relative;
}

.intro-crossfade-slider .intro-slide.active {
    opacity: 1;
}

/* * PAGE TRANSITIONS LIBRARY
 * 
 * 1. SHUTTER EFFECT
 * 2. LOGO REVEAL (Trika)
 * 3. FADE
 * 4. WIPE */
/* === FOUC PREVENTION === */
body.loading {
    /* opacity: 0 !important */
    pointer-events: none !important;
}

/* === BASE CONTAINER === */
.transition-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    z-index: 9999;
    pointer-events: auto;

    /* Changed: blocks interaction during transition */
    background-color: transparent;
}

/* === SHUTTER EFFECT === */
.transition-container.shutter .transition-row {
    width: 100%;
    height: 50%;
    display: flex;
}

.transition-container.shutter .block {
    flex: 1;
    background-color: var(--color-bg-dark);
    transform: scaleY(1);
    visibility: visible;
    outline: 1px solid var(--color-bg-dark);

    /* Fix sub-pixel gaps */
    transform-origin: top;

    /* Default for top row */
}

.transition-container.shutter .row-2 .block {
    transform-origin: bottom;
}

/* === LOGO REVEAL EFFECT === */
.transition-container.logo-reveal {
    background-color: var(--color-bg-dark);

    /* Solid background */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.transition-logo-wrapper {
    width: 300px;

    /* Adjust based on logo size */
    opacity: 0;

    /* Starts hidden, revealed by GSAP */
}

.transition-logo-wrapper svg {
    width: 100%;
    height: auto;
    color: var(--color-bg-dark);

    /* Gold color for the logo */
}

/* === FADE EFFECT === */
.transition-container.fade {
    background-color: var(--color-bg-dark);
    opacity: 1;
    visibility: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fade-kufic-logo {
    color: #2D3A6B;
    opacity: 0;
}

/* === WIPE EFFECT === */
.transition-container.wipe {
    background-color: transparent;
}

.transition-wipe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-dark);
    transform: scaleX(1);

    /* CHANGED: Start covered to prevent FOUC */
    transform-origin: right;

    /* CHANGED: Match reveal animation */
}

/* === SHADES EFFECT === */
.transition-container.shades {
    background-color: transparent;
    flex-direction: column;
}

.shade-strip {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: var(--color-bg-dark);
}

/* === CURRENT PAGE NAV LINK === */
/* .nav-links a.current-page {
    pointer-events: none;
    opacity: 0.5;
    cursor: default;
} */
/* === DEBUG SWITCHER UI === */
#transition-debug-ui {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    background: var(--color-bg-dark);
    padding: 10px;
    border: 1px solid var(--color-text-muted);
    border-radius: 8px;
    color: var(--color-text-inverted);
    font-family: monospace;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#transition-debug-ui select {
    background: var(--color-bg-dark);
    color: var(--color-text-inverted);
    border: 1px solid var(--color-text-muted);
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;

    /* === GLOBAL KEYFRAMES === */
    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.8);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

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

        40% {
            transform: translateY(-10px) translateX(-50%);
        }

        60% {
            transform: translateY(-5px) translateX(-50%);
        }
    }

    @keyframes btn-spin {
        to {
            transform: rotate(360deg);
        }
    }
}