/* =========================================================
   PRIMESCAPE INFOSOFT
   RESPONSIVE CORE V2
   FINAL RESPONSIVE AUTHORITY

   PURPOSE
   - Keep desktop cinematic design intact.
   - Recompose tablet/mobile without changing approved scenes.
   - Prevent 700px cinematic canvases from escaping the viewport.
   - Separate responsive scaling from scene animation transforms.
   - Load AFTER scene07.css.
========================================================= */


/* =========================================================
   01 — GLOBAL SAFETY
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.ps-cinematic-hero,
.ps-capability-showcase,
.ps-capability-scene,
.ps-motion-experience,
.ps-closing,
.ps-home-closing {
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    .ps-cinematic-hero,
    .ps-capability-showcase,
    .ps-capability-scene,
    .ps-motion-experience,
    .ps-closing,
    .ps-home-closing {
        overflow-x: hidden;
    }
}


/* =========================================================
   02 — UNIVERSAL RESPONSIVE CONTAINER
========================================================= */

@media (max-width: 1100px) {

    .ps-container,
    .container {
        width: min(100% - 48px, 960px);
        margin-inline: auto;
    }

    .ps-capability-scene {
        min-height: auto;
    }

    .ps-scene-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(34px, 6vw, 56px);
        width: 100%;
        min-width: 0;
    }

    .ps-scene-content,
    .ps-scene-visual {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .ps-scene-content {
        justify-self: stretch;
    }

    .ps-scene-visual {
        justify-self: stretch;
        margin-inline: auto;
    }
}


/* =========================================================
   03 — HERO: TABLET
========================================================= */

@media (max-width: 1100px) {

    .ps-hero-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: clamp(42px, 7vw, 68px) !important;
    }

    .ps-hero-copy {
        width: 100%;
        max-width: 820px;
    }

    .ps-tech-stage {
        width: min(700px, 100%) !important;
        margin-inline: auto !important;

        /*
         * IMPORTANT:
         * responsive scale uses the individual 'scale' property.
         * Scene animation files may continue using 'transform'.
         */
        scale: .88;
        transform-origin: top center;
    }

    body:not(.ps-intro-lock) .ps-tech-stage {
        transform: none !important;
    }
}


/* =========================================================
   04 — CINEMATIC SCENE CANVAS: TABLET
========================================================= */

@media (max-width: 900px) {

    .ps-capability-scene {
        padding: 86px 0 !important;
    }

    .ps-scene-content {
        max-width: 680px !important;
    }

    .ps-scene-content h3 {
        max-width: 100%;
    }

    .ps-scene-visual {
        position: relative;
        min-height: 520px !important;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        overflow: hidden;
    }

    /*
     * Preserve the original 700px cinematic coordinate system,
     * but scale it independently from animation transforms.
     */
    .ps-software-composition,
    .ps-browser-stack,
    .ps-phone-stage,
    .ps-ai-network {
        flex: 0 0 700px;
        width: 700px !important;
        max-width: none !important;
        height: 610px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform-origin: top center !important;
        scale: .82;
    }

    /*
     * showcase.css had transform:scale(.70) on these.
     * Remove only that base transform.
     * Scene files with stronger state selectors can still animate
     * transform while scale remains responsible for containment.
     */
    .ps-software-composition,
    .ps-browser-stack,
    .ps-phone-stage,
    .ps-ai-network {
        transform: none;
    }

    .ps-cyber-screening {
        width: min(100%, 720px) !important;
        margin-inline: auto;
    }
}


/* =========================================================
   05 — MOBILE FOUNDATION
========================================================= */

