/* css/progressive-levels.css */
/* By Nic Weyand! */
/* Progressive enhancement CSS for argand.org */
/* 5 levels: 0 (text-only/Lynx) to 4 (full polish) */

/* ============================================================================
   LEVEL 0: TEXT-ONLY / TERMINAL BROWSERS (Lynx, w3m, links)
   Pure semantic HTML, maximum accessibility, zero decoration
   ============================================================================ */

.perf-level-0,
.perf-level-0 * {
    all: revert !important;
}

.perf-level-0 {
    font-family: monospace, 'Courier New', Courier, serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #000 !important;
    background: #fff !important;
    padding: 1em !important;
}

.perf-level-0 a {
    color: #00f !important;
    text-decoration: underline !important;
}

.perf-level-0 a:visited {
    color: #800080 !important;
}

.perf-level-0 a:hover,
.perf-level-0 a:focus {
    background: #ff0 !important;
    color: #000 !important;
}

/* Hide decorative elements in text-only mode */
.perf-level-0 .fire-backdrop,
.perf-level-0 .argand-plane,
.perf-level-0 .status-dot,
.perf-level-0 .search-badge,
.perf-level-0 svg:not([role="img"]),
.perf-level-0 .tech-emoji {
    display: none !important;
}

/* Ensure semantic structure is visible */
.perf-level-0 .hero-title,
.perf-level-0 .service-title,
.perf-level-0 .philosophy-title {
    font-size: 1.5em !important;
    font-weight: bold !important;
    margin: 1em 0 0.5em !important;
    border-bottom: 2px solid #000 !important;
}

.perf-level-0 .hero-subtitle,
.perf-level-0 .service-description,
.perf-level-0 .philosophy-text {
    margin: 0.5em 0 !important;
}

.perf-level-0 .service-card {
    border: 1px solid #000 !important;
    padding: 1em !important;
    margin: 1em 0 !important;
    display: block !important;
}

.perf-level-0 .feature-list li {
    margin: 0.5em 0 !important;
    padding-left: 2em !important;
    list-style-type: disc !important;
}

.perf-level-0 input,
.perf-level-0 button {
    font-family: monospace !important;
    font-size: 16px !important;
    padding: 0.5em !important;
    border: 2px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
}

.perf-level-0 button {
    background: #ddd !important;
    cursor: pointer !important;
}

.perf-level-0 button:hover,
.perf-level-0 button:focus {
    background: #000 !important;
    color: #fff !important;
}

/* Skip link highly visible */
.perf-level-0 .skip-link {
    position: static !important;
    display: block !important;
    margin-bottom: 1em !important;
    font-weight: bold !important;
}

/* ============================================================================
   LEVEL 1: ULTRA-LITE (2G connections, low-end devices)
   No animations, system fonts only, minimal styling
   ============================================================================ */

.perf-level-1 {
    --ease-out: linear;
    --ease-spring: linear;
}

.perf-level-1,
.perf-level-1 * {
    animation: none !important;
    transition: none !important;
}

/* Use system fonts only */
.perf-level-1 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.perf-level-1 .logo,
.perf-level-1 .hero-title,
.perf-level-1 .service-title,
.perf-level-1 .philosophy-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700 !important;
}

/* Remove gradients, use solid colors */
.perf-level-1 .logo {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--flame-orange) !important;
    background-clip: unset !important;
    color: var(--flame-orange) !important;
}

.perf-level-1 .hero-title .highlight {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--flame-orange) !important;
    background-clip: unset !important;
    color: var(--flame-orange) !important;
}

/* Hide decorative elements */
.perf-level-1 .fire-backdrop::before,
.perf-level-1 .argand-plane,
.perf-level-1 .philosophy-card::before {
    display: none !important;
}

/* Simplify backgrounds */
.perf-level-1 .fire-backdrop {
    background: var(--bg-void) !important;
}

.perf-level-1 .philosophy-card {
    background: var(--bg-charcoal) !important;
}

.perf-level-1 .submit-btn {
    background: var(--flame-orange) !important;
}

/* No shadows */
.perf-level-1 .search-box:focus-within,
.perf-level-1 .service-card:hover,
.perf-level-1 .submit-btn:hover {
    box-shadow: none !important;
}

