/* ======================================================
   NIGHTANGELS ? TRANSITIONS.CSS
   Global page transitions system
====================================================== */

/* ======================================================
   PAGE TRANSITION OVERLAY
====================================================== */

#pageTransition{

    position:fixed;

    inset:0;

    z-index:99999;

    pointer-events:none;

    opacity:0;

    background:

    radial-gradient(
    circle at center,
    var(--theme-glow, rgba(255,255,255,0.06)),
    transparent 60%
    ),

    linear-gradient(
    to bottom,
    rgba(0,0,0,0.0),
    rgba(0,0,0,0.96)
    );

    backdrop-filter:blur(0px);

    transition:
    opacity 0.85s ease,
    backdrop-filter 0.85s ease;
}

/* ======================================================
   ACTIVE TRANSITION
====================================================== */

#pageTransition.active{

    opacity:1;

    backdrop-filter:blur(12px);

    pointer-events:auto;
}

/* ======================================================
   PAGE ENTER
====================================================== */

body{

    animation:
    pageEnter 0.9s ease;
}

@keyframes pageEnter{

    from{

        opacity:0;

        transform:
        translateY(8px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);
    }
}

/* ======================================================
   FADE-UP SYSTEM
====================================================== */

.fade-up{

    opacity:0;

    transform:
    translateY(45px);

    transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}

.fade-up.visible{

    opacity:1;

    transform:
    translateY(0);
}

/* ======================================================
   FADE SCALE
====================================================== */

.fade-scale{

    opacity:0;

    transform:
    scale(0.94);

    transition:
    opacity 1.1s ease,
    transform 1.1s ease;
}

.fade-scale.visible{

    opacity:1;

    transform:
    scale(1);
}

/* ======================================================
   SOFT GLOW APPEAR
====================================================== */

.glow-appear{

    opacity:0;

    filter:
    blur(14px);

    transition:
    opacity 1.6s ease,
    filter 1.6s ease;
}

.glow-appear.visible{

    opacity:1;

    filter:
    blur(0px);
}

/* ======================================================
   HERO REVEAL
====================================================== */

.hero-reveal{

    animation:
    heroReveal 1.8s ease;
}

@keyframes heroReveal{

    from{

        opacity:0;

        transform:
        scale(1.03);

        filter:
        blur(12px)
        brightness(0.5);
    }

    to{

        opacity:1;

        transform:
        scale(1);

        filter:
        blur(0px)
        brightness(1);
    }
}

/* ======================================================
   IMAGE CINEMATIC REVEAL
====================================================== */

.image-reveal{

    overflow:hidden;
}

.image-reveal img{

    animation:
    imageReveal 2.4s ease;
}

@keyframes imageReveal{

    from{

        opacity:0;

        transform:
        scale(1.12);

        filter:
        blur(14px);
    }

    to{

        opacity:1;

        transform:
        scale(1);

        filter:
        blur(0px);
    }
}

/* ======================================================
   MOBILE OPTIMIZATION
====================================================== */

@media(max-width:768px){

    #pageTransition{

        backdrop-filter:none;
    }

    #pageTransition.active{

        backdrop-filter:blur(4px);
    }

    .fade-up{

        transform:
        translateY(24px);

        transition:
        opacity 0.9s ease,
        transform 0.9s ease;
    }

    .fade-scale{

        transition:
        opacity 0.9s ease,
        transform 0.9s ease;
    }

    .glow-appear{

        transition:
        opacity 1s ease;
    }

}

/* ======================================================
   REDUCED MOTION
====================================================== */

@media(prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;
    }

}