/* V.K. Enterprises - Ultra-Premium Viewport Stylesheet */

@layer utilities {
    /* Cyber Grid Background Pattern */
    .cyber-grid {
        background-image: 
            linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 40px 40px;
        mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
        -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    }

    /* Gradient Border Card */
    .gradient-border-card {
        position: relative;
        background: rgba(7, 15, 38, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 
            0 25px 50px -12px rgba(2, 6, 23, 0.9),
            0 0 30px rgba(6, 182, 212, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
}

/* Neon Glow Accents */
.glow-badge {
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.2), inset 0 0 10px rgba(6, 182, 212, 0.15);
}

/* Animated Dots Keyframes */
.animated-dots::after {
    content: '';
    display: inline-block;
    animation: dotSequence 2s infinite steps(4);
}

@keyframes dotSequence {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* Ripple Button Effect */
.ripple-btn {
    position: relative;
    overflow: hidden;
}

.ripple-span {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: rippleAnim 600ms linear;
    background-color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Subtle Floating Animation for Card */
.floating-card-subtle {
    animation: floatSubtle 6s ease-in-out infinite;
}

@keyframes floatSubtle {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Hero Staggered initial state */
.hero-fade-item {
    opacity: 0;
    transform: translateY(18px);
}

/* Hide scrollbars completely for absolute single-viewport feel */
html, body {
    overflow: hidden !important;
    height: 100vh;
    height: 100dvh;
    touch-action: none;
}