/*
 Theme Name:   Kinnaird Theme
 Theme URI:    http://kinnairdsports.com/Kinnaird_Theme
 Description:  Customised Theme
 Author:       Joe Roberts
 Author URI:   http://kinnairdsports.com
 Template:     saaslauncher
 Version:      1.0.0
*/

/* ==================================
   ANIMATED NOISE BACKGROUND
   ================================== */

/* Base dark background setup */
body {
    background-color: #000;
    position: relative;
}

/* Dark background layer */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    z-index: -10;
    pointer-events: none;
}

/* Animated noise texture layer */
body::after {
    content: "";
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    opacity: 0.03;
    animation: grain 8s steps(10) infinite;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(255, 255, 255, .1) 1px, rgba(255, 255, 255, .1) 2px),
        repeating-linear-gradient(-45deg, transparent, transparent 1px, rgba(255, 255, 255, .05) 1px, rgba(255, 255, 255, .05) 2px);
    background-size: 3px 3px;
    z-index: -9;
    pointer-events: none;
}

/* Green pulse overlay */
.site-container::before,
#page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 255, 0, 0.02) 50%, transparent 100%);
    animation: pulse 4s ease-in-out infinite;
    z-index: -8;
    pointer-events: none;
}

/* Moving green accent elements */
.green-accent {
    position: fixed;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 255, 0, 0.03) 0%, transparent 70%);
    filter: blur(50px);
    animation: float 20s ease-in-out infinite;
    z-index: -7;
    pointer-events: none;
}

.green-accent-1 {
    top: -300px;
    left: -300px;
    animation-delay: 0s;
}

.green-accent-2 {
    bottom: -300px;
    right: -300px;
    animation-delay: 10s;
}

/* Keyframe Animations */
@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(-10%, 5%); }
    30% { transform: translate(5%, -10%); }
    40% { transform: translate(-5%, 15%); }
    50% { transform: translate(-10%, 5%); }
    60% { transform: translate(15%, 0); }
    70% { transform: translate(0, 10%); }
    80% { transform: translate(-15%, 0); }
    90% { transform: translate(10%, 5%); }
}

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

@keyframes float {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(200px, 100px);
    }
    50% {
        transform: translate(-100px, 200px);
    }
    75% {
        transform: translate(100px, -100px);
    }
}

/* Ensure content stays above background */
.site-content,
.entry-content,
.site-header,
.site-footer,
.elementor-section,
.elementor-widget-wrap,
main,
header,
footer {
    position: relative;
    z-index: 1;
}

/* Fix for transparent header if your theme has one */
.transparent-header,
.site-header.transparent {
    background: transparent !important;
}

/* Mobile optimization - reduce animation complexity */
@media (max-width: 768px) {
    body::after {
        animation-duration: 12s;
        opacity: 0.02;
    }
    
    .green-accent {
        display: none; /* Hide floating elements on mobile for performance */
    }
    
    .site-container::before,
    #page::before {
        animation: none;
        opacity: 0.7;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    body::after,
    .site-container::before,
    #page::before,
    .green-accent {
        animation: none;
    }
}

/* ==================================
   YOUR EXISTING CUSTOM STYLES
   ================================== */

/* Add your other custom styles below this line */