@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/ds-digital');

body {
    font-family: 'Poppins', sans-serif;
    background-image: url('https://image2url.com/r2/bucket2/images/1767722502315-ffb1c56a-c89c-4995-ba52-716a2a91cfb0.blob');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #000000; /* Fallback to black to prevent white space */
    color: #ffffff; /* Default text color */
    overflow-x: hidden; /* Prevent horizontal scroll from marquee */
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
    min-height: 100vh; /* Ensure full height */
}

html {
    background-color: #000000; /* Ensure html background is black */
    margin: 0;
    padding: 0;
}

/* Cross-browser Reset/Safety */
a {
    text-decoration: none !important;
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

/* Custom Scrollbar for Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a; 
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    border-radius: 5px;
    border: 2px solid #1a1a1a;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); 
}

/* Firefox Scrollbar */
* {
    /* scrollbar-width: thin; */
    /* scrollbar-color: #0000ff #1a1a1a; Removed to allow Webkit RGB gradient to show on supported browsers */
}

/* Hide Scrollbar Utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Animation Keyframes for RGB Cycle */
@keyframes rgb-border {
    0% { border-color: #ff0000; box-shadow: 0 0 5px #ff0000; }
    15% { border-color: #ffff00; box-shadow: 0 0 5px #ffff00; }
    30% { border-color: #00ff00; box-shadow: 0 0 5px #00ff00; }
    45% { border-color: #00ffff; box-shadow: 0 0 5px #00ffff; }
    60% { border-color: #0000ff; box-shadow: 0 0 5px #0000ff; }
    75% { border-color: #ff00ff; box-shadow: 0 0 5px #ff00ff; }
    100% { border-color: #ff0000; box-shadow: 0 0 5px #ff0000; }
}

/* Class to apply the animation */
.rgb-border-animate {
    position: relative;
    /* border: 2px solid transparent; Removed to use overlay border instead */
    /* border-radius: 0.75rem; Removed to allow inheriting from utility classes */
    z-index: 1; /* Ensure proper stacking context */
}

/* Pseudo-element for RGB walking border with transparency mask */
.rgb-border-animate::before {
    content: "";
    position: absolute;
    inset: 1px; /* Slight inset to prevent clipping */
    border-radius: inherit; /* Inherit border radius from parent */
    z-index: 50; /* Ensure visibility on top of all content */
    pointer-events: none; /* Allow clicks to pass through to content */
    
    /* Double the spectrum for seamless looping */
    background: linear-gradient(90deg, 
        #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000,
        #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
    );
    background-size: 200% 100%;
    animation: rgb-walk-border 3s linear infinite;
    
    border-radius: inherit; /* Inherit border radius from parent */
    padding: 3px; /* Thickness of the border */
    
    /* Masking logic to keep center transparent */
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    
    /* Standard syntax for Firefox and modern browsers */
    mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

@keyframes rgb-walk-border {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 0%; } /* Moves exactly half the width (one full spectrum) */
}


/* Removed animation here, now handled by child .char-rgb elements */

@keyframes rgb-cycle-glow {
    0% { color: #ff0000 !important; text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 70px #ff0000, 0 0 80px #ff0000, 0 0 100px #ff0000; }
    15% { color: #ffff00 !important; text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 30px #ffff00, 0 0 40px #ffff00, 0 0 70px #ffff00, 0 0 80px #ffff00, 0 0 100px #ffff00; }
    30% { color: #00ff00 !important; text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00, 0 0 70px #00ff00, 0 0 80px #00ff00, 0 0 100px #00ff00; }
    45% { color: #00ffff !important; text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff, 0 0 70px #00ffff, 0 0 80px #00ffff, 0 0 100px #00ffff; }
    60% { color: #0000ff !important; text-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff, 0 0 40px #0000ff, 0 0 70px #0000ff, 0 0 80px #0000ff, 0 0 100px #0000ff; }
    75% { color: #ff00ff !important; text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 40px #ff00ff, 0 0 70px #ff00ff, 0 0 80px #ff00ff, 0 0 100px #ff00ff; }
    100% { color: #ff0000 !important; text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 70px #ff0000, 0 0 80px #ff0000, 0 0 100px #ff0000; }
}

@keyframes rgb-cycle {
    0% { color: #ff0000; text-shadow: 2px 2px 2px #000000; }
    15% { color: #ffff00; text-shadow: 2px 2px 2px #000000; }
    30% { color: #00ff00; text-shadow: 2px 2px 2px #000000; }
    45% { color: #00ffff; text-shadow: 2px 2px 2px #000000; }
    60% { color: #0000ff; text-shadow: 2px 2px 2px #000000; }
    75% { color: #ff00ff; text-shadow: 2px 2px 2px #000000; }
    100% { color: #ff0000; text-shadow: 2px 2px 2px #000000; }
}

/* Apply animation to individual characters */
.rgb-text .char-rgb {
    display: inline-block;
    color: #ff0000; /* Red start, no !important to allow animation override */
    animation: rgb-cycle 3s linear infinite;
    text-shadow: 2px 2px 2px #000000;
    will-change: color, text-shadow;
    transform: translateZ(0); /* Hardware acceleration */
}

/* Apply glow animation only to elements with .glow-effect */
.rgb-text.glow-effect .char-rgb {
    animation: rgb-cycle-glow 3s linear infinite;
}

/* Utility to remove glow if needed explicitly (legacy support) */
.no-glow {
    text-shadow: none !important;
}

/* Override for specific text elements if needed */
h1 .rgb-text, h2 .rgb-text, h3 .rgb-text, p .rgb-text, a .rgb-text {
    /* Ensure no background interference */
    background: none;
}

/* RGB Icon styling */
.rgb-icon {
    animation: rgb-icon-cycle 3s linear infinite;
}

@keyframes rgb-icon-cycle {
    0% { color: #ff0000; filter: drop-shadow(0 0 2px #ff0000); }
    15% { color: #ffff00; filter: drop-shadow(0 0 2px #ffff00); }
    30% { color: #00ff00; filter: drop-shadow(0 0 2px #00ff00); }
    45% { color: #00ffff; filter: drop-shadow(0 0 2px #00ffff); }
    60% { color: #0000ff; filter: drop-shadow(0 0 2px #0000ff); }
    75% { color: #ff00ff; filter: drop-shadow(0 0 2px #ff00ff); }
    100% { color: #ff0000; filter: drop-shadow(0 0 2px #ff0000); }
}


/* Marquee / Running Text Animation */
.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
    will-change: transform;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .marquee-text {
        animation-duration: 10s; /* Faster speed for Mobile */
    }
}

@keyframes marquee {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

.animate-bounce-interval {
    animation: bounce-interval 5s infinite;
}

@keyframes bounce-interval {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(-30px);
    }
    15% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-15px);
    }
    30% {
        transform: translateY(0);
    }
}

/* Digital Font Utility */
.font-digital {
    font-family: 'VT323', monospace;
}

.font-ds-digital {
    font-family: 'DS-Digital', sans-serif;
}

/* Copyright Symbol Adjustment */
.copyright-symbol {
    display: inline-block;
    font-family: sans-serif; /* Use normal font to prevent flattening */
    margin-left: 4px;
    margin-right: 4px;
    vertical-align: middle;
}