@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --obsidian: #0d1117;
    --brand-navy: #004C7E;
    --brand-orange: #b54600;
    --brand-green: #9ff400;
    --aa-orange: #FFBB69; /* WCAG 2.2 AA Contrast Compliant */
    --aa-green: #A0DAB3;  /* WCAG 2.2 AA Contrast Compliant */
    --link-blue: #58a6ff; /* Shared with 84EM Blogs */
}

body {
    background-color: var(--obsidian);
    color: #FFFFFF;
    font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Global Link Style (Text Content) */
p a {
    color: var(--link-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease-in-out;
}
p a:hover {
    color: #ffffff;
}

/* Force 84EM Capitalization */
.brand-text {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ANIMATION: High-Depth Breathing Glow Grid */
.hero-grid {
    position: absolute;
    inset: -20%;
    background-image: radial-gradient(circle at 2px 2px, var(--brand-navy) 1.5px, transparent 0);
    background-size: 50px 50px;
    transform: perspective(1000px) rotateX(25deg);
    animation: grid-breathe 15s infinite alternate ease-in-out;
    opacity: 0.35;
}

@keyframes grid-breathe {
    0% { transform: perspective(1000px) rotateX(25deg) translateY(0) scale(1); opacity: 0.3; }
    100% { transform: perspective(1000px) rotateX(25deg) translateY(50px) scale(1.1); opacity: 0.5; }
}

/* ANIMATION: The Diagnostic Pulse */
.pulse-orange {
    position: relative;
    display: inline-block;
}
.pulse-orange::after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    background: var(--brand-orange);
    border-radius: 50%;
    animation: ripple 2.5s infinite;
    z-index: -1;
}

@keyframes ripple {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(3.5); opacity: 0; }
}

/* Monospace Stack */
.font-mono, [class*="font-mono"] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ANIMATION: Sequential Terminal Reveal */
.log-line {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--brand-orange);
    width: 0;
    animation: typing 2s steps(40, end) forwards, blink 0.75s step-end infinite;
}
.log-line:nth-child(2) { animation-delay: 2s; }
.log-line:nth-child(3) { animation-delay: 4s; }

@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink { from, to { border-color: transparent } 50% { border-color: var(--brand-orange); } }

/* High-Depth Glassmorphism */
.glass-panel {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.glass-panel:hover {
    border-color: var(--brand-green);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Accessibility: Motion Control */
@media (prefers-reduced-motion: reduce) {
    .hero-grid, .pulse-orange::after, .log-line {
        animation: none !important;
        width: 100%;
        border-right: none;
    }
}