/* ========== MOTION SYSTEM - ADVANCED CONFIGURATION ========== */
/* Fine-tuning per element type & device */

/* ========== RESPONSIVE MOTION TIMING ========== */

/* Desktop - Full animation suite */
@media (min-width: 1024px) {
    :root {
        --motion-scale: 1;
        --btn-magnetic-radius: 80px;
        --btn-hover-lift: -4px;
        --card-hover-lift: -6px;
    }

    .btn:hover {
        transform: translateY(var(--btn-hover-lift)) scale(1.06);
    }

    .card:hover,
    .value:hover,
    .member:hover {
        transform: translateY(var(--card-hover-lift)) rotateY(2deg);
    }
}

/* Tablet - Reduced motion */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --timing-ultra-fast: 120ms;
        --timing-fast: 250ms;
        --timing-standard: 400ms;
        --timing-slow: 550ms;
        --timing-very-slow: 750ms;
    }

    .btn:hover {
        transform: translateY(-2px) scale(1.03);
    }

    .card:hover,
    .value:hover,
    .member:hover {
        transform: translateY(-3px);
    }

    /* Disable infinite animations */
    .btn-primary:hover {
        animation: none;
    }
}

/* Mobile - Minimal motion */
@media (max-width: 767px) {
    :root {
        --timing-ultra-fast: 80ms;
        --timing-fast: 150ms;
        --timing-standard: 250ms;
        --timing-slow: 350ms;
        --timing-very-slow: 500ms;
    }

    .btn {
        transition: all var(--timing-standard) var(--ease-smooth);
    }

    .btn:hover {
        transform: scale(1.02);
    }

    .btn:active {
        transform: scale(0.98);
    }

    .card,
    .value,
    .member {
        transition: all var(--timing-standard) var(--ease-smooth);
    }

    .card:hover,
    .value:hover,
    .member:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(76, 46, 178, 0.1);
    }

    /* Disable complex effects on mobile */
    .btn-primary:hover {
        animation: none;
    }

    .hero::after {
        animation: none;
    }

    .gradient-text {
        animation: none;
    }

    /* Reduce parallax effect */
    [data-parallax] {
        --parallax-speed: 0.1;
    }
}

/* ========== HIGH DPI / RETINA DISPLAYS ========== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .btn,
    .card,
    .value,
    .member {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Slightly reduce blur for sharper text */
    img {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* ========== TOUCH DEVICES ========== */

@media (hover: none) and (pointer: coarse) {
    /* Disable hover states that won't work */
    .btn:hover {
        transform: none;
        box-shadow: inherit;
    }

    .card:hover,
    .value:hover,
    .member:hover {
        transform: none;
    }

    /* But enable active states for touch feedback */
    .btn:active {
        transform: scale(0.96);
    }

    .card:active,
    .value:active,
    .member:active {
        transform: scale(0.98);
    }
}

/* ========== LANDSCAPE ORIENTATION ON MOBILE ========== */

@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --timing-standard: 200ms;
        --timing-slow: 300ms;
    }

    .btn {
        padding: 10px 14px;
        font-size: 14px;
    }

    section {
        padding: 40px 18px;
    }

    h1 {
        font-size: 20px;
    }
}

/* ========== LOW BANDWIDTH / SAVE-DATA MODE ========== */

@media (prefers-reduced-data: reduce) {
    /* Disable background gradients */
    .hero::after {
        background: none;
        animation: none;
    }

    /* Use solid colors instead */
    .gradient-text {
        animation: none;
        color: var(--blue);
    }

    /* Disable texture overlays */
    .card::after,
    .value::after,
    .member::after {
        display: none;
    }
}

/* ========== DARK MODE ADJUSTMENTS ========== */

@media (prefers-color-scheme: dark) {
    :root {
        --gradient-start: #1a3a52;
        --gradient-mid: #2d6a4f;
        --gradient-end: #1a3a52;
    }

    .btn:hover {
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    }

    .card:hover,
    .value:hover,
    .member:hover {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
    }

    /* Reduce brightness on dark mode */
    .btn::before {
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent
        );
    }
}

