#results {
    position: relative;
    z-index: 10;
    padding: 6rem 0;
    overflow: hidden;
}

.results-badge,
.results-heading,
.results-subtext {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.results-badge {
    transition-delay: 0ms;
}
.results-heading {
    transition-delay: 100ms;
}
.results-subtext {
    transition-delay: 220ms;
}

#results.in-view .results-badge,
#results.in-view .results-heading,
#results.in-view .results-subtext {
    opacity: 1;
    transform: translateY(0);
}

.video-grid {
    align-items: end;
}

.video-reveal-card {
    opacity: 0;
    transform: translateX(var(--from-x, 0px)) translateY(50px) rotate(var(--from-rotate, 0deg))
        scale(0.9);
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

#results.in-view .video-reveal-card {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
}

#results.in-view .video-card-center {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
}

.video-card-inner {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s ease;
    cursor: default;
}
.video-card-inner:hover {
    transform: translateY(-8px);
    box-shadow:
        0 0 50px rgba(59, 130, 246, 0.25),
        0 24px 48px rgba(0, 0, 0, 0.55);
}

.video-card-inner.video-card-featured {
    box-shadow:
        0 0 40px rgba(59, 130, 246, 0.18),
        0 16px 40px rgba(0, 0, 0, 0.5);
}
.video-card-inner.video-card-featured:hover {
    box-shadow:
        0 0 80px rgba(45, 212, 191, 0.3),
        0 32px 64px rgba(0, 0, 0, 0.65);
}

.video-card-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    opacity: 0;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.12);
    transition:
        opacity 0.6s ease,
        box-shadow 0.6s ease;
}
#results.in-view .video-card-glow {
    opacity: 1;
}

.video-card-glow.featured-glow {
    box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.25);
    animation: featured-pulse 3s ease-in-out infinite;
}
@keyframes featured-pulse {
    0%,
    100% {
        box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.2);
    }
    50% {
        box-shadow:
            inset 0 0 0 1px rgba(45, 212, 191, 0.55),
            0 0 60px rgba(45, 212, 191, 0.1);
    }
}

.video-card-scanline {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.video-card-scanline::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 40%,
        rgba(59, 130, 246, 0.09) 50%,
        transparent 60%
    );
    animation: scanline-sweep 1.6s linear;
    animation-fill-mode: forwards;
}

.video-reveal-card.scanning .video-card-scanline {
    opacity: 1;
}

@keyframes scanline-sweep {
    0% {
        top: -100%;
    }
    100% {
        top: 120%;
    }
}

.video-card-label {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(96, 165, 250, 0.85);
    background: rgba(2, 6, 23, 0.82);
    border: 1px solid rgba(96, 165, 250, 0.2);
    padding: 5px 14px;
    border-radius: 100px;
    backdrop-filter: blur(12px);
    white-space: nowrap;
    opacity: 0;
    transition:
        opacity 0.4s ease var(--delay, 0ms),
        transform 0.4s ease var(--delay, 0ms);
}
.video-card-label .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(96, 165, 250, 0.8);
    flex-shrink: 0;
}
.video-card-label .dot.dot-cyan {
    background: rgba(45, 212, 191, 0.9);
    box-shadow: 0 0 6px rgba(45, 212, 191, 0.6);
}

.featured-label {
    color: rgba(45, 212, 191, 0.9);
    border-color: rgba(45, 212, 191, 0.3);
}

#results.in-view .video-card-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.video-card-inner video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 400px;
    opacity: 0.8;
    transition: opacity 0.4s ease;
    position: relative;
    z-index: 1;
}
.video-card-inner:hover video {
    opacity: 1;
}

@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    #results.in-view .video-card-center {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    }
    .video-card-inner video {
        min-height: 340px;
    }
}

.video-card:nth-child(2) {
    transform: none !important;
    scale: 1 !important;
}
.video-card:nth-child(2) .video-inner {
    transform: none !important;
}