/* ============================================================
   CINEMATIC FEATURE CARD v6 - GSAP scroll reveal, no flip
   ============================================================ */

.cinematic-feature-section {
    isolation: isolate;
    padding-top: 110px !important;
    padding-bottom: 120px !important;
}

.cinematic-feature-section::before {
    content: '';
    position: absolute;
    inset: 48px -8vw 30px;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 24%, rgba(0, 242, 255, 0.14), transparent 30%),
        radial-gradient(circle at 78% 72%, rgba(204, 93, 232, 0.12), transparent 28%),
        linear-gradient(180deg, transparent, rgba(0, 242, 255, 0.025), transparent);
    opacity: 0.9;
}

.feature-orbit {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border: 1px dashed rgba(0, 242, 255, 0.14);
    border-radius: 50%;
    opacity: 0.55;
    filter: drop-shadow(0 0 18px rgba(0, 242, 255, 0.16));
    animation: featureOrbitSpin 34s linear infinite;
}

.feature-orbit::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    top: 12%;
    left: 50%;
    border-radius: 50%;
    background: #00f2ff;
    box-shadow: 0 0 18px rgba(0, 242, 255, 0.9);
}

.feature-orbit-left {
    width: 320px;
    height: 320px;
    left: -130px;
    top: 70px;
}

.feature-orbit-right {
    width: 440px;
    height: 440px;
    right: -170px;
    bottom: 26px;
    animation-duration: 46s;
    animation-direction: reverse;
}

@keyframes featureOrbitSpin {
    to { transform: rotate(360deg); }
}

.cinematic-feature-section .landing-feature-card-wrapper {
    height: 360px !important;
    margin-bottom: 0;
    perspective: 1400px;
    cursor: default;
    opacity: 1;
    visibility: visible;
}

.cinematic-feature-section .landing-feature-card-inner {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease !important;
}

.cinematic-feature-section .landing-feature-card-wrapper:hover .landing-feature-card-inner {
    transform: translate3d(0, -8px, 0) rotateX(2deg) !important;
    filter: drop-shadow(0 22px 38px rgba(0, 242, 255, 0.08));
}

.cinematic-feature-section .landing-feature-card-front {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: 100%;
    padding: 30px !important;
    border-radius: 20px !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(9, 28, 52, 0.95), rgba(4, 13, 26, 0.92)),
        radial-gradient(circle at top left, rgba(0, 242, 255, 0.12), transparent 38%) !important;
    border: 1px solid rgba(0, 242, 255, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 42px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: none !important;
    backface-visibility: visible !important;
}

.cinematic-feature-section .landing-feature-card-front::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0, 242, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 255, 0.035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 76%);
}

.cinematic-feature-section .landing-feature-card-wrapper:hover .landing-feature-card-front {
    border-color: rgba(0, 242, 255, 0.42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 26px 54px rgba(0, 0, 0, 0.38), 0 0 34px rgba(0, 242, 255, 0.09);
}

.feature-card-scan {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    z-index: 4;
    width: 42%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.18), rgba(255, 255, 255, 0.18), transparent);
    transform: skewX(-16deg);
    mix-blend-mode: screen;
}

.feature-card-index {
    position: absolute;
    top: 24px;
    right: 26px;
    color: rgba(0, 242, 255, 0.22);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.cinematic-feature-section .landing-feature-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 16px !important;
    margin-bottom: 22px !important;
    box-shadow: 0 0 0 rgba(0, 242, 255, 0);
}

.cinematic-feature-section .landing-feature-card-wrapper:hover .landing-feature-icon {
    box-shadow: 0 0 24px rgba(0, 242, 255, 0.18);
}

.cinematic-feature-section .landing-feature-title {
    font-size: 1.25rem !important;
    line-height: 1.32;
    margin-bottom: 12px !important;
}

.cinematic-feature-section .landing-feature-desc {
    font-size: 0.92rem !important;
    line-height: 1.62 !important;
    color: #93a4c2 !important;
}

.feature-signal-line {
    width: 100%;
    height: 1px;
    margin: auto 0 16px;
    background: linear-gradient(90deg, rgba(0, 242, 255, 0.76), rgba(79, 172, 254, 0.18), transparent);
    box-shadow: 0 0 16px rgba(0, 242, 255, 0.3);
}

.cinematic-feature-section .landing-feature-long-desc {
    max-height: 6.2em;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    overflow: hidden;
    color: #b8c7de !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
}

@media (max-width: 991px) {
    .cinematic-feature-section .landing-feature-card-wrapper {
        height: 330px !important;
    }
}

@media (max-width: 576px) {
    .cinematic-feature-section {
        padding-top: 76px !important;
        padding-bottom: 84px !important;
    }

    .cinematic-feature-section .landing-feature-card-wrapper {
        height: auto !important;
        min-height: 318px;
    }

    .feature-orbit {
        display: none;
    }
}