/* =============================================================================
   Capabilities Block — Frontend Stylesheet
   1-1 conversion of Capabilities.tsx (Tailwind → plain CSS)
   ============================================================================= */

/* --------------------------------------------------------------------------
   Section wrapper
   py-20 md:py-32 bg-[#050505] text-white overflow-hidden relative
   -------------------------------------------------------------------------- */
.capabilities-block {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #050505;
    color: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Background Marquee — absolute top-10 w-full opacity-5 pointer-events-none
   font-display text-[15vw] font-bold uppercase leading-none
   animate x 0%→-50% 20s linear infinite
   -------------------------------------------------------------------------- */
.capabilities-marquee-bg {
    position: absolute;
    top: 2.5rem;
    left: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0.05;
    pointer-events: none;
}

.capabilities-marquee-bg__track {
    display: inline-block;
    font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
    font-size: 15vw;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    animation: cap-marquee 40s linear infinite;
    /* Duplicate content in render.php ensures seamless loop */
}

@keyframes cap-marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* --------------------------------------------------------------------------
   Inner container — max-w-7xl mx-auto px-6 relative z-10
   -------------------------------------------------------------------------- */
.capabilities-container {
    position: relative;
    z-index: 10;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* --------------------------------------------------------------------------
   Section header — mb-12 md:mb-20
   -------------------------------------------------------------------------- */
.capabilities-header {
    margin-bottom: 3rem;
}

/* font-display text-4xl md:text-5xl font-bold tracking-tight mb-4 */
.capabilities-heading {
    font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(2.25rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 1rem 0;
    color: #ffffff;
}

/* text-white/50 max-w-xl */
.capabilities-subheading {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.50);
    max-width: 36rem;
    margin: 0;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Cards grid — grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6
   -------------------------------------------------------------------------- */
.capabilities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* --------------------------------------------------------------------------
   Individual card
   group relative p-8 rounded-2xl border border-white/10 bg-white/5
   hover:bg-[#FF4E00] transition-colors duration-500 overflow-hidden
   -------------------------------------------------------------------------- */
.capabilities-card {
    position: relative;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.5s ease;

    /* whileInView entry animation — initial state */
    opacity: 0;
    transform: translateY(20px);
}

/* Class added by JS when card enters viewport */
.capabilities-card.is-visible {
    opacity: 1;
    transform: translateY(0);
    /* Transition respects the CSS custom property --card-delay */
    transition:
        opacity 0.5s ease var(--card-delay, 0s),
        transform 0.5s ease var(--card-delay, 0s),
        background-color 0.5s ease;
}

/* hover:bg-[#FF4E00] */
.capabilities-card:hover {
    background-color: #FF4E00;
}

/* --------------------------------------------------------------------------
   Card inner content — relative z-10
   -------------------------------------------------------------------------- */
.capabilities-card__inner {
    position: relative;
    z-index: 10;
}

/* Icon — w-10 h-10 mb-6 text-white/50  group-hover:text-white */
.capabilities-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.50);
    transition: color 0.5s ease;
}

.capabilities-card:hover .capabilities-card__icon {
    color: #ffffff;
}

.capabilities-card__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Title — font-display text-2xl font-bold mb-3 */
.capabilities-card__title {
    font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: #ffffff;
}

/* Desc — text-white/60 text-sm leading-relaxed  group-hover:text-white/90 */
.capabilities-card__desc {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.60);
    font-size: 0.875rem;
    line-height: 1.75;
    margin: 0;
    transition: color 0.5s ease;
}

.capabilities-card:hover .capabilities-card__desc {
    color: rgba(255, 255, 255, 0.90);
}

/* --------------------------------------------------------------------------
   Decorative glow blob — absolute -bottom-10 -right-10 w-40 h-40
   bg-white/10 rounded-full blur-2xl opacity-0 group-hover:opacity-100
   -------------------------------------------------------------------------- */
.capabilities-card__glow {
    position: absolute;
    bottom: -2.5rem;
    right: -2.5rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 9999px;
    filter: blur(40px);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.capabilities-card:hover .capabilities-card__glow {
    opacity: 1;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (min-width: 48rem) {
    .capabilities-block {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    .capabilities-header {
        margin-bottom: 5rem;
    }

    .capabilities-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 64rem) {
    .capabilities-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}