/*
 * London Forex Trading - No GPU / Low Performance Fallback Styles
 * Simplified styles for systems without hardware graphics acceleration
 * Applied when html has .no-gpu or .reduced-motion class
 */

/* ========================================
   Basic settings for no-gpu mode
   ======================================== */

/* Ensure base background visibility */
.no-gpu body,
.no-gpu body.homepage {
    background-color: #0A1628 !important;
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(30, 58, 95, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(46, 125, 50, 0.3) 0%, transparent 40%),
        linear-gradient(180deg, #0A1628 0%, #060F1A 100%) !important;
}

/* Disable all backdrop-filter effects */
.no-gpu .header,
.no-gpu .glass,
.no-gpu .hero-stats,
.no-gpu .mobile-menu-backdrop,
.no-gpu .modal-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Replace with opaque backgrounds */
.no-gpu .header {
    background-color: rgba(10, 22, 40, 0.98) !important;
}

.no-gpu .header.scrolled {
    background-color: rgb(10, 22, 40) !important;
}

.no-gpu .glass {
    background: rgba(15, 33, 55, 0.98) !important;
}

.no-gpu .hero-stats {
    background: rgba(15, 33, 55, 0.95) !important;
}

.no-gpu .mobile-menu-backdrop {
    background: rgba(0, 0, 0, 0.85) !important;
}

.no-gpu .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

/* ========================================
   Simplified animations
   ======================================== */

/* Disable complex transform animations */
.no-gpu .animate-on-scroll,
.no-gpu [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.2s ease !important;
}

.no-gpu .animate-on-scroll.animated,
.no-gpu [data-animate].animated {
    opacity: 1 !important;
}

/* Simplified keyframe animations */
.no-gpu .animate-fade-in,
.no-gpu .animate-slide-up,
.no-gpu .animate-slide-down,
.no-gpu .animate-scale-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ========================================
   Bank marquee - JavaScript-based animation for no-gpu
   ======================================== */

/* For no-gpu use JavaScript animation instead of CSS */
.no-gpu .bank-marquee-track {
    /* Disable CSS animation - JS will control */
    animation: none !important;
    /* Allow JS to control transform */
    will-change: auto !important;
}

/* Keep all logos visible */
.no-gpu .bank-logo {
    flex-shrink: 0;
}

/* Simplify fade edges - without gradients */
.no-gpu .bank-marquee::before,
.no-gpu .bank-marquee::after {
    background: linear-gradient(to right, var(--color-bg-dark) 0%, transparent 100%) !important;
    opacity: 0.8 !important;
}

.no-gpu .bank-marquee::after {
    background: linear-gradient(to left, var(--color-bg-dark) 0%, transparent 100%) !important;
}

/* ========================================
   Hero Chart Animation - JavaScript fallback
   ======================================== */

/* Disable CSS animations for chart - JS will control */
.no-gpu .candlestick-svg {
    animation: none !important;
    will-change: auto !important;
}

.no-gpu .candlestick-svg .trend-line {
    animation: none !important;
    will-change: auto !important;
}

.no-gpu .candlestick-svg .candle {
    animation: none !important;
    will-change: auto !important;
}

/* Keep base styles visible */
.no-gpu .hero-chart-background {
    filter: blur(3px);
}

/* ========================================
   3D Coin Animation (About page) - JavaScript fallback
   ======================================== */

/* Disable CSS animations for 3D coin - JS will control */
.no-gpu .coin-3d {
    animation: none !important;
    will-change: auto !important;
}

.no-gpu .coin-glow {
    animation: none !important;
    will-change: auto !important;
}

.no-gpu .coin-particle {
    animation: none !important;
    will-change: auto !important;
}

/* Keep base styles visible */
.no-gpu .coin-scene {
    perspective: 1000px;
}

.no-gpu .coin-3d {
    transform-style: preserve-3d;
}

/* ========================================
   Services Visual Animation (Services page) - JavaScript fallback
   ======================================== */

/* Disable CSS animations for services visual - JS will control */
.no-gpu .services-visual-orbit {
    animation: none !important;
    will-change: auto !important;
}

.no-gpu .services-visual-pulse {
    animation: none !important;
    will-change: auto !important;
}

.no-gpu .services-visual-node {
    animation: none !important;
    will-change: auto !important;
}

.no-gpu .services-floating-shape {
    animation: none !important;
    will-change: auto !important;
}

/* Keep base styles visible */
.no-gpu .services-visual-animation {
    overflow: hidden;
}

.no-gpu .services-visual-orbit {
    border-style: dashed;
}

/* ========================================
   Pulse and other repeating animations
   ======================================== */

.no-gpu .animate-pulse,
.no-gpu .live-dot,
.no-gpu .badge-live::before {
    animation: none !important;
}

/* Static style for live dot */
.no-gpu .live-dot {
    opacity: 1 !important;
}

/* ========================================
   Hover effects - simplified
   ======================================== */

.no-gpu .card:hover,
.no-gpu .card-feature:hover,
.no-gpu .advantage-card:hover,
.no-gpu .testimonial-card:hover {
    transform: none !important;
    box-shadow: 0 0 0 2px var(--color-accent) !important;
}

.no-gpu .btn:hover:not(:disabled) {
    transform: none !important;
}

.no-gpu .btn-primary:hover:not(:disabled) {
    box-shadow: 0 0 0 3px rgba(234, 203, 114, 0.3) !important;
}

/* ========================================
   Transitions - faster and simpler
   ======================================== */

.no-gpu *,
.no-gpu *::before,
.no-gpu *::after {
    transition-duration: 0.15s !important;
    transition-timing-function: ease-out !important;
}

/* Disable transitions for certain elements */
.no-gpu .bank-marquee-track,
.no-gpu .animate-on-scroll {
    transition: none !important;
}

/* ========================================
   Background effects - simplified (but visible!)
   ======================================== */

/* Simplify background gradients but keep them visible */
.no-gpu body.homepage::before {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(30, 58, 95, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(46, 125, 50, 0.3) 0%, transparent 40%),
        linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%) !important;
}

