/* =========================================================
   PRIMESCAPE INFOSOFT
   SOFTWARE + WEB VISUAL POLISH V2

   PURPOSE
   - Add premium environmental richness to Scene 02 + Scene 03.
   - Preserve all current scene geometry, transforms, entrance/exit
     animations and Responsive Core V2 containment.
   - No changes to JS timing or scene structure.
========================================================= */


/* =========================================================
   01. SHARED MATERIAL LANGUAGE
========================================================= */

.ps-scene-software,
.ps-scene-web {
    isolation: isolate;
}

.ps-scene-software .ps-scene-content,
.ps-scene-web .ps-scene-content {
    position: relative;
    z-index: 4;
}

.ps-scene-software .ps-scene-visual,
.ps-scene-web .ps-scene-visual {
    position: relative;
    z-index: 3;
}


/* Soft editorial light behind copy */
.ps-scene-software .ps-scene-content::before,
.ps-scene-web .ps-scene-content::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -90px;
    top: -80px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.66),
            rgba(255,255,255,.26) 42%,
            transparent 70%
        );
    filter: blur(12px);
}


/* =========================================================
   02. SOFTWARE — ENGINEERING ENVIRONMENT
========================================================= */

.ps-scene-software {
    background:
        radial-gradient(
            circle at 82% 38%,
            rgba(198,205,224,.34),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 75%,
            rgba(224,205,191,.28),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #f0eee8 0%,
            #e9edf0 50%,
            #eef0f3 100%
        ) !important;
}


/* Architectural depth layer */
.ps-scene-software::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(36,48,74,.032) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(36,48,74,.032) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.52),
            rgba(0,0,0,.16) 54%,
            transparent 92%
        );
}


/*
 * Existing scene02.css uses ::after for the cinematic wipe.
 * Do NOT redefine ::after here.
 */


/* Product stage halo */
.ps-scene-software .ps-scene-visual::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 710px;
    height: 590px;
    transform: translate(-50%, -50%);
    z-index: -2;
    border-radius:
        48% 52% 58% 42% /
        46% 43% 57% 54%;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 46% 42%,
            rgba(255,255,255,.84),
            rgba(211,216,231,.32) 38%,
            rgba(167,181,207,.11) 59%,
            transparent 73%
        );

    filter: blur(8px);
}


/* Grounding shadow */
.ps-scene-software .ps-scene-visual::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: 620px;
    height: 96px;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(31,43,68,.20),
            rgba(76,66,170,.08) 42%,
            transparent 72%
        );

    filter: blur(14px);
}


/* Main software product — deeper physical screen */
.ps-scene-software .ps-software-main-window {
    border:
        1px solid
        rgba(255,255,255,.075);

    background:
        linear-gradient(
            145deg,
            #111a34 0%,
            #0f1933 52%,
            #0b142b 100%
        );

    box-shadow:
        0 48px 105px rgba(28,37,72,.28),
        0 18px 45px rgba(40,49,78,.14),
        inset 0 1px 0 rgba(255,255,255,.055);
}


/* Window chrome */
.ps-scene-software .ps-software-main-window .ps-window-bar {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.040),
            rgba(255,255,255,.012)
        );

    border-bottom:
        1px solid
        rgba(255,255,255,.065);
}


/* Main interface panels */
.ps-scene-software .ps-soft-panels > div {
    border:
        1px solid
        rgba(255,255,255,.075);

    background:
        linear-gradient(
            155deg,
            rgba(91,114,202,.12),
            rgba(255,255,255,.028)
        );

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


/* Sidebar gains subtle material depth */
.ps-scene-software .ps-soft-sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.016),
            rgba(255,255,255,.003)
        );
}


/* Rear code window */
.ps-scene-software .ps-software-back-window {
    border:
        1px solid
        rgba(255,255,255,.06);

    background:
        linear-gradient(
            145deg,
            rgba(21,29,58,.97),
            rgba(11,19,42,.97)
        );

    box-shadow:
        0 32px 75px rgba(24,34,69,.22),
        inset 0 1px 0 rgba(255,255,255,.04);
}


/* Code lines feel illuminated, but controlled */
.ps-scene-software .ps-code-stack span {
    box-shadow:
        0 0 16px rgba(83,120,241,.10);
}


