/**
 * Comet Sound — Bundle page: 3D orbit of plugin GUI cards.
 *
 * Pure CSS 3D ring (perspective + preserve-3d); the ring's rotateY and the
 * per-card depth fade are driven by bundle-orbit.js (transform/opacity only).
 * Reduced-motion stops the auto spin (JS) — the ring stays a static, fully
 * readable fan. On mobile the ring simply scales down (transform-only, cheap).
 */

/* ============== hero ============== */

.cs-orbit-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(5.5rem, 9vw, 7.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    /* Signature dark stage: soft green accent glow, never a flat gradient. */
    background:
        radial-gradient(55% 45% at 50% 0%, color-mix(in srgb, var(--cs-green) 10%, transparent) 0%, transparent 65%),
        radial-gradient(40% 35% at 82% 78%, color-mix(in srgb, var(--cs-cyan) 6%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, #070d0b 0%, var(--cs-ink, #050706) 62%);
}

.cs-orbit-hero__head {
    max-width: var(--cs-max);
    margin-inline: auto;
    padding-inline: var(--cs-gutter);
    text-align: center;
    display: grid;
    justify-items: center;
}

.cs-orbit-hero__title {
    margin: 0 0 16px;
    font-size: clamp(2.4rem, 4.8vw, 4.4rem);
    line-height: 1.0;
    letter-spacing: -0.015em;
    color: var(--cs-text);
}

.cs-orbit-hero__lead {
    margin: 0;
    max-width: 52ch;
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    line-height: 1.55;
    color: var(--cs-muted);
}

/* ============== orbit stage ============== */

.cs-orbit {
    --orbit-card-w: clamp(180px, 21vw, 360px);
    --orbit-card-h: calc(var(--orbit-card-w) / 1.66);
    --orbit-r: calc(var(--orbit-card-w) * 1.32);
    position: relative;
    margin-top: clamp(1rem, 2.5vw, 2rem);
    /* Room below for the arrows row (positioned under the stage). */
    margin-bottom: clamp(4.8rem, 6vw, 5.8rem);
    height: calc(var(--orbit-card-h) * 1.75);
    perspective: 1500px;
    perspective-origin: 50% 32%;
    /* Vertical scroll stays native (Lenis); horizontal drag spins the ring. */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    cursor: grab;
}

.cs-orbit.is-dragging { cursor: grabbing !important; }

/* ============== real 3D orbit (Three.js progressive enhancement) ============== */

/* The GLB orbit renders here; bundle-orbit-3d.js adds body.is-orbit3d on
   success. The CSS ring below stays as the fallback and, when 3D is active,
   as the invisible keyboard/screen-reader path. */
.cs-orbit__canvas {
    position: absolute;
    /* Overscan: the front card projects larger than the stage, so a
       stage-sized canvas was clipping the GUI right where the controls sit.
       The JS compensates render size + FOV, framing unchanged. */
    top: -15%;
    left: -8%;
    width: 116%;
    height: 130%;
    display: none;
}

body.is-orbit3d .cs-orbit__canvas { display: block; }

body.is-orbit3d .cs-orbit__ring {
    opacity: 0;
    pointer-events: none;
}

.cs-orbit__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--orbit-card-w);
    height: var(--orbit-card-h);
    margin: calc(var(--orbit-card-h) / -2) 0 0 calc(var(--orbit-card-w) / -2);
    transform-style: preserve-3d;
    will-change: transform;
}

.cs-orbit__card {
    position: absolute;
    inset: 0;
    transform: rotateY(calc(var(--i) * 60deg)) translateZ(var(--orbit-r));
    transform-style: preserve-3d;
    border-radius: 14px;
    outline-offset: 4px;
    will-change: opacity;
}

