@import url("./HeroTest.current-base.css");

/* Mobile Live System Map refinement.
   Keeps the current desktop design intact while making the mobile map denser
   and moving the layer controls onto the visual itself. */

/* Navigation + footer refinements */
.hero-test-nav-purchase {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(255, 54, 95, 0.76);
    background: rgba(255, 54, 95, 0.1);
    color: #fff;
    font-family: "DM Mono", monospace;
    font-size: 0.59rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255, 54, 95, 0.03), 0 0 22px rgba(255, 54, 95, 0.08);
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.hero-test-nav-purchase:hover {
    border-color: #ff7892;
    background: rgba(255, 54, 95, 0.19);
    box-shadow: 0 0 28px rgba(255, 54, 95, 0.16);
    transform: translateY(-1px);
}

.footer-brick-link {
    margin-top: 4px !important;
    padding: 8px 10px;
    border: 1px solid rgba(217, 255, 67, 0.34);
    background: rgba(217, 255, 67, 0.045);
    color: #dffb72 !important;
    font-family: "DM Mono", monospace;
    font-size: 0.68rem !important;
    letter-spacing: 0.05em;
}

.footer-brick-link:hover {
    border-color: rgba(217, 255, 67, 0.72);
    background: rgba(217, 255, 67, 0.09);
    color: #efffb5 !important;
}

