/* =========================================================
   PRIMESCAPE INFOSOFT
   MOBILE + AI VISUAL POLISH V2

   PURPOSE
   - Elevate Scene 04 (Mobile) and Scene 05 (AI)
   - Preserve existing geometry, transforms, scene timing and
     Responsive Core V2 containment.
   - Add richness through environment, material, screen light
     and controlled depth only.
========================================================= */


/* =========================================================
   01. SHARED
========================================================= */

.ps-scene-mobile,
.ps-scene-ai {
    isolation: isolate;
}

.ps-scene-mobile .ps-scene-content,
.ps-scene-ai .ps-scene-content {
    position: relative;
    z-index: 4;
}

.ps-scene-mobile .ps-scene-visual,
.ps-scene-ai .ps-scene-visual {
    position: relative;
    z-index: 3;
}

.ps-scene-mobile .ps-scene-content::before,
.ps-scene-ai .ps-scene-content::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -85px;
    top: -75px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.62),
            rgba(255,255,255,.22) 44%,
            transparent 70%
        );

    filter: blur(12px);
}


/* =========================================================
   02. MOBILE — PREMIUM DEVICE ENVIRONMENT
========================================================= */

.ps-scene-mobile {
    background:
        radial-gradient(
            circle at 81% 34%,
            rgba(205,196,220,.29),
            transparent 29%
        ),
        radial-gradient(
            circle at 14% 78%,
            rgba(229,205,187,.25),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #f1eee9 0%,
            #ece9e7 44%,
            #e8ecef 100%
        ) !important;
}


/*
 * Scene04 already owns ::before for its animated section light,
 * so the extra richness lives on the visual.
 */

.ps-scene-mobile .ps-scene-visual::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 720px;
    height: 590px;
    transform: translate(-50%, -50%);
    z-index: -2;
    pointer-events: none;

    border-radius:
        46% 54% 52% 48% /
        48% 45% 55% 52%;

    background:
        radial-gradient(
            circle at 50% 43%,
            rgba(255,255,255,.88),
            rgba(222,215,229,.32) 39%,
            rgba(177,190,209,.11) 61%,
            transparent 74%
        );

    filter: blur(9px);
}


.ps-scene-mobile .ps-scene-visual::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2%;
    width: 590px;
    height: 92px;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(35,43,64,.19),
            rgba(95,77,170,.07) 43%,
            transparent 72%
        );

    filter: blur(13px);
}


/* Phones feel more like physical devices */
.ps-scene-mobile .ps-showcase-phone {
    border:
        1px solid
        rgba(255,255,255,.18);

    background:
        linear-gradient(
            155deg,
            #121a31 0%,
            #0f172c 55%,
            #0a1226 100%
        );

    box-shadow:
        0 34px 78px rgba(28,35,62,.23),
        0 12px 28px rgba(38,45,66,.10),
        inset 0 1px 0 rgba(255,255,255,.065);
}


/* Center phone slightly more premium */
.ps-scene-mobile .phone-main {
    box-shadow:
        0 48px 100px rgba(27,35,63,.28),
        0 18px 42px rgba(45,50,70,.13),
        inset 0 1px 0 rgba(255,255,255,.075);
}


/* Screen surfaces */
.ps-scene-mobile .ps-phone-main-ui,
.ps-scene-mobile .ps-phone-ui {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 76% 15%,
            rgba(137,111,220,.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(73,136,196,.13),
            transparent 35%
        ),
        linear-gradient(
            160deg,
            #17213f,
            #101a35
        );
}


/* Light reflection on device glass */
.ps-scene-mobile .ps-phone-main-ui::after,
.ps-scene-mobile .ps-phone-ui::after {
    content: "";
    position: absolute;
    top: -25%;
    right: -18%;
    width: 55%;
    height: 150%;
    transform: rotate(18deg);
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.07),
            transparent
        );
}


/* App tiles */
.ps-scene-mobile .ps-mobile-app-grid i {
    border:
        1px solid
        rgba(255,255,255,.075);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(102,101,199,.075)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035);
}


/* Metadata chips */
.ps-scene-mobile .ps-scene-label,
.ps-scene-mobile .ps-scene-tags span {
    border-color:
        rgba(44,56,84,.09);

    background:
        rgba(255,255,255,.48);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* Scene completion glow */
.ps-scene-mobile.ps-s04-complete
.ps-phone-stage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    width: 540px;
    height: 420px;
    transform: translate(-50%, -50%);
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(109,89,196,.11),
            rgba(61,127,191,.045) 42%,
            transparent 72%
        );

    animation:
        psMobileAmbientV2
        7s
        ease-in-out
        infinite alternate;
}


@keyframes psMobileAmbientV2 {
    from { opacity: .50; }
    to   { opacity: 1; }
}


/* =========================================================
   03. AI — INTELLIGENCE CHAMBER
========================================================= */

.ps-scene-ai {
    background:
        radial-gradient(
            circle at 78% 38%,
            rgba(164,174,210,.30),
            transparent 31%
        ),
        radial-gradient(
            circle at 20% 84%,
            rgba(190,210,216,.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #e8ecef 0%,
            #e5e8ee 48%,
            #e9e7ef 100%
        ) !important;
}


/* Network chamber */
.ps-scene-ai .ps-scene-visual::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 740px;
    height: 620px;
    transform: translate(-50%, -50%);
    z-index: -2;
    pointer-events: none;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.72) 0%,
            rgba(194,202,228,.26) 36%,
            rgba(137,154,197,.085) 57%,
            transparent 73%
        );

    box-shadow:
        inset 0 0 120px rgba(107,100,185,.035);

    filter: blur(8px);
}


