/* ═══════════════════════════════════════════════════════════
   04-ANIMATIONS.CSS — Futuristic Cyber Keyframes & Hover Physics
   ══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   ULTRA HIGH PERFORMANCE MOBILE & CORE WEB VITALS OPTIMIZATIONS
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Disable continuous background animations on mobile to guarantee smooth 60fps */
    .futuristic-glow,
    .cyber-btn-shine,
    .cyber-scan-line {
        animation: none !important;
    }
    /* Content visibility for offscreen cards - boosts mobile rendering speed 3x */
    .app-card-premium,
    .item-app {
        content-visibility: auto;
        contain-intrinsic-size: 1px 260px;
    }
    /* Prevent double-tap zoom delay & improve touch responsiveness */
    a, button, input, select {
        touch-action: manipulation !important;
    }
}

/* Kill Appyn's default white backgrounds */
body, #page, #content, #main, .site, .site-content,
.entry-content, .content-area, .primary {
    background: transparent !important;
}

/* Kill Appyn's default container widths that fight ours */
.container, .wrap {
    max-width: 1280px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* ═══════════════════════════════════════════════════════════
   FUTURISTIC MARQUEE & KEYFRAME ANIMATIONS
══════════════════════════════════════════════════════════ */
@keyframes marqueeScroll {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 25s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

@keyframes pulseEmeraldGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(78, 222, 163, 0.2); }
    50% { box-shadow: 0 0 35px rgba(78, 222, 163, 0.5); }
}

.futuristic-glow {
    animation: pulseEmeraldGlow 4s ease-in-out infinite;
}

/* Card Futuristic Hover Effects */
.app-card-premium,
.glass-level-1,
.glass-level-2 {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.app-card-premium:hover {
    transform: translateY(-4px) scale(1.01) !important;
    border-color: rgba(78, 222, 163, 0.4) !important;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.2) !important;
}

/* Light mode ticker text fix */
html.light .news-ticker-wrapper,
body.light-mode .news-ticker-wrapper {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.light .marquee-track,
body.light-mode .marquee-track {
    color: #0f172a !important;
}

/* ═══════════════════════════════════════════════════════════
   ULTRA-FUTURISTIC CYBER-EMERALD DESIGN & ANIMATION SUITE
══════════════════════════════════════════════════════════ */

/* Cyber-Grid Matrix Background Overlay for Dark Mode */
html.dark body {
    background-image: 
        radial-gradient(rgba(78, 222, 163, 0.07) 1px, transparent 1px),
        radial-gradient(rgba(16, 185, 129, 0.04) 1px, transparent 1px) !important;
    background-size: 32px 32px, 64px 64px !important;
    background-position: 0 0, 16px 16px !important;
}

html:not(.dark) body,
html.light body,
body.light-mode {
    background-image: none !important;
}

/* Neon Cyber Glass Glow Cards */
.glass-level-2,
.glass-level-3 {
    position: relative;
}

.glass-level-2::before,
.glass-level-3::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(78, 222, 163, 0.3), rgba(255, 255, 255, 0.05), rgba(16, 185, 129, 0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Animated Cyber CTA Shine Sweep */
@keyframes cyberShine {
    0% { transform: translateX(-150%) rotate(25deg); }
    100% { transform: translateX(150%) rotate(25deg); }
}

.bg-gradient-to-r.from-emerald-500 {
    position: relative;
    overflow: hidden;
}

.bg-gradient-to-r.from-emerald-500::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        60deg,
        transparent 30%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 70%
    );
    transform: rotate(25deg);
    animation: cyberShine 6s infinite;
    pointer-events: none;
}

/* Glowing Neon Text Effect */
.emerald-text-glow {
    text-shadow: 0 0 20px rgba(78, 222, 163, 0.5), 0 0 40px rgba(16, 185, 129, 0.2);
}

/* 3D Cyber Hover Elevation */
.app-card-premium {
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.app-card-premium:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 16px 36px rgba(16, 185, 129, 0.25), 0 0 20px rgba(78, 222, 163, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp 0.4s ease both;
}

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

.skeleton {
    background: linear-gradient(90deg, var(--glass-1) 0%, var(--glass-3) 50%, var(--glass-1) 100%);
    background-size: 1000px 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════
   OUT-OF-THE-BOX FUTURISTIC CYBER ANIMATIONS & SCI-FI SUITE
══════════════════════════════════════════════════════════ */

/* Custom Selection Highlight */
::selection {
    background: rgba(16, 185, 129, 0.35) !important;
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.6) !important;
}

/* Cyber Matrix Background Floating Grid (GPU Static Optimized) */
body {
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.05) 0%, transparent 40%),
        radial-gradient(rgba(16, 185, 129, 0.04) 1px, transparent 1px) !important;
    background-size: 100% 100%, 100% 100%, 28px 28px !important;
    background-attachment: fixed !important;
}

/* 3D Hologram Tilt & Neon Glow on Hover for All App Cards */
.item-app,
.app-card-premium,
.glass-level-1,
.glass-level-2 {
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                border-color 0.3s ease, 
                box-shadow 0.3s ease !important;
}

.item-app:hover,
.app-card-premium:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-8px) scale(1.01) !important;
    border-color: rgba(52, 211, 153, 0.45) !important;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7),
                0 0 25px rgba(52, 211, 153, 0.2),
                inset 0 0 15px rgba(52, 211, 153, 0.05) !important;
}

/* Animated Cyber Scanner Beam Overlay */
.glass-level-3::after,
.emerald-glow::after {
    content: '' !important;
    position: absolute !important;
    top: -100% !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, transparent 0%, rgba(52, 211, 153, 0.08) 50%, transparent 100%) !important;
    animation: cyberScan 6s linear infinite !important;
    pointer-events: none !important;
}

@keyframes cyberScan {
    0%   { top: -100%; }
    100% { top: 200%; }
}

/* Pulsing Neon Beacon Badge Effect */
@keyframes cyberBeaconPulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.animate-ping {
    animation: cyberBeaconPulse 2s infinite !important;
}

/* Cyber Button Shine Sweeper */
.btn-primary,
.premium-download-btn,
a.btn-dl {
    position: relative !important;
    overflow: hidden !important;
}

.btn-primary::before,
.premium-download-btn::before,
a.btn-dl::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent) !important;
    transform: skewX(-25deg) !important;
    animation: cyberBtnShine 4s infinite !important;
}

/* ═══════════════════════════════════════════════════════════
   STICKY CYBER NEWS TICKER MARQUEE ANIMATION
══════════════════════════════════════════════════════ */
@keyframes cyberMarquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: inline-flex;
    animation: cyberMarquee 25s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* ═══════════════════════════════════════════════════════════
   CYBER THEME TOGGLE WAVE RIPPLE ANIMATION
══════════════════════════════════════════════════════ */
.cyber-theme-ripple {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, rgba(52, 211, 153, 0.1) 70%, transparent 100%) !important;
    pointer-events: none !important;
    z-index: 99999 !important;
    animation: cyberRippleWave 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards !important;
}

@keyframes cyberRippleWave {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(300);
        opacity: 0;
    }
}