/* NRKGO Animation System - Reusable Premium Styles */

/* 1. Core Reveal Animations */
.scroll-reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-left {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-scale {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Keyframes for Hero Sections */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.animate-fadeInUp { animation: fadeInUp 0.8s ease-out forwards; }
.animate-fadeIn { animation: fadeIn 1s ease-out forwards; }
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }

/* 3. Inverted Cursor Interaction */
#inverted-cursor {
    pointer-events: none;
    z-index: 9999;
}

.mix-blend-mode-difference {
    mix-blend-mode: difference;
}

/* 4. Glow Path & Dots (Infrastructure Theme) */
.hero-glow-path {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%);
}

.bg-dot-pattern {
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
    background-size: 32px 32px;
}