@media (max-width: 820px) {
    .hero-test-nav {
        min-height: 64px;
        padding-left: 18px;
        padding-right: 18px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        background: rgba(5, 6, 10, 0.94);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .hero-test-brand {
        min-width: 0;
        gap: 10px;
        white-space: nowrap;
    }

    .hero-test-nav-actions {
        justify-self: end;
        gap: 0;
    }

    .hero-test-nav-contact,
    .hero-test-nav-meta {
        display: none;
    }

    .hero-test-nav-purchase {
        min-height: 38px;
        padding: 0 13px;
        border-color: var(--pink);
        background: var(--pink);
        color: #08090d;
        font-size: 0.54rem;
        box-shadow: 0 0 22px rgba(255, 54, 95, 0.18);
    }

    .hero-test-nav-purchase:hover {
        background: #ff6684;
        color: #08090d;
    }

    .integration-stage-column {
        position: relative;
    }

    .integration-stage-shell {
        min-height: 0;
        height: clamp(500px, 76vw, 590px);
        max-height: 590px;
    }
}

@media (max-width: 600px) {
    .hero-test-nav {
        min-height: 60px;
        padding-left: 14px;
        padding-right: 14px;
        gap: 8px;
    }

    .hero-test-brand {
        font-size: 0.69rem;
        letter-spacing: 0.12em;
    }

    .hero-test-brand-mark {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
    }

    .hero-test-nav-purchase {
        min-height: 36px;
        padding: 0 10px;
        gap: 7px;
        font-size: 0.5rem;
        letter-spacing: 0.08em;
    }

    .integration-hero {
        gap: 20px;
    }

    .integration-stage-shell {
        min-height: 0;
        height: clamp(455px, 112vw, 520px);
        max-height: 520px;
    }

    /* When the real 3D scene is active, use the same tracked cards as desktop. */
    .integration-stage-shell.is-3d-ready .integration-node-label {
        display: grid;
        min-width: 112px;
        padding: 7px 8px 7px 7px;
        grid-template-columns: auto 1fr;
        column-gap: 7px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(5, 7, 11, 0.9);
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .integration-stage-shell.is-3d-ready .integration-node-label span {
        padding-right: 7px;
        font-size: 0.48rem;
    }

    .integration-stage-shell.is-3d-ready .integration-node-label strong {
        font-size: 0.54rem;
        letter-spacing: 0.08em;
        line-height: 1.2;
    }

    .integration-stage-shell.is-3d-ready .integration-node-label small {
        font-size: 0.42rem;
        letter-spacing: 0.08em;
    }

    .integration-stage-shell.is-3d-ready .integration-node-label::before {
        height: 14px;
    }

    .integration-stage-shell.is-3d-ready .label-web {
        transform: translate(-92%, -132%);
    }

    .integration-stage-shell.is-3d-ready .label-app {
        transform: translate(-50%, -128%);
    }

    .integration-stage-shell.is-3d-ready .label-ai {
        transform: translate(-8%, -132%);
    }

    /* The old bottom selector becomes floating desktop-style cards for the 2D tier. */
    .integration-mobile-map-controls {
        position: absolute;
        z-index: 8;
        top: 0;
        left: -20px;
        right: -20px;
        height: clamp(455px, 112vw, 520px);
        margin: 0;
        border: 0;
        background: transparent;
        pointer-events: none;
    }

    .integration-stage-shell.is-3d-ready + .integration-mobile-map-controls {
        display: none;
    }

    .integration-mobile-node-grid {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }

    .integration-mobile-node {
        position: absolute;
        width: 118px;
        min-width: 0;
        min-height: 52px;
        padding: 7px 8px 7px 7px;
        display: grid;
        grid-template-columns: 25px 1fr;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 2px 7px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(5, 7, 11, 0.9);
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
        color: #f7f8fa;
        text-align: left;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        pointer-events: auto;
        transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
    }

    .integration-mobile-node::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        width: 1px;
        height: 14px;
        background: rgba(255, 255, 255, 0.28);
    }

    .integration-mobile-node span {
        grid-row: 1 / 3;
        align-self: stretch;
        padding-right: 7px;
        display: grid;
        place-items: center;
        border-right: 1px solid rgba(255, 255, 255, 0.13);
        color: var(--pink-soft);
        font-size: 0.48rem;
    }

    .integration-mobile-node strong {
        font-size: 0.54rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        line-height: 1.2;
    }

    .integration-mobile-node::after {
        grid-column: 2;
        color: #737985;
        font: 0.42rem "DM Mono", monospace;
        letter-spacing: 0.08em;
    }

    .integration-mobile-node[data-node="web"] {
        left: 10px;
        top: 34%;
        transform: translateY(-118%);
    }

    .integration-mobile-node[data-node="web"]::after { content: "ATTRACT"; }

    .integration-mobile-node[data-node="app"] {
        left: 50%;
        top: 21%;
        transform: translate(-50%, -118%);
    }

    .integration-mobile-node[data-node="app"]::after { content: "OPERATE"; }

    .integration-mobile-node[data-node="ai"] {
        right: 10px;
        top: 34%;
        transform: translateY(-118%);
    }

    .integration-mobile-node[data-node="ai"]::after { content: "AUTOMATE"; }

    .integration-mobile-node[data-node="app"] span {
        color: var(--cyan);
    }

    .integration-mobile-node[data-node="ai"] span {
        color: var(--gold);
    }

    .integration-mobile-node[data-node="web"].is-active {
        border-color: var(--pink);
        background: rgba(31, 8, 15, 0.94);
    }

    .integration-mobile-node[data-node="app"].is-active {
        border-color: var(--cyan);
        background: rgba(4, 25, 31, 0.94);
    }

    .integration-mobile-node[data-node="ai"].is-active {
        border-color: var(--gold);
        background: rgba(31, 25, 7, 0.94);
    }

    /* Compact the lightweight 2D scene as well. */
    .integration-canvas-fallback {
        padding: 42px 12px 86px;
    }

    .lite-system-map {
        min-height: 0;
        height: 100%;
    }

    .lite-system-node {
        width: 78px;
        min-height: 64px;
        padding: 7px;
    }

    .lite-system-node strong,
    .lite-system-node small {
        display: none;
    }

    .lite-system-node i {
        margin: auto;
    }

    .lite-system-web {
        left: 5%;
        top: 29%;
    }

    .lite-system-app {
        top: 8%;
    }

    .lite-system-ai {
        right: 5%;
        top: 29%;
    }

    .lite-system-business {
        top: 49%;
    }

    .lite-system-outcomes {
        bottom: 5%;
    }

    /* Keep the copy panel close to the system instead of leaving a large dead zone. */
    .integration-benefit-panel {
        right: 16px;
        bottom: 14px;
        left: 16px;
        padding-left: 12px;
    }

    .integration-benefit-copy h2 {
        font-size: 1.02rem;
    }

    .integration-benefit-copy p {
        font-size: 0.74rem;
    }

    /* Low-power/lite phones get an even tighter 2D map. */
    html[data-performance-tier="lite"] .integration-stage-shell,
    html[data-performance-tier="lite"] .integration-mobile-map-controls {
        height: clamp(430px, 104vw, 485px);
        max-height: 485px;
    }

    html[data-performance-tier="lite"] .integration-canvas-fallback {
        padding-top: 38px;
        padding-bottom: 78px;
    }

    .hero-home-footer-main {
        padding-top: 50px;
    }

    .footer-brick-link {
        width: fit-content;
        padding: 8px 9px;
        font-size: 0.62rem !important;
    }
}

@media (max-width: 420px) {
    .hero-test-nav {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hero-test-brand {
        font-size: 0.64rem;
        letter-spacing: 0.1em;
    }

    .hero-test-nav-purchase {
        padding: 0 9px;
        font-size: 0.47rem;
    }

    .integration-stage-shell,
    .integration-mobile-map-controls {
        height: clamp(440px, 118vw, 490px);
        max-height: 490px;
    }

    .integration-mobile-node {
        width: 104px;
        min-height: 48px;
        padding: 6px 7px 6px 6px;
        grid-template-columns: 22px 1fr;
        gap: 1px 6px;
    }

    .integration-mobile-node strong {
        font-size: 0.49rem;
        letter-spacing: 0.065em;
    }

    .integration-mobile-node span,
    .integration-mobile-node::after {
        font-size: 0.4rem;
    }

    .integration-mobile-node[data-node="web"] {
        left: 6px;
        top: 35%;
    }

    .integration-mobile-node[data-node="ai"] {
        right: 6px;
        top: 35%;
    }

    .integration-mobile-node[data-node="app"] {
        top: 22%;
    }

    .integration-stage-shell.is-3d-ready .integration-node-label {
        min-width: 102px;
        padding: 6px 7px 6px 6px;
    }

    .integration-stage-shell.is-3d-ready .integration-node-label strong {
        font-size: 0.49rem;
    }

    .integration-stage-shell.is-3d-ready .integration-node-label small,
    .integration-stage-shell.is-3d-ready .integration-node-label span {
        font-size: 0.4rem;
    }
}

@media (max-height: 620px) and (pointer: coarse) {
    .integration-stage-shell,
    .integration-mobile-map-controls {
        height: 430px;
        max-height: 430px;
    }
}