/**
 * Code Scalpel Main Site Styles
 * Centralized stylesheet for consistent design across all marketing pages
 * Used by: index.html, tools.html, pricing.html, about.html, beta.html
 */

/* ============================================================================
   BASE STYLES
   ============================================================================ */

body {
    background-color: #03045E;
    color: #E0E0E0;
}

/* ============================================================================
   BACKGROUND EFFECTS
   ============================================================================ */

.bg-grid {
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, transparent, 10%, black, 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, 0%, black, 90%, transparent);
    opacity: 0.1;
}

/* ============================================================================
   TEXT EFFECTS
   ============================================================================ */

.glow-text {
    text-shadow: 0 0 20px rgba(0, 180, 216, 0.3);
}

.terminal-cursor::after {
    content: '_';
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ============================================================================
   SCANLINE ANIMATION
   ============================================================================ */

.scanline {
    width: 100%;
    height: 2px;
    background: rgba(0, 180, 216, 0.1);
    position: absolute;
    z-index: 10;
    animation: scan 8s linear 3;
    pointer-events: none;
}

@keyframes scan {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ============================================================================
   CARD COMPONENTS
   ============================================================================ */

.feature-card:hover,
.tool-card:hover {
    border-color: #00B4D8;
    box-shadow: 0 0 15px rgba(0, 180, 216, 0.2);
}

/* ============================================================================
   DETAILS/ACCORDION COMPONENTS
   ============================================================================ */

details summary {
    list-style: none;
    cursor: pointer;
}

details summary::-webkit-details-marker {
    display: none;
}

details[open] summary .arrow {
    transform: rotate(90deg);
}

.arrow {
    transition: transform 0.2s;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/* Skip to main content link for accessibility */
.sr-only:not(:focus):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}