/* ============================================================
   custom.css
   Styles that go beyond Tailwind utilities.
   Keep this lean -- Tailwind handles 95% of everything.
   ============================================================ */

/* ================================
   ENTRANCE ANIMATIONS
   ================================ */
.animate-pre {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* ================================
   SCANNER RESULTS
   ================================ */
.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.8125rem;
}

.check-row:last-child {
    border-bottom: none;
}

.check-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* Score ring */
.score-ring {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* ================================
   SCROLLBAR
   ================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #111118;
}

::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* ================================
   SELECTION
   ================================ */
::selection {
    background: rgba(220, 38, 38, 0.4);
    color: #fff;
}

/* ================================
   FOCUS VISIBLE
   ================================ */
:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ================================
   GRADIENT TEXT UTILITY
   ================================ */
.text-gradient {
    background: linear-gradient(135deg, #fff 0%, #9ca3af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ================================
   GLOW EFFECTS
   ================================ */
.glow-red {
    box-shadow: 0 0 40px rgba(220, 38, 38, 0.15);
}

.glow-red-strong {
    box-shadow: 0 0 60px rgba(220, 38, 38, 0.25);
}

/* ================================
   CODE / MONO TEXT
   ================================ */
.mono {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.875em;
}

/* ================================
   LOADING SPINNER
   ================================ */
.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}