/**
 * Option 3: Reveal Wipe Intro Animation
 * Clean, dynamic, corporate (2-3s)
 * CSS-based wipe effects
 */

/* Intro Overlay - Light & Fast with Brand Purple */
.intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg,
        #ffffff 0%,
        #f8f9ff 25%,
        #f0ebff 50%,
        #f8f9ff 75%,
        #ffffff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 1;
}

.intro-overlay.wipe-out {
    animation: wipeOutRight 0.8s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

/* Logo with reveal wipe effect - Clean & Fast */
.intro-logo-wrapper {
    position: relative;
    overflow: visible !important;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(128, 0, 255, 0.15);
    border-radius: 24px;
    padding: 3rem;
    box-shadow:
        0 10px 40px rgba(128, 0, 255, 0.12),
        0 4px 12px rgba(128, 0, 255, 0.08);
    min-width: 300px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-logo {
    width: 450px;
    max-width: 85vw;
    height: auto;
    filter: drop-shadow(0 4px 16px rgba(128, 0, 255, 0.15));
    animation: logoRevealWipe 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    display: block !important;
    visibility: visible !important;
}

/* Wipe Reveal Animation for Logo */
@keyframes logoRevealWipe {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateX(-30px);
    }
    40% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
}

/* Overlay Wipe Out Animation */
@keyframes wipeOutRight {
    0% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
    100% {
        clip-path: inset(0 0 0 100%);
        opacity: 0;
    }
}

/* Animated subtle shine effect */
.intro-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(128, 0, 255, 0.05) 50%,
        transparent 100%
    );
    animation: scanLine 4s ease-in-out infinite;
}

@keyframes scanLine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Accent lines - DISABLED (grey boxes removed) */
.intro-accent-line {
    display: none;
}

@keyframes lineExpand {
    0% {
        width: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 600px;
        opacity: 0;
    }
}

/* Hide intro if already played */
body.intro-played .intro-overlay {
    display: none !important;
}

/* Hero logo always visible - no hiding */
.hero-logo-container {
    opacity: 1 !important;
}

/* Website content visible after intro */
body:not(.intro-played) #main-content {
    opacity: 1;
}

body.intro-played #main-content {
    opacity: 1;
}

@keyframes contentWipeIn {
    0% {
        opacity: 0;
        clip-path: inset(0 0 0 100%);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .intro-logo {
        width: 300px;
    }

    @keyframes lineExpand {
        0% {
            width: 0;
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            width: 90vw;
            opacity: 0;
        }
    }

    @keyframes logoRevealWipe {
        0% {
            opacity: 0;
            clip-path: inset(0 100% 0 0);
            transform: translateX(-20px);
        }
        40% {
            opacity: 1;
            clip-path: inset(0 0 0 0);
            transform: translateX(0);
        }
        100% {
            opacity: 1;
            clip-path: inset(0 0 0 0);
            transform: translateX(0);
        }
    }
}

/* Grid pattern - DISABLED (grey boxes removed) */
.intro-overlay::after {
    display: none;
}