/* ==========================================================================
   Features Spotlight: Fullscreen Scrolljacking Showcase
   Theme: Pure Dark (#030712) with Signature Electric Blue (#0051ff) Accents
   ========================================================================== */

/* Navbar Hide Transition when inside spotlight */
#navbar.navbar-hidden-by-spotlight,
.navbar-main.navbar-hidden-by-spotlight,
.navbar-main.fixed.navbar-hidden-by-spotlight {
    animation: none !important;
    transform: translate(-50%, -150%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
}

.spotlight-scroll-section {
    position: relative;
    background: #000000 !important;
    color: #ffffff;
    --spotlight-blue: #0051ff;
    --spotlight-blue-rgb: 0, 81, 255;
    border: none !important;
    overflow-x: clip;
    overflow-y: visible;
}

/* Interactive Particle Canvas (Only active around mouse) */
.spotlight-particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Fullscreen Pinned Sticky Stage */
@media (min-width: 992px) {
    .spotlight-sticky-stage {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        overflow: hidden;
        padding: 2rem 0;
    }
}

@media (max-width: 991px) {
    .spotlight-sticky-stage {
        position: relative;
        padding: 4rem 0 3rem 0;
    }
}

/* Slides Presentation Canvas */
.spotlight-slides-viewport {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 520px;
    z-index: 15;
}

@media (min-width: 992px) {
    .spotlight-row-reverse {
        flex-direction: row-reverse !important;
    }

    .spotlight-slide {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        opacity: 0;
        transform: translate3d(0, 100px, 0);
        pointer-events: none;
        visibility: hidden;
        transition: none !important;
        will-change: transform, opacity;
    }
}

@media (max-width: 991px) {
    .spotlight-scroll-section {
        height: auto !important;
    }
    .spotlight-sticky-stage {
        position: relative;
        padding: 3rem 0;
        height: auto !important;
    }
    .spotlight-slides-viewport {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        min-height: auto;
    }
    .spotlight-slide {
        position: relative !important;
        inset: auto !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* 3D Showcase Graphic Frame */
.spotlight-3d-stage {
    position: relative;
    perspective: 1200px;
    transform-style: preserve-3d;
    display: inline-block;
    max-width: 100%;
}

.spotlight-3d-frame {
    position: relative;
    border-radius: 2rem;
    overflow: hidden;
    background: #0b0f19;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    box-shadow: 
        0 25px 65px -15px rgba(0, 0, 0, 0.85),
        0 0 45px rgba(0, 81, 255, 0.18);
    transform: rotateY(-6deg) rotateX(4deg) translateZ(10px);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}

/* Left-aligned 3D Stage (tilts towards right/text) */
.spotlight-3d-stage-left .spotlight-3d-frame {
    transform: rotateY(6deg) rotateX(4deg) translateZ(10px);
}
.spotlight-3d-stage-left:hover .spotlight-3d-frame {
    transform: rotateY(2deg) rotateX(2deg) translateZ(20px) scale(1.02);
}

/* Right-aligned 3D Stage (tilts towards left/text) */
.spotlight-3d-stage-right .spotlight-3d-frame {
    transform: rotateY(-6deg) rotateX(4deg) translateZ(10px);
}
.spotlight-3d-stage-right:hover .spotlight-3d-frame {
    transform: rotateY(-2deg) rotateX(2deg) translateZ(20px) scale(1.02);
}

.spotlight-3d-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 60%);
    pointer-events: none;
    z-index: 2;
}

.spotlight-3d-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2rem;
    transform-origin: center center;
    transition: transform 0.6s ease;
}

/* Floating 3D Metric Badge */
.spotlight-floating-badge {
    position: absolute;
    bottom: -15px;
    padding: 0.85rem 1.25rem;
    border-radius: 1.25rem;
    background: rgba(11, 15, 25, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 81, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 0.9rem;
    z-index: 10;
    transform: translateZ(50px);
    animation: spotlight-badge-float 4s ease-in-out infinite alternate;
}

.spotlight-floating-badge-left {
    left: -20px;
    right: auto;
}

.spotlight-floating-badge-right {
    right: -20px;
    left: auto;
}

/* Parallax Scrubbed Columns */
.spotlight-col-text,
.spotlight-col-img {
    will-change: transform;
    transition: none !important;
}

@keyframes spotlight-badge-float {
    0% { transform: translateZ(50px) translateY(0px); }
    100% { transform: translateZ(50px) translateY(-8px); }
}

/* Feature Badge Pill (#0051ff Accent) */
.spotlight-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(0, 81, 255, 0.12);
    border: 1px solid rgba(0, 81, 255, 0.35);
    color: #60a5fa;
    margin-bottom: 1.25rem;
}

/* Primary CTA Button (#0051ff Glow) */
.spotlight-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.75rem;
    border-radius: 1rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: #ffffff !important;
    background: #0051ff;
    box-shadow: 0 10px 25px -4px rgba(0, 81, 255, 0.5), 0 0 15px rgba(0, 81, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.spotlight-btn-primary:hover {
    background: #0045db;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 14px 30px -4px rgba(0, 81, 255, 0.6), 0 0 25px rgba(0, 81, 255, 0.45);
}