/* Cinematic Intro Overlay Styles - Clean & Glitch-Free */

#intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Prevent any flash on creation */
    visibility: visible;
}

#intro-shutter-top,
#intro-shutter-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #050505;
    z-index: 10;
    will-change: transform;
    /* Start closed — no transition yet to prevent flash */
    transform: translate3d(0, 0, 0);
    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.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Transition only added by JS at the right moment to prevent flash */
#intro-shutter-top.is-opening,
#intro-shutter-bottom.is-opening {
    transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Light mode shutter colors */
html.light #intro-shutter-top,
html.light #intro-shutter-bottom {
    background-color: #f5f5f5;
}

#intro-shutter-top  { top: 0; }
#intro-shutter-bottom { bottom: 0; }

/* Text container — sits above shutters */
.intro-text-container {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

#intro-text {
    text-align: center;
    opacity: 0;
    transform: none;  /* No default scale — prevents jump */
    will-change: opacity, transform;
    transition: opacity 0.15s ease-in-out;
    /* Dark mode: white text */
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}

/* Light mode text */
html.light #intro-text {
    color: rgba(10, 10, 10, 0.92);
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
}

/* Final Namaste glow */
#intro-text.final-namaste {
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.35);
    transition: opacity 0.5s ease-in-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.light #intro-text.final-namaste {
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   BACKGROUND BLUR EFFECT FOR SITE CONTENT
   Only applies AFTER transition class is added — prevents init flash
   ============================================================ */
body.cinematic-blur-active > *:not(#intro-overlay):not(script):not(style):not(link) {
    filter: blur(10px) brightness(0.65);
    transform: scale(1.015) translateZ(0);
    will-change: filter, transform;
}

html.light body.cinematic-blur-active > *:not(#intro-overlay):not(script):not(style):not(link) {
    filter: blur(10px) brightness(1.1);
}

/* Transition class added only when we WANT animated unblur */
body.cinematic-blur-transition > *:not(#intro-overlay):not(script):not(style):not(link) {
    transition: filter 1.1s cubic-bezier(0.76, 0, 0.24, 1),
                transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}