/* Floating service chips — tactile glass */
.ps-scene-software .ps-soft-floating-chip {
    border:
        1px solid
        rgba(255,255,255,.66);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.78),
            rgba(235,239,248,.63)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.84),
        0 17px 42px rgba(39,49,79,.11);

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

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


/* Scene metadata material */
.ps-scene-software .ps-scene-label,
.ps-scene-software .ps-scene-tags span {
    border-color:
        rgba(46,58,88,.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);
}


/* =========================================================
   03. SOFTWARE — COMPLETION LIGHT
========================================================= */

.ps-scene-software.ps-s02-complete
.ps-software-composition::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 48%;
    width: 520px;
    height: 360px;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(115,101,207,.12),
            rgba(83,125,195,.055) 42%,
            transparent 72%
        );

    animation:
        psSoftwareAmbientV2
        6.8s
        ease-in-out
        infinite alternate;
}


@keyframes psSoftwareAmbientV2 {
    from {
        opacity: .55;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================
   04. SOFTWARE → WEB ENVIRONMENTAL HANDOFF
========================================================= */

.ps-scene-software.ps-s03-exit::before {
    opacity: .32;
    transition: opacity .65s ease;
}


/* =========================================================
   05. WEB — DIGITAL EXPERIENCE ENVIRONMENT
========================================================= */

.ps-scene-web {
    background:
        radial-gradient(
            circle at 79% 37%,
            rgba(192,187,224,.30),
            transparent 30%
        ),
        radial-gradient(
            circle at 14% 83%,
            rgba(194,211,220,.22),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #eaedf0 0%,
            #eceaf0 48%,
            #f0eef2 100%
        ) !important;
}


/*
 * scene03.css already uses ::before for its animated web light.
 * We preserve it and only add a separate atmospheric layer
 * on the scene background element / visual containers.
 */

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

    border-radius:
        52% 48% 43% 57% /
        48% 44% 56% 52%;

    background:
        radial-gradient(
            circle at 48% 44%,
            rgba(255,255,255,.88),
            rgba(220,218,235,.34) 38%,
            rgba(173,184,210,.11) 60%,
            transparent 74%
        );

    filter: blur(10px);
}


.ps-scene-web .ps-scene-visual::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3%;
    width: 640px;
    height: 90px;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(31,42,66,.17),
            rgba(93,75,188,.07) 43%,
            transparent 72%
        );

    filter: blur(14px);
}


/* =========================================================
   06. WEB BROWSER MATERIAL
========================================================= */

.ps-scene-web .ps-browser-layer {
    border:
        1px solid
        rgba(255,255,255,.70);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.90),
        0 35px 85px rgba(41,48,76,.13);
}


/* Rear browser: subdued mineral glass */
.ps-scene-web .browser-back {
    background:
        linear-gradient(
            145deg,
            rgba(225,229,238,.94),
            rgba(203,210,225,.84)
        );
}


/* Middle browser: brighter editorial material */
.ps-scene-web .browser-middle {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.91),
            rgba(239,238,246,.87)
        );

    backdrop-filter:
        blur(14px);

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


/* Front browser: premium white product shell */
.ps-scene-web .browser-front {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(244,245,249,.96)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 48px 110px rgba(38,45,72,.17),
        0 14px 38px rgba(36,45,68,.09);
}


/* Browser chrome */
.ps-scene-web .ps-browser-controls {
    border-bottom:
        1px solid
        rgba(41,53,83,.075);

    background:
        linear-gradient(
            180deg,
            rgba(249,250,252,.98),
            rgba(242,244,248,.94)
        );
}


/* Front browser preview — subtle internal light */
.ps-scene-web .ps-web-hero-preview {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 76% 24%,
            rgba(210,202,241,.36),
            transparent 32%
        ),
        radial-gradient(
            circle at 18% 88%,
            rgba(197,217,225,.25),
            transparent 33%
        ),
        linear-gradient(
            145deg,
            #faf9fb,
            #f1f2f6
        );
}


.ps-scene-web .ps-web-hero-preview::before {
    content: "";
    position: absolute;
    right: -10%;
    top: -28%;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(122,94,218,.14),
            transparent 68%
        );

    filter: blur(8px);
}


