/**
 * Comet Sound — 3D plugin card cinematic stage.
 *
 * One pinned stage, one canvas inside it. Card lives on the RIGHT for the whole
 * walkthrough; the plugin name + parameter copy live on the LEFT (over the dark
 * side of the background, so text stays readable with only a light shadow).
 * The final CTA flips: card left, copy right.
 *
 * Progressive enhancement: body.is-card3d (desktop + WebGL + GLB) reveals the
 * stage and hides the external hero + the 2D `.cs-pscene` fallback.
 */

/* ============== fallback / off state ============== */

.cs-card3d-stage { display: none; }

body.is-card3d .cs-pscene,
body.is-card3d .cs-page-hero--card3d { display: none; }

body.is-card3d .cs-card3d-stage { display: block; }

/* ============== stage layout (pinned) ============== */

.cs-card3d-stage {
    position: relative;
    width: 100%;
    height: 700vh; /* overridden by JS based on keyframe count */
    /* Accent glow sits on the RIGHT (behind the card); the left text column
       stays dark for readability. */
    background:
        radial-gradient(60% 60% at 78% 42%, color-mix(in srgb, var(--plugin-accent, var(--cs-green)) 16%, transparent) 0%, transparent 62%),
        radial-gradient(50% 45% at 90% 80%, color-mix(in srgb, var(--plugin-accent, var(--cs-green)) 9%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, #070d0b 0%, #050706 60%);
    isolation: isolate;
}

.cs-card3d-stage__inner {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Keep the left third a touch darker so copy is always legible. */
/* (Removed the left-darkening overlay: the parameter boxes now provide text
   contrast, and the overlay was being exposed as a dark band on the side the
   canvas translated away from — e.g. Output's left edge.) */

/* ============== webgl canvas ============== */

.cs-card3d-canvas {
    position: absolute;
    /* Overscan: the canvas is wider/taller than the viewport so the CSS
       translate that slides it left/right (max ~21% at the hero) never drags
       a canvas edge into view — no cut GUI, no dark band on the far side.
       The JS compensates the render size + FOV so the framing is unchanged. */
    top: -4%;
    left: -22%;
    width: 144%;
    height: 108%;
    display: block;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.45s ease;
    will-change: transform, opacity;
}

body.is-card3d .cs-card3d-canvas { opacity: 1; }

/* ============== shared left text column ============== */

.cs-card3d-hero,
.cs-card3d-steps {
    position: absolute;
    inset: 0;
    padding: clamp(28px, 5vw, 80px);
    pointer-events: none;
    z-index: 3;
    display: grid;
    align-content: center;
    /* Text occupies the left ~46%; the card breathes on the right. */
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
}

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

.cs-card3d-hero {
    opacity: 1;
    will-change: transform, opacity;
    /* Left inset of the copy == right margin of the hero card, so the side
       bands read equal. The card's right margin is geometry-derived:
       29vw (viewport half + 21% canvas slide) minus 44vh (projected card
       half-width, which scales with viewport height). */
    padding-left: clamp(32px, calc(29vw - 44vh), 160px);
}

.cs-card3d-hero > * { grid-column: 1; max-width: 14ch; }

.cs-card3d-hero__eyebrow {
    margin: 0 0 14px;
    font-family: var(--cs-mono, ui-monospace, monospace);
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--plugin-accent, var(--cs-green));
}

.cs-card3d-hero__title {
    margin: 0 0 18px;
    font-size: clamp(2.6rem, 5.2vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.015em;
    color: var(--cs-text);
    text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}

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

.cs-card3d-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
    pointer-events: auto;
}

/* ============== parameter steps (stacked, fade, all on the left) ============== */

.cs-card3d-step {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    max-width: 34ch;
    margin: 0;
    color: var(--cs-text);
    opacity: 0;
    visibility: hidden;
    transform: translateY(22px);
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0.5s;
}

.cs-card3d-step.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* When the card travels to the LEFT (e.g. Path), put its copy on the RIGHT. */
.cs-card3d-step[data-index="2"] {
    grid-column: 2;
    justify-self: end;
    text-align: left;
}

/* Light glass box behind Overview + the three parameters, for readability over
   the moving GUI. The box hugs its content (fit-content) and never overflows the
   viewport sides; long titles (Phoenix/EimosEq) wrap inside it. CTA stays open. */
.cs-card3d-step[data-index="0"],
.cs-card3d-step[data-index="1"],
.cs-card3d-step[data-index="2"],
.cs-card3d-step[data-index="3"] {
    width: fit-content;
    max-width: min(40ch, 40vw);
    padding: clamp(20px, 2vw, 30px) clamp(22px, 2.2vw, 34px);
    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);
}

/* Inside a box: no heavy shadow (the box gives contrast), title sized to fit,
   text wraps and fills the box. */
.cs-card3d-step[data-index="0"] .cs-card3d-step__title,
.cs-card3d-step[data-index="1"] .cs-card3d-step__title,
.cs-card3d-step[data-index="2"] .cs-card3d-step__title,
.cs-card3d-step[data-index="3"] .cs-card3d-step__title {
    text-shadow: none;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    max-width: 100%;
    overflow-wrap: break-word;
}
.cs-card3d-step[data-index="0"] .cs-card3d-step__copy,
.cs-card3d-step[data-index="1"] .cs-card3d-step__copy,
.cs-card3d-step[data-index="2"] .cs-card3d-step__copy,
.cs-card3d-step[data-index="3"] .cs-card3d-step__copy {
    text-shadow: none;
    max-width: 100%;
    color: var(--cs-text-cold, #DDEFF1);
}

.cs-card3d-step__num {
    display: inline-block;
    font-family: var(--cs-mono, ui-monospace, monospace);
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--plugin-accent, var(--cs-green));
    margin-bottom: 8px;
}

.cs-card3d-step__title {
    margin: 0 0 12px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--cs-text);
    text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}

