/* ========================================
   CLI THEME
   All CLI theme-specific overrides
   ======================================== */

/*
 * Note: Most CLI theme styles are co-located with their components
 * in base.css, components.css, layout.css, and animations.css
 * using [data-theme="cli"] selectors.
 *
 * This file contains additional CLI-specific enhancements
 * and boot sequence styles.
 */

/* ----------------------------------------
   Boot Sequence Text Effect
   ---------------------------------------- */

.boot-sequence {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--cyan);
    text-align: center;
    z-index: 10001;
    pointer-events: none;
    text-shadow: 0 0 10px var(--cyan);
}

.boot-sequence.active {
    display: block;
    animation: bootFadeIn 0.3s ease forwards;
}

@keyframes bootFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.boot-sequence .boot-line {
    opacity: 0;
    animation: bootLineIn 0.1s ease forwards;
}

.boot-sequence .boot-line:nth-child(1) { animation-delay: 0.05s; }
.boot-sequence .boot-line:nth-child(2) { animation-delay: 0.1s; }
.boot-sequence .boot-line:nth-child(3) { animation-delay: 0.15s; }
.boot-sequence .boot-line:nth-child(4) { animation-delay: 0.2s; }
.boot-sequence .boot-line:nth-child(5) { animation-delay: 0.25s; }

@keyframes bootLineIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ----------------------------------------
   Enhanced Terminal Styling
   ---------------------------------------- */

[data-theme="cli"] .terminal {
    position: relative;
}

[data-theme="cli"] .terminal::before {
    content: 'OUTPUT';
    position: absolute;
    top: -0.75rem;
    left: 1rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-dim);
    background: var(--bg);
    padding: 0 0.5rem;
}

/* ----------------------------------------
   CLI-Specific Link Styling
   ---------------------------------------- */

[data-theme="cli"] .pricing-footer a::after,
[data-theme="cli"] .footer-column a::after {
    content: '_';
    animation: blink 1s step-end infinite;
}

/* ----------------------------------------
   Scanline Intensity Adjustment
   ---------------------------------------- */

[data-theme="cli"] body.high-contrast::before {
    opacity: 0.05;
}

/* ----------------------------------------
   Optional CRT Curve Effect (subtle)
   ---------------------------------------- */

[data-theme="cli"] .hero-content,
[data-theme="cli"] .terminal,
[data-theme="cli"] .config-block {
    /* Subtle inward shadow for CRT depth effect */
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(0, 255, 159, 0.2);
}

/* ----------------------------------------
   CLI Theme Active States
   ---------------------------------------- */

[data-theme="cli"] .btn:active {
    transform: scale(0.98);
    box-shadow: 0 0 15px var(--cyan);
}

[data-theme="cli"] .faq-question:active {
    color: var(--cyan);
    text-shadow: 0 0 10px var(--cyan);
}

/* ----------------------------------------
   CLI Theme Selection Color
   ---------------------------------------- */

[data-theme="cli"] ::selection {
    background: var(--cyan);
    color: var(--bg);
}

[data-theme="cli"] ::-moz-selection {
    background: var(--cyan);
    color: var(--bg);
}

/* ----------------------------------------
   CLI Theme Scrollbar
   ---------------------------------------- */

[data-theme="cli"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="cli"] ::-webkit-scrollbar-track {
    background: var(--bg);
}

[data-theme="cli"] ::-webkit-scrollbar-thumb {
    background: var(--cyan);
    border-radius: 0;
}

[data-theme="cli"] ::-webkit-scrollbar-thumb:hover {
    background: var(--cyan-dim);
}

/* ----------------------------------------
   CLI Theme Focus States
   ---------------------------------------- */

[data-theme="cli"] *:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    box-shadow: 0 0 10px var(--cyan);
}

/* ----------------------------------------
   CLI Theme Code Elements
   ---------------------------------------- */

[data-theme="cli"] code {
    text-shadow: 0 0 5px var(--cyan);
}

[data-theme="cli"] .install-box code {
    color: var(--cyan);
}

/* ----------------------------------------
   CLI Theme Loading Indicator
   ---------------------------------------- */

[data-theme="cli"] .loading::after {
    content: '...';
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}