/* =========================================
ANGELIC MODE
========================================= */

body[data-state="angelic"]{

    background:#050505;
}

/* =========================================
LIGHT BACKGROUND
========================================= */

body[data-state="angelic"] .light-bg{

    background:
    radial-gradient(
    circle at center,
    rgba(255,255,255,0.62),
    rgba(255,240,210,0.22),
    rgba(120,140,255,0.10),
    rgba(0,0,0,0.88)
    );

    filter:
    brightness(1.2)
    saturate(1.1);

    opacity:1;

    transition:
    background 2s ease,
    filter 2s ease,
    opacity 2s ease;
}

/* =========================================
ANGELIC STORY TEXT
========================================= */

body[data-state="angelic"] .story-text{

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,0.12),
    rgba(180,190,255,0.08)
    );

    border:
    1px solid rgba(255,255,255,0.10);

    box-shadow:
    0 0 35px rgba(255,240,220,0.10);
}

/* =========================================
ANGELIC FULLSCREEN TEXT
========================================= */

body[data-state="angelic"] .story-fullscreen-text{

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,0.12),
    rgba(180,190,255,0.08)
    );

    border:
    1px solid rgba(255,255,255,0.10);

    box-shadow:
    0 0 35px rgba(255,240,220,0.10);
}

/* =========================================
ANGELIC IMAGE HALO
========================================= */

body[data-state="angelic"] .slide.active::after{

    content:'';

    position:absolute;

    left:50%;
    top:50%;

    width:65%;
    height:65%;

    transform:
    translate(-50%,-50%);

    background:
    radial-gradient(
    circle,
    rgba(255,240,220,0.22),
    rgba(255,230,180,0.08),
    transparent 72%
    );

    filter:blur(45px);

    z-index:1;

    pointer-events:none;

    animation:
    angelicHalo 5s ease-in-out infinite;
}

@keyframes angelicHalo{

    0%{

        opacity:0.55;

        transform:
        translate(-50%,-50%)
        scale(1);
    }

    50%{

        opacity:1;

        transform:
        translate(-50%,-50%)
        scale(1.08);
    }

    100%{

        opacity:0.55;

        transform:
        translate(-50%,-50%)
        scale(1);
    }
}

/* =========================================
ANGELIC STORY IMAGE
========================================= */

body[data-state="angelic"] .story-image{

    filter:
    brightness(1)
    saturate(1.08)
    contrast(1.02);

    transition:
    filter 1.5s ease;
}

/* =========================================
ANGELIC MEDIA HALO
========================================= */

body[data-state="angelic"] .story-media::after{

    content:'';

    position:absolute;

    inset:0;

    background:
    radial-gradient(
    circle at center,
    rgba(255,240,220,0.18),
    rgba(255,220,180,0.08),
    transparent 72%
    );

    pointer-events:none;

    mix-blend-mode:screen;
}