/* No transforms */
.perf-level-1 .logo:hover,
.perf-level-1 .status-badge:hover,
.perf-level-1 .suggestion-chip:hover,
.perf-level-1 .tech-pill:hover,
.perf-level-1 .service-card:hover,
.perf-level-1 .submit-btn:hover {
    transform: none !important;
}

/* ============================================================================
   LEVEL 2: LITE (3G connections)
   Minimal animations (opacity only), lightweight styling
   ============================================================================ */

.perf-level-2 {
    --ease-out: ease;
    --ease-spring: ease;
}

/* Only opacity transitions allowed */
.perf-level-2 * {
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 0.15s !important;
    animation: none !important;
}

/* Allow status dot pulse but simplified */
.perf-level-2 .status-dot {
    animation: pulse-simple 2s ease-in-out infinite !important;
}

@keyframes pulse-simple {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* System fonts preferred, web fonts optional */
.perf-level-2 {
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
}

.perf-level-2 .logo,
.perf-level-2 .hero-title,
.perf-level-2 .service-title,
.perf-level-2 .philosophy-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
}

/* Simplified gradients */
.perf-level-2 .fire-backdrop {
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(230, 57, 70, 0.1) 0%, transparent 50%),
        var(--bg-void);
}

.perf-level-2 .fire-backdrop::before {
    display: none !important;
}

/* Hide complex SVG animations */
.perf-level-2 .argand-plane {
    display: none !important;
}

/* Simplified shadows */
.perf-level-2 .search-box:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
}

.perf-level-2 .service-card:hover {
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.3) !important;
}

/* No transform animations */
.perf-level-2 .logo:hover,
.perf-level-2 .status-badge:hover,
.perf-level-2 .suggestion-chip:hover,
.perf-level-2 .tech-pill:hover {
    transform: none !important;
}

/* Allow subtle card lift */
.perf-level-2 .service-card:hover {
    transform: translateY(-2px) !important;
}

/* ============================================================================
   LEVEL 3: STANDARD (4G connections)
   Full animations optimized, all webfonts, most effects
   ============================================================================ */