/* ========== PRINT MODE ========== */

@media print {
    /* Disable all animations for printing */
    * {
        animation: none !important;
        transition: none !important;
    }

    /* Ensure elements are visible */
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========== FORCE COLOR MODE (WINDOWS HIGH CONTRAST) ========== */

@media (prefers-contrast: more) {
    .btn {
        border: 2px solid currentColor;
    }

    .card,
    .value,
    .member {
        border: 1px solid currentColor;
    }

    .gradient-text {
        color: currentColor;
        -webkit-text-fill-color: currentColor;
        background: none;
    }
}

/* ========== INVERTED COLORS ========== */

@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
    body {
        background: #000;
        color: #fff;
    }

    .btn {
        background: #fff;
        color: #000;
    }
}

/* ========== SLOW NETWORK / 2G ========== */

@media (max-width: 400px) {
    /* Minimize rendering complexity */
    .hero::after,
    .gradient-text {
        animation: none;
    }

    section {
        padding: 40px 12px;
    }

    .btn {
        padding: 12px 14px;
        font-size: 14px;
    }
}

/* ========== ELEMENT-SPECIFIC TIMING OVERRIDES ========== */

/* Buttons - Always responsive */
.btn {
    --btn-timing: var(--timing-standard);
    transition: all var(--btn-timing) var(--ease-apple-natural);
}

/* Cards - Slightly slower for emphasis */
.card {
    --card-timing: var(--timing-slow);
    transition: all var(--card-timing) var(--ease-smooth);
}

/* Hero section - Slower animations for drama */
.hero h1,
.hero p,
.hero .cta {
    --hero-timing: var(--timing-slow);
    transition: all var(--hero-timing) var(--ease-smooth);
}

/* Progress bars - Staggered fill */
.progress > span {
    --progress-timing: var(--timing-very-slow);
    transition: width var(--progress-timing) var(--ease-apple);
}

/* ========== DEBUG MODE (DEVELOPMENT ONLY) ========== */

.motion-debug {
    outline: 1px solid rgba(255, 0, 0, 0.3);
}

.motion-debug::before {
    content: 'Motion Debug';
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    background: rgba(255, 0, 0, 0.5);
    color: white;
    padding: 2px 4px;
    border-radius: 2px;
    z-index: 10000;
}

/* ========== VENDOR PREFIXES FOR COMPATIBILITY ========== */

/* Webkit browsers */
.btn,
.card,
.value,
.member {
    -webkit-transition: all var(--timing-standard) var(--ease-smooth);
    transition: all var(--timing-standard) var(--ease-smooth);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-user-select: none;
    user-select: none;
}

/* Firefox */
.btn,
.card,
.value,
.member {
    -moz-user-select: none;
    user-select: none;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== SPRING ANIMATION (ADVANCED) ========== */

/* For elements that need a spring-like feel */
.spring-effect {
    --spring-tension: 0.8;
    --spring-damping: 0.5;
    transition: all 0.6s cubic-bezier(
        var(--spring-damping),
        -0.3,
        0.2,
        var(--spring-tension)
    );
}

.spring-effect:hover {
    transform: scale(1.08);
}

/* ========== FRAME-RATE AWARE ANIMATIONS ========== */

/* For 60 FPS devices, use standard timing */
@media (min-width: 1024px) {
    .smooth-60fps {
        transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* For 30 FPS devices (low-end), use longer timings */
@media (max-width: 480px) {
    .smooth-30fps {
        transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* ========== PERFORMANCE MONITORING CLASSES ========== */

/* Apply when performance is detected as low */
.perf-low {
    will-change: auto !important;
    animation: none !important;
}

.perf-low .btn:hover,
.perf-low .card:hover {
    transform: none !important;
}

/* Apply when performance is good */
.perf-high {
    will-change: transform, opacity;
}

.perf-high .btn:hover {
    animation: glowExpand 1.2s ease-out infinite;
}