/*
Theme Name: Terminal Pulse
Author: WordPress Telex
Description: A dark, terminal-inspired WordPress block theme with bold red-orange and phosphor amber accents. Built for Telex — the AI coder for WordPress. High-converting landing page design with heavy branding and hacker aesthetic.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: terminal-pulse
Tags: block-theme, full-site-editing, dark, one-column

Terminal Pulse — Where code meets craft.
*/

/* Scanline overlay on body */
body {
    background-image:
        linear-gradient(rgba(10, 10, 15, 0.92), rgba(10, 10, 15, 0.92)),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            rgba(255, 68, 0, 0.02) 2px,
            rgba(255, 68, 0, 0.02) 3px
        );
}

/* Blinking cursor animation */
@keyframes terminal-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.terminal-cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.05em;
    background-color: #FF4400;
    vertical-align: text-bottom;
    margin-left: 4px;
    animation: terminal-blink 1s step-end infinite;
}

/* Glow text utility */
.glow-primary {
    text-shadow: 0 0 20px rgba(255, 68, 0, 0.4);
}

.glow-amber {
    text-shadow: 0 0 20px rgba(255, 184, 0, 0.4);
}

/* Grid background overlay */
.grid-overlay {
    position: relative;
}

.grid-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(31, 31, 36, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 31, 36, 0.4) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

.grid-overlay > * {
    position: relative;
    z-index: 1;
}

/* Console log styling */
.console-log-block {
    font-size: 0.85rem;
    line-height: 1.8;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #1F1F24;
    padding: 1.5rem;
    max-width: 440px;
}

.console-log-block .log-success {
    color: #FF4400;
    font-weight: 700;
}

.console-log-block .log-warn {
    color: #FFB800;
    font-weight: 700;
}

.console-log-block .log-time {
    color: #444455;
}

.console-log-block .log-msg {
    color: #F0F0FF;
}

/* Code window styling */
.code-window-wrapper {
    background-color: #111116;
    border: 1px solid #333344;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.5),
        0 20px 50px rgba(0,0,0,0.8),
        0 0 100px rgba(255, 68, 0, 0.05);
}

.code-window-header {
    background-color: #1A1A22;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #333344;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.window-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.window-dot-red { background-color: #FF5F56; }
.window-dot-yellow { background-color: #FFBD2E; }
.window-dot-green { background-color: #27C93F; }

.code-window-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.85;
    mix-blend-mode: screen;
    filter: contrast(1.2) brightness(1.1);
}

/* Feature cards */
.feature-card {
    background: rgba(17, 17, 22, 0.8);
    border: 1px solid #1F1F24;
    padding: 2.5rem 2rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    border-color: #FF4400;
    box-shadow: 0 0 30px rgba(255, 68, 0, 0.08);
}

/* Stat blocks */
.stat-value {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

/* CTA button styles */
.cta-primary {
    background: transparent !important;
    border: 2px solid #FF4400 !important;
    color: #FF4400 !important;
    font-family: 'SF Mono', 'Roboto Mono', 'Courier New', monospace !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 1rem 2.5rem !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 0 15px rgba(255, 68, 0, 0.3);
    font-size: 1rem !important;
}

.cta-primary:hover {
    background: rgba(255, 68, 0, 0.1) !important;
    box-shadow: 0 0 30px rgba(255, 68, 0, 0.2) !important;
}

.cta-secondary {
    background: transparent !important;
    border: 1px solid #1F1F24 !important;
    color: #888899 !important;
    font-family: 'SF Mono', 'Roboto Mono', 'Courier New', monospace !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 1rem 2rem !important;
    transition: all 0.3s ease !important;
    font-size: 0.9rem !important;
}

.cta-secondary:hover {
    border-color: #FFB800 !important;
    color: #FFB800 !important;
}

/* Value prop left border */
.value-prop-border {
    border-left: 2px solid #1F1F24;
    padding-left: 1.5rem;
}

/* Scroll fade-in animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: fadeInUp 0.8s ease forwards;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* Glow orb */
.glow-orb-wrapper {
    position: relative;
}

.glow-orb-wrapper::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 68, 0, 0.06) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

/* Heavy TELEX branding */
.telex-brand {
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1;
}

/* Equal cards layout */
.equal-cards > .wp-block-column {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
}

.equal-cards > .wp-block-column > .wp-block-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.equal-cards .cta-bottom {
    margin-top: auto;
    justify-content: center;
}

/* Footer margin reset */
.wp-site-blocks > footer {
    margin-block-start: 0;
}

/* Divider styling */
.terminal-divider {
    border-color: #1F1F24 !important;
    opacity: 1 !important;
}

/* Navigation link styles */
.terminal-nav a {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 781px) {
    .code-window-wrapper {
        transform: none !important;
    }
}