/**
 * Comet Sound — Comet Sound AI: static perspective GUI scene.
 *
 * The real app GUI (asset/images/ai/comet-ai-gui-v3-en.webp) sits in a FIXED
 * 3D perspective — it "comes out of the page" like the reference hero, with
 * no per-frame transform (the previous scroll-driven tilt caused jank on a
 * layer this large). The only motion is the glass callout chips revealing
 * in sequence as the section scrolls through the viewport; comet-ai-gui.js
 * just toggles their .is-on class. On small screens / reduced motion the
 * layout collapses to a flat static stack (pure CSS below, JS bails).
 */

/* ---- Scene container (normal flow, no sticky) -------------------------- */

.cs-aigui {
    position: relative;
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
    display: grid;
    justify-items: center;
}

/* ---- The GUI card: fixed perspective, CSS-only ------------------------- */

.cs-aigui__persp {
    perspective: 1700px;
    perspective-origin: 50% 24%;
    width: min(1120px, 92vw);
}

.cs-aigui__card {
    position: relative;
    margin: 0;
    /* Static "out of the page" pose — never animated. */
    transform: rotateX(24deg) rotateY(7deg) rotateZ(-4deg);
}

.cs-aigui__card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: clamp(10px, 1.2vw, 18px);
    border: 1px solid var(--cs-border, rgba(221, 239, 241, 0.14));
    box-shadow:
        0 60px 110px -40px rgba(0, 0, 0, 0.85),
        0 24px 50px -24px rgba(0, 0, 0, 0.7);
    background: var(--cs-panel, #0d110f);
}

/* Green energy glow under the window — brand accent, not a random gradient. */
.cs-aigui__card::before {
    content: "";
    position: absolute;
    inset: 12% -6% -10% -6%;
    z-index: -1;
    background:
        radial-gradient(58% 46% at 50% 78%,
            color-mix(in srgb, var(--cs-green, #7bffa3) 15%, transparent) 0%,
            transparent 72%);
    filter: blur(6px);
    pointer-events: none;
}

/* ---- Glass callout chips ----------------------------------------------- */

.cs-aigui__chip {
    position: absolute;
    z-index: 2;
    max-width: 30ch;
    padding: 0.85rem 1.05rem;
    border-radius: 14px;
    border: 1px solid var(--cs-border-strong, rgba(221, 239, 241, 0.28));
    background: rgba(9, 13, 11, 0.62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
}

.cs-aigui__chip.is-on {
    opacity: 1;
    transform: translateY(0);
}

.cs-aigui__chip strong {
    display: block;
    font-family: var(--cs-font-display, inherit);
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cs-text, #f5f5f0);
}

.cs-aigui__chip span {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--cs-muted, #91a5a9);
}

/* Anchors around the window (safe insets so nothing overflows the page).
   The chips sit OUTSIDE the perspective transform so they stay crisp. */
.cs-aigui__chip--intent  { top: 12%;  left: max(2vw, calc(50% - 640px)); }
.cs-aigui__chip--preview { top: 38%;  right: max(2vw, calc(50% - 645px)); }
.cs-aigui__chip--confirm { bottom: 6%; left: max(4vw, calc(50% - 580px)); }

/* ---- Static fallback: small screens + reduced motion ------------------- */

@media (max-width: 880px), (prefers-reduced-motion: reduce) {
    .cs-aigui__persp {
        perspective: none;
        width: min(1120px, 100%);
    }

    .cs-aigui__card {
        transform: none;
    }

    /* Chips become a readable stack under the window. */
    .cs-aigui__chip {
        position: static;
        opacity: 1;
        transform: none;
        max-width: none;
        margin-top: 0.9rem;
        pointer-events: auto;
    }

    .cs-aigui__chips-flow {
        display: grid;
        gap: 0;
        margin-top: 0.4rem;
        width: 100%;
    }
}

@media (min-width: 881px) and (prefers-reduced-motion: no-preference) {
    /* Chips live on the page plane on desktop; the wrapper is layout-free. */
    .cs-aigui__chips-flow {
        display: contents;
    }
}