/* ==================== RangerMC - Extra Animations ==================== */

/* Neon Glow Effect */
.neon-glow {
    text-shadow: 0 0 10px #38BDF8, 0 0 20px #38BDF8, 0 0 30px #38BDF8;
    animation: neon-flicker 3s infinite;
}

@keyframes neon-flicker {
    0%, 100% {
        text-shadow: 0 0 10px #38BDF8, 0 0 20px #38BDF8, 0 0 30px #38BDF8;
    }
    50% {
        text-shadow: 0 0 5px #38BDF8, 0 0 10px #38BDF8, 0 0 15px #38BDF8;
    }
}

/* Pulse Animation */
.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Gradient Shift Animation */
.gradient-shift {
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Smooth Bounce Animation */
.bounce {
    animation: bounce 0.6s ease-in-out infinite;
}

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

/* Rotate Animation */
.spin {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Wiggle Animation */
.wiggle {
    animation: wiggle 0.5s ease-in-out infinite;
}

@keyframes wiggle {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

/* Shimmer Effect */
.shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,0));
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Fade In & Out */
.fade-in-out {
    animation: fadeInOut 2s ease-in-out infinite;
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Scale Pulse */
.scale-pulse {
    animation: scalePulse 1.5s ease-in-out infinite;
}

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

/* Floating Animation */
.floating {
    animation: floating 3s ease-in-out infinite;
}

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

/* Gradient Border Animation */
.gradient-border {
    border: 2px solid;
    border-image: linear-gradient(90deg, #38BDF8, #0EA5E9, #60A5FA) 1;
    animation: gradientBorder 3s ease infinite;
}

@keyframes gradientBorder {
    0% {
        border-image: linear-gradient(90deg, #38BDF8, #0EA5E9, #60A5FA) 1;
    }
    50% {
        border-image: linear-gradient(90deg, #0EA5E9, #60A5FA, #38BDF8) 1;
    }
    100% {
        border-image: linear-gradient(90deg, #38BDF8, #0EA5E9, #60A5FA) 1;
    }
}

/* Glow Effect */
.glow {
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(56, 189, 248, 0.8);
    }
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Rainbow Text */
.rainbow-text {
    background: linear-gradient(
        90deg,
        #3B82F6,
        #06B6D4,
        #8B5CF6,
        #EC4899,
        #F97316,
        #3B82F6
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbow 3s linear infinite;
}

@keyframes rainbow {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Hover Lift Effect */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}

/* Slide In Animation */
.slide-in {
    animation: slideIn 0.5s ease forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Flip Animation */
.flip {
    animation: flip 0.6s ease-in-out forwards;
}

@keyframes flip {
    0% {
        transform: rotateY(0);
    }
    50% {
        transform: rotateY(90deg);
    }
    100% {
        transform: rotateY(0);
    }
}

/* Bounce Animation */
.bounce {
    animation: bounce 0.6s ease-in-out infinite;
}

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

/* Blob Shape Animation */
.blob {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: blob-shape 8s ease-in-out infinite;
}

@keyframes blob-shape {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
    25% {
        border-radius: 70% 30% 66% 34% / 42% 58% 42% 58%;
    }
    50% {
        border-radius: 100% 60% 52% 48% / 57% 23% 77% 43%;
    }
    75% {
        border-radius: 63% 37% 54% 46% / 38% 58% 42% 62%;
    }
}

/* Text Glow Effect */
.text-glow {
    text-shadow: 
        0 0 5px #3B82F6,
        0 0 10px #3B82F6,
        0 0 15px #3B82F6,
        0 0 20px #3B82F6;
}

/* Parallax Effect for Backgrounds */
.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Shimmer Effect */
.shimmer {
    animation: shimmer 2s infinite;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Wave Animation */
@keyframes wave {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-2px);
    }
    75% {
        transform: translateX(2px);
    }
}

.wave {
    animation: wave 0.5s ease-in-out infinite;
}

/* 3D Flip Card */
.flip-card {
    background-color: transparent;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
}

</style>

<!-- Advanced Color Customization -->
<style>
/* Cyberpunk Theme */
.cyberpunk {
    --primary-dark: #0a0e27;
    --blue-neon: #ff006e;
    --cyan-neon: #00f5ff;
    --purple-neon: #b413f0;
    background: linear-gradient(135deg, #ff006e, #00f5ff, #b413f0);
}

/* Ocean Theme */
.ocean {
    --primary-dark: #001f3f;
    --blue-neon: #0074d9;
    --cyan-neon: #7fdbca;
}

/* Forest Theme */
.forest {
    --primary-dark: #0b3a0b;
    --blue-neon: #2ecc71;
    --cyan-neon: #1abc9c;
}

/* Sunset Theme */
.sunset {
    --primary-dark: #2c1810;
    --blue-neon: #ff6b35;
    --cyan-neon: #f7931e;
}
</style>

<!-- Responsive Utility Classes -->
<style>
/* Responsive Padding */
@media (max-width: 768px) {
    .p-lg {
        padding: 2rem 1rem !important;
    }
    .p-md {
        padding: 1.5rem 1rem !important;
    }
    .p-sm {
        padding: 1rem 0.5rem !important;
    }
}

/* Responsive Font Sizes */
@media (max-width: 768px) {
    .text-lg {
        font-size: 1.5rem !important;
    }
    .text-md {
        font-size: 1.1rem !important;
    }
    .text-sm {
        font-size: 0.85rem !important;
    }
}

/* Responsive Display */
.hide-mobile {
    display: block;
}

.show-mobile {
    display: none;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }
    .show-mobile {
        display: block;
    }
}
</style>

<!-- Print Styles -->
<style>
@media print {
    body {
        background: white;
        color: black;
    }
    .navbar, .footer, .loading-screen {
        display: none;
    }
    a {
        text-decoration: underline;
    }
}
</style>

<!-- Accessibility Improvements -->
<style>
/* High Contrast Mode */
@media (prefers-contrast: more) {
    :root {
        --text-secondary: #ffffff;
        --glass-border: rgba(255, 255, 255, 0.4);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Preference */
@media (prefers-color-scheme: light) {
    body {
        background: #f5f5f5;
        color: #333;
    }
}

/* Focus Visible for Keyboard Navigation */
:focus-visible {
    outline: 3px solid var(--blue-neon);
    outline-offset: 2px;
}
</style>

<!-- Dark Mode Toggle Example -->
<script>
/* Add this to js/script.js or in a script tag */

function toggleDarkMode() {
    document.documentElement.setAttribute('data-theme', 
        document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
    );
    localStorage.setItem('theme', document.documentElement.getAttribute('data-theme'));
}

// Load saved theme preference
const savedTheme = localStorage.getItem('theme') || 'dark';
document.documentElement.setAttribute('data-theme', savedTheme);
</script>

<!-- Usage Examples -->

<!-- Rainbow Text -->
<!-- <h1 class="rainbow-text">Welcome to RangerMC</h1> -->

<!-- Hover Lift Card -->
<!-- <div class="glass-card hover-lift">...</div> -->

<!-- Pulsing Element -->
<!-- <div class="pulse">Important Notice</div> -->

<!-- Gradient Shift Background -->
<!-- <div style="background: linear-gradient(45deg, #3B82F6, #06B6D4); background-size: 200% 200%;" class="gradient-shift">Content</div> -->

<!-- Neon Glow Text -->
<!-- <h2 class="neon-glow">✨ Featured Ranks ✨</h2> -->