/* ============================================
   MATRIX THEME
   ============================================ */

body[data-theme="matrix"] {
    --primary-color: #00ff66;
    --secondary-color: #7cff00;
    --accent-color: #00d9a3;
    --text-dark: #eafff3;
    --text-light: #b6ffd1;
    --text-muted: #7cff9e;
    --light-bg: #07150d;
    --white: #010503;
    --border-color: #0f7a3a;
    background:
        radial-gradient(circle at 18% 12%, rgba(0, 255, 102, 0.06), transparent 30%),
        linear-gradient(135deg, #000, #020804 48%, #000);
}

body[data-theme="matrix"] .navbar {
    box-shadow: 0 2px 12px rgba(0, 255, 127, 0.18);
}

body[data-theme="matrix"] .hero {
    background: linear-gradient(135deg, rgba(0, 255, 127, 0.1), rgba(0, 184, 148, 0.05));
}

body[data-theme="matrix"] .who-its-for,
body[data-theme="matrix"] .about-sean,
body[data-theme="matrix"] .contact {
    background: linear-gradient(135deg, rgba(0, 255, 127, 0.055), rgba(57, 255, 20, 0.03));
}

body[data-theme="matrix"] .how-sessions-work,
body[data-theme="matrix"] .faq {
    background: linear-gradient(135deg, rgba(0, 184, 148, 0.055), rgba(0, 255, 127, 0.035));
}

body[data-theme="matrix"] .card,
body[data-theme="matrix"] .timeline-content,
body[data-theme="matrix"] .detail-box,
body[data-theme="matrix"] .faq-item,
body[data-theme="matrix"] .contact-form,
body[data-theme="matrix"] .info-item,
body[data-theme="matrix"] .approach-box {
    box-shadow: 0 0 0 1px rgba(0, 255, 127, 0.04);
}

body[data-theme="matrix"] .card:hover,
body[data-theme="matrix"] .faq-item.active {
    box-shadow: 0 10px 30px rgba(0, 255, 127, 0.18);
}

body[data-theme="matrix"] .avatar-placeholder {
    background: linear-gradient(135deg, rgba(0, 255, 127, 0.18), rgba(0, 184, 148, 0.13));
}

body[data-theme="matrix"] .hero,
body[data-theme="matrix"] section,
body[data-theme="matrix"] footer {
    position: relative;
    z-index: 2;
}

body[data-theme="matrix"] .navbar {
    position: sticky;
    top: 0;
    z-index: 100;
}

body[data-theme="matrix"] .theme-backdrop {
    opacity: 1;
    z-index: 1;
    background: #000;
}

body[data-theme="matrix"] .theme-layer-atmosphere {
    inset: 0;
    background:
        repeating-linear-gradient(90deg, transparent 0 2.7rem, rgba(0, 255, 102, 0.035) 2.75rem 2.85rem, transparent 2.9rem 5.4rem),
        radial-gradient(circle at 74% 18%, rgba(124, 255, 0, 0.1), transparent 28%),
        radial-gradient(circle at 20% 82%, rgba(0, 217, 163, 0.1), transparent 30%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.72));
}

body[data-theme="matrix"] .matrix-rain-canvas {
    display: block;
    opacity: 0.46;
}

body[data-theme="matrix"] .theme-backdrop::before,
body[data-theme="matrix"] .theme-backdrop::after {
    content: none;
    position: fixed;
    top: -130vh;
    left: 4vw;
    width: 96vw;
    min-height: 280vh;
    color: rgba(0, 255, 102, 0.34);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: clamp(0.8rem, 1.15vw, 1.3rem);
    line-height: 1.12;
    letter-spacing: 0;
    white-space: pre;
    word-spacing: clamp(1.25rem, 3vw, 4rem);
    text-shadow:
        0 0 8px rgba(0, 255, 102, 0.42),
        0 0 18px rgba(0, 255, 102, 0.16);
    transform: translate3d(0, 0, 0);
    animation: matrixRain 15s linear infinite;
    opacity: 0.8;
}

body[data-theme="matrix"] .theme-backdrop::after {
    content: none;
    left: 0;
    color: rgba(124, 255, 0, 0.18);
    font-size: clamp(0.68rem, 0.95vw, 1.05rem);
    line-height: 1.22;
    word-spacing: clamp(2rem, 4vw, 5.5rem);
    animation-duration: 10s;
    animation-delay: -4s;
    opacity: 0.66;
}

body[data-theme="matrix"] .theme-layer-bottom {
    inset: auto 0 0;
    height: 34vh;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.62), transparent);
}

body[data-theme="matrix"] .theme-layer-edge {
    display: none;
}

@keyframes matrixRain {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, 150vh, 0);
    }
}

@media (max-width: 768px) {
    body[data-theme="matrix"] .theme-backdrop::before,
    body[data-theme="matrix"] .theme-backdrop::after {
        opacity: 0.75;
        word-spacing: 0.9rem;
    }
}