/* =========================================
   Hero Spotlight & Scramble Effect
   ========================================= */

/* Darkness Layer */
.hero-spotlight-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* Deep Darkness */
    z-index: 1;
    pointer-events: none;
    /* Let mouse pass through to text */
    /* JS will apply mask-image here */
    transition: background 0.5s ease;
}

/* Ensure Content is Above Darkness */
.hero-content {
    position: relative;
    z-index: 2;
    /* Higher than spotlight overlay */
}

/* Scramble Text Initial State */
#scramble-text span.text-orange {
    display: inline-block;
}

/* Make sure buttons are clickable */
.hero-cta-group {
    position: relative;
    z-index: 3;
}