/* ==========================================================================
 * DSTAIR — Landing Page
 * Full-screen hero with Three.js canvas background, gradient overlays,
 * and section-specific backgrounds.
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * § 1. 3D CANVAS BACKGROUND
 * -------------------------------------------------------------------------- */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-background);
    background: radial-gradient(ellipse at center,
            rgba(26, 58, 110, 0.6) 0%,
            var(--color-dark) 80%);
}

/* Gradient overlay for text readability against 3D scene */
.overlay-gradient {
    background: linear-gradient(to top,
            var(--color-dark) 0%,
            transparent 40%,
            transparent 60%,
            var(--color-dark) 100%);
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Hide decorative background globes on the landing page
   (Three.js scene replaces them) */
.background-globes {
    display: none;
}


/* --------------------------------------------------------------------------
 * § 2. SECTION BACKGROUNDS
 * -------------------------------------------------------------------------- */
.bg-deep-navy {
    background: var(--color-surface);
    background-image:
        radial-gradient(circle at 15% 50%, rgba(var(--color-primary-rgb), 0.08) 0%, transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(var(--color-highlight-rgb), 0.05) 0%, transparent 20%);
}

.bg-dark-void {
    background: var(--color-void);
    background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
}


/* --------------------------------------------------------------------------
 * § 3. HERO TYPOGRAPHY
 * -------------------------------------------------------------------------- */

/* Title highlight chip */
.title-highlight {
    background-color: var(--color-highlight);
    color: var(--color-dark);
    /* padding: 0.1em 0.5em; */
    font-weight: 800;
    display: inline-block;
    /* line-height: 1.2; */
}

/* Hero CTA */
.btn-run-analysis {
    background: linear-gradient(135deg, var(--color-accent) 0%, #d69f41 100%);
    transition: all var(--transition-base);
    box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), 0.3);
}

.btn-run-analysis:hover {
    box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), 0.5);
    transform: translateY(-2px);
}