.cs-card3d-step__copy {
    margin: 0;
    font-size: clamp(1rem, 1.05vw, 1.12rem);
    line-height: 1.55;
    color: var(--cs-muted);
    max-width: 34ch;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* ============== CTA pose: card left, copy on the right ============== */

.cs-card3d-step--cta {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    margin: 0;
    /* Right inset of the copy == left margin of the CTA card, so the side
       bands read equal (mirror of the hero). Card left edge is geometry-
       derived: 32vw (viewport half − 18% canvas slide) − 41vh (projected
       card half-width). Subtract the steps grid padding to get the margin. */
    margin-right: max(24px, calc(32vw - 41vh - clamp(28px, 5vw, 80px)));
    /* min-content = the widest word of the title ("Compressor"), so the box
       right edge matches the text ink — long words no longer overflow past
       the margin. Line breaks stay as before (one word per line). */
    width: min-content;
    max-width: none;
    color: var(--cs-text);
    opacity: 0;
    visibility: hidden;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0.6s;
    display: block;
}

.cs-card3d-step--cta.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.cs-card3d-cta__eyebrow {
    display: inline-block;
    font-family: var(--cs-mono, ui-monospace, monospace);
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--plugin-accent, var(--cs-green));
    margin-bottom: 10px;
}

.cs-card3d-cta__title {
    margin: 0 0 14px;
    font-size: clamp(2.2rem, 4.6vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: var(--cs-text);
    text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}

.cs-card3d-cta__copy {
    margin: 0 0 22px;
    font-size: clamp(1rem, 1.1vw, 1.15rem);
    line-height: 1.55;
    color: var(--cs-muted);
    max-width: 36ch;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

.cs-card3d-cta__actions {
    display: flex;
    /* No wrap: with the min-content CTA box, wrapping would stack the two
       buttons vertically on short titles (e.g. "Get Aura"). The row also
       sets the box's minimum width so the buttons always sit side by side. */
    flex-wrap: nowrap;
    gap: 12px;
    pointer-events: auto;
}

/* Button labels stay on one line; with the min-content CTA box they would
   otherwise wrap internally on short titles ("BACK TO / BUNDLE"). */
.cs-card3d-cta__actions .cs-btn {
    white-space: nowrap;
}

/* ============== progress dots (left rail, clear of the card) ============== */

.cs-card3d-dots {
    position: absolute;
    left: clamp(14px, 1.8vw, 26px);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 10px 6px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cs-card3d-dots.is-active { opacity: 1; }

.cs-card3d-dot {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid var(--cs-border);
    color: var(--cs-muted-deep);
    font-family: var(--cs-mono, ui-monospace, monospace);
    font-size: 0.64rem;
    display: grid;
    place-items: center;
    background: rgba(5, 7, 6, 0.5);
    transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.cs-card3d-dot.is-active {
    color: var(--cs-ink);
    border-color: var(--plugin-accent, var(--cs-green));
    background: var(--plugin-accent, var(--cs-green));
    transform: scale(1.1);
}

/* ============== responsive / fallback ============== */

@media (max-width: 900px) {
    .cs-card3d-stage, .cs-card3d-canvas { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-card3d-stage, .cs-card3d-canvas { display: none !important; }
}