/**
 * Comet Sound — Comet AI hero: interactive particle star.
 *
 * The canvas layers behind the centered hero copy; comet-ai-hero.js adds
 * body.is-ai-star when the point cloud is live (desktop + WebGL + no
 * reduced-motion). Without it the hero is simply a clean centered intro.
 */

.cs-page-hero--ai {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    min-height: min(92vh, 980px);
    max-width: none;
    overflow: hidden;
    background:
        radial-gradient(46% 42% at 50% 44%, color-mix(in srgb, var(--cs-green) 8%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, #070d0b 0%, var(--cs-ink, #050706) 66%);
}

/* Copy only — the canvas must keep its full-bleed absolute box. */
.cs-page-hero--ai > :not(.cs-ai-hero__canvas) {
    position: relative;
    z-index: 2;
    max-width: 62ch;
    margin-inline: var(--cs-gutter);
}

/* Hero = star + one big title, nothing else. */
.cs-ai-hero__title {
    margin: 0;
    font-size: clamp(3rem, 6.5vw, 6.4rem);
    line-height: 1.0;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 26px rgba(5, 7, 6, 0.85);
}

/* Scroll affordance under the title (glass pill, Lenis smooth-scrolls it). */
.cs-ai-hero__cta {
    margin-top: clamp(1.6rem, 3vw, 2.6rem);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(5, 7, 6, 0.35);
}

/* The former hero copy now opens the scroll well below the fold, so the
   page has real travel between the star and the content. */
.cs-ai-intro {
    padding-top: clamp(7rem, 13vw, 12rem);
}

.cs-ai-intro .cs-page-hero__lead {
    max-width: 62ch;
}

.cs-ai-hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
    opacity: 0;
    transition: opacity 1.1s ease;
    /* The hero copy stays selectable; the canvas listens on the hero itself. */
    pointer-events: none;
}

body.is-ai-star .cs-ai-hero__canvas { opacity: 1; }