.cs-orbit__face,
.cs-orbit__backface {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 1px solid var(--cs-border-strong, rgba(221, 239, 241, 0.28));
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Card body like the plugin pages' 3D card: dark glass rim around the GUI
   plus a soft diagonal glass sheen. */
.cs-orbit__face {
    padding: 1.2%;
    background:
        linear-gradient(150deg, rgba(245, 245, 240, 0.10) 0%, rgba(245, 245, 240, 0.02) 38%, transparent 60%),
        #101413;
    box-shadow:
        inset 0 1px 0 rgba(245, 245, 240, 0.12),
        0 26px 60px rgba(0, 0, 0, 0.5);
}

/* Rear side: the same glass card body seen from behind — clearly visible
   while it travels around the back, never a mirrored GUI. */
.cs-orbit__backface {
    transform: rotateY(180deg);
    background:
        linear-gradient(115deg, rgba(245, 245, 240, 0.14) 0%, rgba(245, 245, 240, 0.04) 34%, transparent 62%),
        radial-gradient(80% 90% at 50% 110%, color-mix(in srgb, var(--plugin-accent, var(--cs-green)) 10%, transparent) 0%, transparent 70%);
    background-color: #141917;
    box-shadow:
        inset 0 1px 0 rgba(245, 245, 240, 0.14),
        0 26px 60px rgba(0, 0, 0, 0.5);
}

.cs-orbit__face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    pointer-events: none;
}

/* JS flips face/back at the 90° edge (class .is-away) — deterministic across
   engines, and a GUI is never shown mirrored. backface-visibility stays as a
   second line of defence. */
.cs-orbit__face,
.cs-orbit__backface {
    transition: opacity 0.22s linear;
}

.cs-orbit__card.is-away .cs-orbit__face { opacity: 0; }
.cs-orbit__card:not(.is-away) .cs-orbit__backface { opacity: 0; }

.cs-orbit__reserved {
    display: grid;
    place-items: center;
    height: 100%;
    font-family: var(--cs-mono, ui-monospace, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cs-muted-deep);
}

.cs-orbit__card:hover .cs-orbit__face,
.cs-orbit__card:focus-visible .cs-orbit__face {
    border-color: color-mix(in srgb, var(--plugin-accent, var(--cs-green)) 55%, var(--cs-border-strong));
}

/* ============== controls ============== */

.cs-orbit__controls {
    position: absolute;
    left: 50%;
    /* A bit lower than the stage edge so the front GUI gets breathing room. */
    bottom: -80px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 3;
}

.cs-orbit__nav {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--cs-border-strong, rgba(221, 239, 241, 0.28));
    background: rgba(5, 7, 6, 0.55);
    color: var(--cs-text-cold, #DDEFF1);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.cs-orbit__nav:hover {
    border-color: var(--cs-green);
    color: var(--cs-green);
    background: var(--cs-glass, rgba(245, 245, 240, 0.055));
}

.cs-orbit__hint {
    font-family: var(--cs-mono, ui-monospace, monospace);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cs-muted-deep);
}

/* ============== bundle grid: glass cards ============== */

/* Same glass material as the parameter boxes on the plugin pages
   (.cs-card3d-step): frosted panel, soft deep shadow, 20px radius. */
.cs-plugin-card--glass {
    background: var(--cs-glass-strong, rgba(245, 245, 240, 0.085));
    border: 1px solid var(--cs-border, rgba(221, 239, 241, 0.16));
    border-radius: 20px;
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
}

.cs-plugin-card--glass:hover {
    background: color-mix(in srgb, var(--cs-glass-strong, rgba(245, 245, 240, 0.085)) 100%, rgba(245, 245, 240, 0.03));
    border-color: color-mix(in srgb, var(--plugin-accent, var(--cs-green)) 40%, var(--cs-border-strong));
}

/* ============== responsive / reduced motion ============== */

@media (max-width: 900px) {
    .cs-orbit {
        --orbit-card-w: clamp(170px, 44vw, 240px);
        perspective: 900px;
    }
    .cs-orbit__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    /* JS stops the auto spin; arrows jump without tween. Nothing to hide —
       the ring is fully readable when static. */
    .cs-orbit__nav { transition: none; }
}