@media (max-width: 760px) {

    .ps-container,
    .container {
        width: calc(100% - 32px) !important;
        max-width: none;
        margin-inline: auto !important;
    }

    .ps-cinematic-hero {
        padding: 118px 0 66px !important;
    }

    .ps-hero-layout {
        gap: 38px !important;
    }

    .ps-hero-copy,
    .ps-scene-content {
        width: 100%;
        max-width: 100% !important;
    }

    .ps-main-heading {
        width: 100%;
        max-width: 100%;
        letter-spacing: -.045em !important;
    }

    .ps-main-heading span,
    .ps-main-heading strong {
        font-size: clamp(42px, 13vw, 62px) !important;
        line-height: .96;
        overflow-wrap: normal;
        word-break: normal;
    }

    .ps-hero-text {
        width: 100%;
        max-width: 36rem;
        font-size: 15px !important;
        line-height: 1.65;
    }

    .ps-hero-buttons {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ps-hero-buttons .ps-primary-button,
    .ps-hero-buttons .ps-secondary-button {
        width: 100% !important;
        max-width: 100%;
        justify-content: center;
        text-align: center;
    }

    .ps-hero-capabilities {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

    /*
     * Hero cinematic canvas.
     * responsive.css used transform:scale(.70), which fights Scene 01.
     * V2 moves responsive sizing to the independent scale property.
     */
    .ps-tech-stage {
        width: 700px !important;
        max-width: none !important;
        min-height: 620px !important;

        position: relative;
        left: 50%;
        margin-left: -350px !important;
        margin-right: 0 !important;
        margin-bottom: -155px !important;

        transform-origin: top center !important;
        scale: .56;
    }

    body:not(.ps-intro-lock) .ps-tech-stage {
        transform: none !important;
    }

    /* keep all hero layers inside the composition */
    .ps-tech-stage,
    .ps-tech-stage * {
        max-inline-size: none;
    }

    /*
     * Scene typography.
     */
    .ps-showcase-intro {
        padding: 72px 0 56px !important;
    }

    .ps-showcase-intro h2 {
        font-size: clamp(38px, 11.5vw, 52px) !important;
        line-height: .98;
        letter-spacing: -.045em !important;
    }

    .ps-showcase-intro p {
        font-size: 15px !important;
        line-height: 1.65;
    }

    .ps-capability-scene {
        min-height: auto !important;
        padding: 70px 0 !important;
    }

    .ps-scene-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 30px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .ps-scene-content {
        position: relative;
        z-index: 20;
    }

    .ps-scene-content h3 {
        width: 100%;
        max-width: 100% !important;
        font-size: clamp(39px, 11.7vw, 54px) !important;
        line-height: .98 !important;
        letter-spacing: -.045em !important;
        overflow-wrap: normal;
        word-break: normal;
    }

    .ps-scene-content > p,
    .ps-scene-content p {
        width: 100%;
        max-width: 100%;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    .ps-scene-tags {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /*
     * Mobile visual viewport.
     * It owns clipping and vertical space.
     */
    .ps-scene-software .ps-scene-visual,
    .ps-scene-web .ps-scene-visual,
    .ps-scene-mobile .ps-scene-visual,
    .ps-scene-ai .ps-scene-visual {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 390px !important;
        height: 390px !important;
        margin: 0 !important;

        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;

        overflow: hidden !important;
        contain: layout paint;
    }

    /*
     * Original cinematic coordinate system = 700px.
     * We keep it intact and reduce the OUTER canvas with 'scale'.
     *
     * Scene02/03/04/05 are still free to animate 'transform'.
     */
    .ps-software-composition,
    .ps-browser-stack,
    .ps-phone-stage,
    .ps-ai-network {
        position: relative !important;

        flex: 0 0 700px !important;
        width: 700px !important;
        max-width: none !important;
        height: 610px !important;

        margin: 0 !important;

        transform-origin: top center !important;
        scale: .52;
    }

    /*
     * Neutralize only the old base 700px mobile scale rule.
     * Do NOT use !important here: animated scene state transforms
     * from scene02–scene05 are intentionally allowed to win.
     */
    .ps-software-composition,
    .ps-browser-stack,
    .ps-phone-stage,
    .ps-ai-network {
        transform: none;
    }

    /*
     * Security was redesigned and does not need the old 700px stage.
     */
    .ps-scene-security .ps-scene-visual {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .ps-cyber-screening {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 440px !important;
        margin: 0 auto !important;
        overflow: hidden !important;
    }

    .ps-screening-space {
        width: 100%;
        min-width: 0;
        min-height: 332px !important;
        overflow: hidden;
    }

    .ps-cyber-hud,
    .ps-cyber-telemetry {
        max-width: 100%;
        overflow: hidden;
    }

    /*
     * Cloud already has a genuine responsive layout.
     * Keep it native and simply enforce viewport containment.
     */
    .ps-scene-cloud {
        max-width: 100%;
        overflow: hidden !important;
    }

    .ps-scene-cloud > .ps-container.ps-scene-grid {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
    }

    .ps-scene-cloud .ps-scene-visual {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .ps-scene-cloud .ps-cloud-stage {
        width: min(350px, 100%) !important;
        height: min(350px, calc(100vw - 32px)) !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }

    /*
     * Prevent decorative light fields from creating visual
     * horizontal spill on narrow devices.
     */
    .ps-scene-software::before,
    .ps-scene-software::after,
    .ps-scene-web::before,
    .ps-scene-mobile::before,
    .ps-scene-ai::before,
    .ps-scene-ai::after,
    .ps-scene-security::before,
    .ps-scene-cloud::before {
        max-width: 100vw;
    }
}


/* =========================================================
   06 — 480PX PHONE
========================================================= */

@media (max-width: 480px) {

    .ps-container,
    .container {
        width: calc(100% - 28px) !important;
    }

    .ps-main-heading span,
    .ps-main-heading strong {
        font-size: clamp(40px, 12.4vw, 54px) !important;
    }

    .ps-tech-stage {
        scale: .52;
        margin-bottom: -185px !important;
    }

    .ps-scene-software .ps-scene-visual,
    .ps-scene-web .ps-scene-visual,
    .ps-scene-mobile .ps-scene-visual,
    .ps-scene-ai .ps-scene-visual {
        height: 365px !important;
        min-height: 365px !important;
    }

    .ps-software-composition,
    .ps-browser-stack,
    .ps-phone-stage,
    .ps-ai-network {
        scale: .48;
    }

    .ps-cyber-screening {
        min-height: 420px !important;
    }

    .ps-scene-cloud > .ps-container.ps-scene-grid {
        width: calc(100% - 28px) !important;
    }

    .ps-scene-cloud .ps-cloud-stage {
        width: min(330px, 100%) !important;
        height: min(330px, calc(100vw - 28px)) !important;
    }
}


/* =========================================================
   07 — 430PX PHONE
========================================================= */

@media (max-width: 430px) {

    .ps-cinematic-hero {
        padding-top: 108px !important;
    }

    .ps-tech-stage {
        scale: .49;
        margin-bottom: -205px !important;
    }

    .ps-scene-content h3 {
        font-size: clamp(38px, 11.3vw, 49px) !important;
    }

    .ps-scene-software .ps-scene-visual,
    .ps-scene-web .ps-scene-visual,
    .ps-scene-mobile .ps-scene-visual,
    .ps-scene-ai .ps-scene-visual {
        height: 345px !important;
        min-height: 345px !important;
    }

    .ps-software-composition,
    .ps-browser-stack,
    .ps-phone-stage,
    .ps-ai-network {
        scale: .45;
    }

    .ps-cyber-screening {
        min-height: 405px !important;
    }

    .ps-screening-space {
        min-height: 305px !important;
    }
}


/* =========================================================
   08 — 390PX / 360PX SMALL PHONE
========================================================= */

@media (max-width: 390px) {

    .ps-container,
    .container {
        width: calc(100% - 24px) !important;
    }

    .ps-main-heading span,
    .ps-main-heading strong {
        font-size: clamp(38px, 12vw, 47px) !important;
    }

    .ps-tech-stage {
        scale: .45;
        margin-bottom: -230px !important;
    }

    .ps-scene-software .ps-scene-visual,
    .ps-scene-web .ps-scene-visual,
    .ps-scene-mobile .ps-scene-visual,
    .ps-scene-ai .ps-scene-visual {
        height: 325px !important;
        min-height: 325px !important;
    }

    .ps-software-composition,
    .ps-browser-stack,
    .ps-phone-stage,
    .ps-ai-network {
        scale: .41;
    }

    .ps-cyber-screening {
        min-height: 390px !important;
    }

    .ps-screening-space {
        min-height: 290px !important;
    }

    .ps-scene-cloud > .ps-container.ps-scene-grid {
        width: calc(100% - 24px) !important;
    }

    .ps-scene-cloud .ps-cloud-stage {
        width: min(310px, 100%) !important;
        height: min(310px, calc(100vw - 24px)) !important;
    }
}


@media (max-width: 360px) {

    .ps-container,
    .container {
        width: calc(100% - 20px) !important;
    }

    .ps-main-heading span,
    .ps-main-heading strong {
        font-size: 40px !important;
    }

    .ps-tech-stage {
        scale: .42;
        margin-bottom: -245px !important;
    }

    .ps-scene-software .ps-scene-visual,
    .ps-scene-web .ps-scene-visual,
    .ps-scene-mobile .ps-scene-visual,
    .ps-scene-ai .ps-scene-visual {
        height: 305px !important;
        min-height: 305px !important;
    }

    .ps-software-composition,
    .ps-browser-stack,
    .ps-phone-stage,
    .ps-ai-network {
        scale: .38;
    }

    .ps-scene-content h3 {
        font-size: 39px !important;
    }

    .ps-cyber-screening {
        min-height: 375px !important;
    }
}


/* =========================================================
   09 — TOUCH / PERFORMANCE
========================================================= */

@media (hover: none) and (pointer: coarse) {

    /*
     * Never depend on hover for important information.
     */
    .ps-primary-button,
    .ps-secondary-button,
    .ps-home-path,
    .ps-mobile-menu a {
        -webkit-tap-highlight-color: rgba(121, 80, 238, .10);
    }

    /*
     * Reduce costly ambient effects while keeping the
     * actual cinematic events.
     */
    .ps-ambient-glow,
    .ps-motion-glow {
        filter: blur(70px);
    }

    .ps-scene-visual {
        will-change: auto;
    }
}


/* =========================================================
   10 — REDUCED MOTION
========================================================= */

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

    .ps-tech-stage,
    .ps-software-composition,
    .ps-browser-stack,
    .ps-phone-stage,
    .ps-ai-network {
        transition: none !important;
    }
}