.perf-level-3 {
    /* Use defined easing */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Allow most transitions */
.perf-level-3 * {
    transition-duration: 0.25s !important;
}

/* Enable animations but disable complex ones */
.perf-level-3 .status-dot {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Show Argand plane but without animation */
.perf-level-3 .argand-plane {
    display: block;
}

.perf-level-3 .argand-plane svg {
    animation: none !important;
}

.perf-level-3 .argand-plane circle,
.perf-level-3 .argand-plane line {
    animation: none !important;
}

/* Full gradients */
.perf-level-3 .fire-backdrop {
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(230, 57, 70, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 30% 100%, rgba(255, 107, 53, 0.2) 0%, transparent 45%),
        radial-gradient(ellipse 50% 35% at 70% 100%, rgba(255, 217, 61, 0.12) 0%, transparent 40%),
        var(--bg-void);
}

/* Show noise texture */
.perf-level-3 .fire-backdrop::before {
    display: block;
    opacity: 0.02;
}

/* Full shadows */
.perf-level-3 .search-box:focus-within {
    box-shadow:
        0 0 0 4px rgba(255, 107, 53, 0.15),
        0 15px 40px -10px rgba(0, 0, 0, 0.4);
}

.perf-level-3 .service-card:hover {
    box-shadow: 0 15px 45px -15px rgba(0, 0, 0, 0.4);
}

/* Allow transforms */
.perf-level-3 .logo:hover {
    transform: scale(1.03);
}

.perf-level-3 .status-badge:hover,
.perf-level-3 .suggestion-chip:hover,
.perf-level-3 .tech-pill:hover {
    transform: translateY(-1px);
}

.perf-level-3 .service-card:hover {
    transform: translateY(-3px);
}

/* ============================================================================
   LEVEL 4: FULL FIDELITY (5G/WiFi, high-end devices)
   Maximum polish, all effects, premium micro-interactions
   ============================================================================ */

.perf-level-4 {
    /* Full easing functions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Full transition control */
.perf-level-4 * {
    transition-duration: 0.3s;
}

/* All animations enabled */
.perf-level-4 .status-dot {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Full Argand plane with animations */
.perf-level-4 .argand-plane {
    display: block;
}

.perf-level-4 .argand-plane svg {
    animation: gentle-float 15s ease-in-out infinite;
}

/* Full fire backdrop with all layers */
.perf-level-4 .fire-backdrop {
    background:
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(230, 57, 70, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 30% 100%, rgba(255, 107, 53, 0.2) 0%, transparent 45%),
        radial-gradient(ellipse 50% 35% at 70% 100%, rgba(255, 217, 61, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 50% 120%, rgba(183, 65, 14, 0.25) 0%, transparent 60%),
        var(--bg-void);
}

.perf-level-4 .fire-backdrop::before {
    display: block;
    opacity: 0.025;
}

/* Premium shadows */
.perf-level-4 .search-box:focus-within {
    box-shadow:
        0 0 0 4px rgba(255, 107, 53, 0.15),
        0 20px 60px -15px rgba(0, 0, 0, 0.5);
}

.perf-level-4 .service-card:hover {
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.5);
}

.perf-level-4 .submit-btn:hover:not(:disabled) {
    box-shadow: 0 10px 30px -10px rgba(255, 107, 53, 0.5);
}

/* Full transforms with spring easing */
.perf-level-4 .logo:hover {
    transform: scale(1.05);
    transition-timing-function: var(--ease-spring);
}

.perf-level-4 .status-badge:hover {
    transform: translateY(-2px);
    transition-timing-function: var(--ease-spring);
}

.perf-level-4 .suggestion-chip:hover,
.perf-level-4 .tech-pill:hover {
    transform: translateY(-2px);
    transition-timing-function: var(--ease-spring);
}

.perf-level-4 .service-card:hover {
    transform: translateY(-4px);
    transition-timing-function: var(--ease-out);
}

.perf-level-4 .submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    transition-timing-function: var(--ease-spring);
}

.perf-level-4 .about-link:hover {
    transform: translateX(3px);
    transition-timing-function: var(--ease-spring);
}

/* ============================================================================
   DATA SAVER MODE
   Respects user's data saver preference
   ============================================================================ */

.data-saver-mode {
    /* Disable all decorative images and complex backgrounds */
}

.data-saver-mode .fire-backdrop,
.data-saver-mode .fire-backdrop::before,
.data-saver-mode .argand-plane,
.data-saver-mode .philosophy-card::before {
    display: none !important;
}

.data-saver-mode .logo,
.data-saver-mode .hero-title .highlight {
    background: none !important;
    -webkit-text-fill-color: var(--flame-orange) !important;
}

body.data-saver-mode {
    background: var(--bg-void);
}

/* ============================================================================
   REDUCED MOTION OVERRIDES
   Applied regardless of performance level when user prefers reduced motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.1s !important;
        scroll-behavior: auto !important;
    }

    .argand-plane svg,
    .argand-plane circle,
    .argand-plane line {
        animation: none !important;
    }

    .status-dot {
        animation: none !important;
    }

    .logo:hover,
    .status-badge:hover,
    .suggestion-chip:hover,
    .tech-pill:hover,
    .service-card:hover,
    .submit-btn:hover,
    .about-link:hover {
        transform: none !important;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE
   For users who need higher contrast
   ============================================================================ */

@media (prefers-contrast: more) {
    :root {
        --text-bright: #ffffff;
        --text-warm: #f0f0f0;
        --text-muted: #cccccc;
        --text-dim: #999999;
        --flame-orange: #ff8844;
        --bg-warm: #333333;
    }

    .service-card,
    .philosophy-card,
    .about-card,
    .search-box,
    .tech-pill {
        border-width: 2px !important;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible {
        outline-width: 3px !important;
        outline-offset: 4px !important;
    }
}

/* ============================================================================
   PRINT STYLES
   Clean output for printing
   ============================================================================ */

@media print {
    .perf-level-0,
    .perf-level-1,
    .perf-level-2,
    .perf-level-3,
    .perf-level-4 {
        /* Reset all level classes for print */
    }

    body {
        background: white !important;
        color: black !important;
        font-family: Georgia, 'Times New Roman', serif !important;
        font-size: 12pt !important;
        line-height: 1.5 !important;
    }

    .fire-backdrop,
    .argand-plane,
    .search-container,
    .status-badge,
    .header,
    .tech-section,
    .signup-section {
        display: none !important;
    }

    a {
        color: black !important;
        text-decoration: underline !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    .service-card,
    .philosophy-card,
    .about-card {
        break-inside: avoid;
        border: 1px solid #ccc !important;
        background: white !important;
        page-break-inside: avoid;
    }
}