/* Middle preview */
.ps-scene-web .ps-web-preview {
    background:
        radial-gradient(
            circle at 74% 30%,
            rgba(211,204,240,.30),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(250,250,252,.95),
            rgba(235,238,244,.95)
        );
}


/* Scene tags and label */
.ps-scene-web .ps-scene-label,
.ps-scene-web .ps-scene-tags span {
    border-color:
        rgba(46,58,88,.09);

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

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

    backdrop-filter:
        blur(8px);

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


/* =========================================================
   07. WEB COMPLETION — SUBTLE SCREEN PRESENCE
========================================================= */

.ps-scene-web.ps-s03-complete
.ps-browser-stack::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 570px;
    height: 420px;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(112,93,204,.11),
            rgba(71,122,191,.045) 43%,
            transparent 72%
        );

    animation:
        psWebAmbientV2
        7.4s
        ease-in-out
        infinite alternate;
}


@keyframes psWebAmbientV2 {
    from {
        opacity: .50;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================
   08. TYPOGRAPHY DEPTH
========================================================= */

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

.ps-scene-software .ps-scene-content > p,
.ps-scene-web .ps-scene-content > p {
    color:
        #687286;
}


/* =========================================================
   09. LARGE DESKTOP ONLY — VERY SUBTLE VERTICAL LIGHT PLANES
========================================================= */

@media (min-width: 1101px) {

    .ps-scene-software .ps-scene-bg::after {
        content: "";
        position: absolute;
        right: 7%;
        top: 11%;
        width: 1px;
        height: 68%;
        pointer-events: none;

        background:
            linear-gradient(
                to bottom,
                transparent,
                rgba(73,86,118,.13) 22%,
                rgba(255,255,255,.72) 50%,
                rgba(73,86,118,.08) 78%,
                transparent
            );
    }


    .ps-scene-web .ps-browser-stack {
        filter:
            drop-shadow(
                0 22px 28px
                rgba(48,54,84,.05)
            );
    }
}


/* =========================================================
   10. TABLET
========================================================= */

@media (max-width: 1024px) {

    .ps-scene-software .ps-scene-visual::before,
    .ps-scene-web .ps-scene-visual::before {
        width:
            650px;

        height:
            520px;
    }


    .ps-scene-software .ps-scene-content::before,
    .ps-scene-web .ps-scene-content::before {
        width:
            340px;

        height:
            340px;

        left:
            -70px;
    }
}


/* =========================================================
   11. MOBILE
   Keep richness but remove unnecessary GPU-heavy glass.
========================================================= */

@media (max-width: 760px) {

    .ps-scene-software {
        background:
            radial-gradient(
                circle at 86% 32%,
                rgba(198,205,224,.27),
                transparent 25%
            ),
            linear-gradient(
                150deg,
                #f0eee8,
                #e9edf0
            ) !important;
    }


    .ps-scene-web {
        background:
            radial-gradient(
                circle at 82% 35%,
                rgba(192,187,224,.24),
                transparent 26%
            ),
            linear-gradient(
                150deg,
                #eaedf0,
                #eeebf0
            ) !important;
    }


    .ps-scene-software::before {
        opacity:
            .45;

        background-size:
            50px 50px;
    }


    .ps-scene-software .ps-scene-visual::before,
    .ps-scene-web .ps-scene-visual::before {
        width:
            520px;

        height:
            420px;

        opacity:
            .75;
    }


    .ps-scene-software .ps-scene-visual::after,
    .ps-scene-web .ps-scene-visual::after {
        width:
            470px;

        height:
            70px;

        opacity:
            .68;
    }


    .ps-scene-software .ps-soft-floating-chip,
    .ps-scene-software .ps-scene-label,
    .ps-scene-software .ps-scene-tags span,
    .ps-scene-web .browser-middle,
    .ps-scene-web .ps-scene-label,
    .ps-scene-web .ps-scene-tags span {
        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }


    .ps-scene-software .ps-scene-content::before,
    .ps-scene-web .ps-scene-content::before {
        width:
            260px;

        height:
            260px;

        left:
            -90px;

        opacity:
            .66;
    }
}


/* =========================================================
   12. REDUCED MOTION
========================================================= */

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

    .ps-scene-software.ps-s02-complete
    .ps-software-composition::before,

    .ps-scene-web.ps-s03-complete
    .ps-browser-stack::before {
        animation:
            none !important;
    }
}