/* Simplify grid - without mask-image */
.no-gpu body.homepage::after {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    background-size: 50px 50px !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    opacity: 0.5 !important;
}

/* Simplified hero background - but visible */
.no-gpu .hero-gradient {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(30, 58, 95, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(46, 125, 50, 0.2) 0%, transparent 40%),
        linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%) !important;
}

/* Simplify hero pattern - without mask */
.no-gpu .hero-pattern {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) !important;
    background-size: 50px 50px !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    opacity: 0.5 !important;
}

/* CTA section - simplified but visible background */
.no-gpu .cta-pattern {
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(46, 125, 50, 0.1) 0%, transparent 50%) !important;
}

/* ========================================
   Shadows - simplified
   ======================================== */

.no-gpu .shadow-lg,
.no-gpu .shadow-xl,
.no-gpu .card-elevated {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.no-gpu .shadow-glow,
.no-gpu .shadow-glow-primary {
    box-shadow: none !important;
}

/* ========================================
   Mobile menu - simplified animations
   ======================================== */

.no-gpu .mobile-menu {
    transition: transform 0.2s ease-out !important;
}

.no-gpu .mobile-menu-overlay .mobile-menu-backdrop {
    transition: opacity 0.2s ease-out !important;
}

/* ========================================
   Header scroll - without animation
   ======================================== */

.no-gpu .header {
    transition: background-color 0.15s ease-out !important;
}

.no-gpu .header.header-hidden {
    transform: translateY(-100%) !important;
    transition: transform 0.2s ease-out !important;
}

/* ========================================
   Back to top button
   ======================================== */

.no-gpu .back-to-top {
    transition: opacity 0.15s ease-out !important;
    transform: none !important;
}

.no-gpu .back-to-top:hover {
    transform: none !important;
}

/* ========================================
   Form elements
   ======================================== */

.no-gpu .form-input:focus,
.no-gpu .form-select:focus,
.no-gpu .form-textarea:focus {
    box-shadow: 0 0 0 2px var(--color-accent) !important;
}

/* ========================================
   Progress bar - without animation
   ======================================== */

.no-gpu .progress-bar.animated {
    animation: none !important;
    background-image: none !important;
}

/* ========================================
   Skeleton loading - simplified animation
   ======================================== */

.no-gpu .skeleton {
    animation: none !important;
    background: var(--color-bg-card-hover) !important;
}

/* ========================================
   Low Performance Mode (additional)
   For very weak systems
   ======================================== */

.low-performance * {
    transition: none !important;
    animation: none !important;
}

.low-performance .card:hover,
.low-performance .btn:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ========================================
   Reduced Motion (prefers-reduced-motion)
   For users with reduced motion preference
   ======================================== */

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* ========================================
   Print styles - disable all unnecessary
   ======================================== */

@media print {
    .bank-marquee-track {
        animation: none !important;
    }
    
    .animate-on-scroll,
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========================================
   Responsive adjustments for no-gpu
   ======================================== */

@media (max-width: 767px) {
    .no-gpu .bank-marquee-track {
        gap: 20px 30px !important;
    }
    
    .no-gpu .bank-logo {
        font-size: 0.875rem !important;
    }
}

/* ========================================
   Utility classes for manual control
   ======================================== */

/* Force disable animations for element */
.force-no-animation {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

/* Force enable animations (override no-gpu) */
.force-animation {
    animation: unset;
    transition: unset;
}