/* ======================================================
   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),
        transparent 60%
    ),
    linear-gradient(
        to bottom,
        rgba(0,0,0,0),
        rgba(0,0,0,.96)
    );
    backdrop-filter:blur(0);
    transition:
    opacity .85s ease,
    backdrop-filter .85s ease;
}
/* ======================================================
   ACTIVE TRANSITION
====================================================== */
#pageTransition.active{
    opacity:1;
    backdrop-filter:blur(12px);
    pointer-events:auto;
}
/* ======================================================
   STORY PORTAL TRANSITION
====================================================== */
#pageTransition.portal-open{
    opacity:1;
    pointer-events:auto;
    backdrop-filter:
    blur(18px)
    brightness(1.35);
    background:
    radial-gradient(
        circle at center,
        rgba(255,248,220,1) 0%,
        rgba(255,230,160,.96) 18%,
        rgba(176,126,74,.75) 42%,
        rgba(28,18,8,.94) 100%
    );
    animation:
    portalFlash 1.5s ease forwards;
}
/* ======================================================
   PORTAL FLASH
====================================================== */
@keyframes portalFlash{
    0%{
        opacity:0;
        transform:scale(.96);
    }
    30%{
        opacity:1;
        transform:scale(1.02);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}
/* ======================================================
   PAGE ENTER
====================================================== */
body{
    animation:pageEnter .9s ease;
}
@keyframes pageEnter{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* ======================================================
   REDUCED MOTION
====================================================== */
@media (prefers-reduced-motion: reduce){
    *{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}