.ps-scene-ai .ps-scene-visual::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1%;
    width: 600px;
    height: 86px;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(30,42,70,.17),
            rgba(80,73,173,.065) 43%,
            transparent 72%
        );

    filter: blur(13px);
}


/* AI core becomes a premium luminous object */
.ps-scene-ai .ps-ai-core {
    border:
        1px solid
        rgba(255,255,255,.58);

    background:
        radial-gradient(
            circle at 34% 25%,
            rgba(255,255,255,.82),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            rgba(112,93,205,.97),
            rgba(73,97,189,.96) 52%,
            rgba(53,73,153,.96)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.36),
        0 0 0 10px rgba(113,99,204,.035),
        0 28px 75px rgba(68,68,155,.22),
        0 0 65px rgba(97,95,207,.12);
}


/* Additional inner light without consuming ::after shockwave */
.ps-scene-ai .ps-ai-core::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: inherit;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 40% 34%,
            rgba(255,255,255,.20),
            transparent 55%
        );

    opacity: .85;
}


/* AI nodes = intelligent glass modules */
.ps-scene-ai .ps-ai-node {
    border:
        1px solid
        rgba(255,255,255,.64);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.77),
            rgba(231,235,246,.61)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.86),
        0 17px 42px rgba(43,52,82,.10);

    backdrop-filter:
        blur(15px)
        saturate(115%);

    -webkit-backdrop-filter:
        blur(15px)
        saturate(115%);
}


/* Connection lines feel energized but not neon */
.ps-scene-ai .ps-ai-lines {
    filter:
        drop-shadow(
            0 0 5px
            rgba(91,104,192,.14)
        );
}

.ps-scene-ai .ps-ai-lines path {
    stroke:
        rgba(92,104,176,.34);
}


/* Metadata */
.ps-scene-ai .ps-scene-label,
.ps-scene-ai .ps-scene-tags span {
    border-color:
        rgba(44,56,84,.09);

    background:
        rgba(255,255,255,.45);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.70);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* =========================================================
   04. AI COMPLETE — CONTROLLED INTELLIGENCE FIELD
========================================================= */

.ps-scene-ai.ps-s05-complete
.ps-ai-network::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 590px;
    height: 590px;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;

    background:
        repeating-radial-gradient(
            circle,
            rgba(94,100,184,.065) 0 1px,
            transparent 1px 72px
        );

    opacity: .75;

    animation:
        psAiFieldV2
        9s
        ease-in-out
        infinite alternate;
}


@keyframes psAiFieldV2 {
    from {
        opacity: .42;
    }

    to {
        opacity: .82;
    }
}


/* =========================================================
   05. TYPOGRAPHY
========================================================= */

.ps-scene-mobile .ps-scene-content h3,
.ps-scene-ai .ps-scene-content h3 {
    text-shadow:
        0 1px 0 rgba(255,255,255,.42);
}

.ps-scene-mobile .ps-scene-content > p,
.ps-scene-ai .ps-scene-content > p {
    color:
        #687286;
}


/* =========================================================
   06. TABLET
========================================================= */

@media (max-width: 1024px) {

    .ps-scene-mobile .ps-scene-visual::before,
    .ps-scene-ai .ps-scene-visual::before {
        width: 650px;
        height: 520px;
    }

    .ps-scene-mobile .ps-scene-content::before,
    .ps-scene-ai .ps-scene-content::before {
        width: 340px;
        height: 340px;
        left: -70px;
    }
}


/* =========================================================
   07. MOBILE
   Responsive Core V2 still controls the 700px cinematic canvas.
========================================================= */

@media (max-width: 760px) {

    .ps-scene-mobile {
        background:
            radial-gradient(
                circle at 86% 30%,
                rgba(205,196,220,.23),
                transparent 25%
            ),
            linear-gradient(
                150deg,
                #f1eee9,
                #e9ecef
            ) !important;
    }

    .ps-scene-ai {
        background:
            radial-gradient(
                circle at 83% 34%,
                rgba(164,174,210,.24),
                transparent 26%
            ),
            linear-gradient(
                150deg,
                #e8ecef,
                #e7e7ed
            ) !important;
    }

    .ps-scene-mobile .ps-scene-visual::before,
    .ps-scene-ai .ps-scene-visual::before {
        width: 520px;
        height: 420px;
        opacity: .74;
    }

    .ps-scene-mobile .ps-scene-visual::after,
    .ps-scene-ai .ps-scene-visual::after {
        width: 460px;
        height: 68px;
        opacity: .68;
    }

    .ps-scene-mobile .ps-scene-label,
    .ps-scene-mobile .ps-scene-tags span,
    .ps-scene-ai .ps-ai-node,
    .ps-scene-ai .ps-scene-label,
    .ps-scene-ai .ps-scene-tags span {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .ps-scene-mobile .ps-scene-content::before,
    .ps-scene-ai .ps-scene-content::before {
        width: 260px;
        height: 260px;
        left: -90px;
        opacity: .64;
    }
}


/* =========================================================
   08. REDUCED MOTION
========================================================= */

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

    .ps-scene-mobile.ps-s04-complete
    .ps-phone-stage::before,

    .ps-scene-ai.ps-s05-complete
    .ps-ai-network::before {
        animation: none !important;
    }
}