/* =========================================================
   COMET SOUND — GSAP PRODUCT SCENES (plugin detail)
   Cinematic pinned product scene. The real GUI sits inside a
   product frame; GSAP (comet-gsap-scenes.js) pins the stage and
   drives entrance / camera / per-control focus / hotspots / CTA.
   Without JS (or reduced motion) this CSS shows a readable static
   product: GUI visible, all text in flow, no hotspots.
   ========================================================= */

.cs-pscene {
    position: relative;
    --plugin-accent: var(--cs-green);
}

.cs-pstage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    width: 100%;
    max-width: var(--cs-max);
    margin-inline: auto;
    min-height: 100svh;
    padding: calc(var(--header-h) + 3vh) var(--cs-gutter) 3vh;
    perspective: 1400px;
}

/* ---------- depth layers ---------- */
.cs-pstage__grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(221, 239, 241, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(221, 239, 241, 0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at 35% 45%, black, transparent 72%);
    opacity: 0.55;
    pointer-events: none;
}

.cs-pstage__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 35% 45%, color-mix(in srgb, var(--plugin-accent) 16%, transparent), transparent 46%);
    pointer-events: none;
}

/* ---------- product frame (the device) ---------- */
.cs-pframe {
    position: relative;
    width: 100%;
    aspect-ratio: 2140 / 1288;
    transform-style: preserve-3d;
    will-change: transform;
}

.cs-pframe__inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid var(--cs-border-strong);
    border-radius: clamp(0.7rem, 1.1vw, 1.3rem);
    background: var(--cs-panel-soft);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}

.cs-pframe__glow {
    position: absolute;
    inset: -1px;
    border-radius: clamp(0.7rem, 1.1vw, 1.3rem);
    pointer-events: none;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--plugin-accent) 30%, transparent),
        0 0 70px color-mix(in srgb, var(--plugin-accent) 20%, transparent);
}

/* the GUI + hotspots layer that pans/zooms (camera into the screen) */
.cs-pframe__zoom {
    position: absolute;
    inset: 0;
    transform-origin: 50% 50%;
    will-change: transform;
}

.cs-pframe__gui {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.cs-pframe__zoom .cs-gui {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* ---------- external hotspots (track controls, never alter the GUI) ---------- */
.cs-hotspot {
    position: absolute;
    left: calc(var(--hx, 50) * 1%);
    top: calc(var(--hy, 50) * 1%);
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0; /* shown by JS only */
}

.cs-hotspot__dot {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--plugin-accent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--plugin-accent) 60%, transparent);
}

.cs-hotspot__ring {
    position: absolute;
    inset: 0;
    border: 1px solid var(--plugin-accent);
    border-radius: 50%;
    opacity: 0.6;
}

.cs-hotspot.is-active .cs-hotspot__ring {
    animation: csHotspotPulse 1.7s ease-out infinite;
}

@keyframes csHotspotPulse {
    0% { transform: scale(0.6); opacity: 0.65; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* ---------- side: signal line + text phases + CTA ---------- */
.cs-pside {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.cs-psignal {
    width: 100%;
    height: 40px;
    overflow: visible;
    opacity: 0.8;
}

.cs-psignal__path {
    fill: none;
    stroke: var(--plugin-accent);
    stroke-width: 1.6;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--plugin-accent) 45%, transparent));
}

.cs-pphases {
    position: relative;
}

.cs-pphase {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* in-flow (static fallback): stack phases with spacing, all readable */
.cs-pphases:not(.is-pinned-side) .cs-pphase + .cs-pphase {
    margin-top: 2rem;
}

.cs-pphase__num {
    font-family: var(--cs-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--plugin-accent);
}

.cs-pphase__title {
    margin: 0;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    letter-spacing: -0.03em;
}

.cs-pphase__copy {
    margin: 0;
    color: var(--cs-muted);
    font-size: var(--fs-body);
    line-height: 1.7;
}

.cs-pcta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.5rem;
}

/* ---------- pinned (desktop, JS active): overlap + cross-fade ---------- */
.cs-pstage.is-pinned .cs-pphases {
    min-height: clamp(8rem, 22vh, 14rem);
}

.cs-pstage.is-pinned .cs-pphase {
    position: absolute;
    inset: 0;
}

.cs-pstage.is-pinned .cs-pphase + .cs-pphase {
    margin-top: 0;
}

/* ---------- mobile: single column, no pin, calmer ---------- */
@media (max-width: 900px) {
    .cs-pstage {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: calc(var(--header-h) + 2vh);
        perspective: none;
    }

    .cs-pstage.is-pinned .cs-pphase {
        position: relative;
        inset: auto;
    }

    .cs-pstage.is-pinned .cs-pphase + .cs-pphase {
        margin-top: 2rem;
    }

    .cs-hotspot { display: none; }
}

/* ---------- reduced motion: static, readable, calm ---------- */
@media (prefers-reduced-motion: reduce) {
    .cs-pframe { transform: none !important; }
    .cs-pframe__zoom { transform: none !important; }
    .cs-hotspot { display: none; }
    .cs-pphase { position: relative !important; inset: auto !important; opacity: 1 !important; }
    .cs-pphase + .cs-pphase { margin-top: 2rem; }
    .cs-pcta { opacity: 1 !important; }
}