/* Reclaim — Custom CSS
   Structural variables and theme tokens are in themes.css.
   This file keeps animations and legacy utility classes. */

* { box-sizing: border-box; }

/* ── Animations ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%       { box-shadow: 0 0 20px 4px var(--accent-glow); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes shimmer {
    from { background-position: -200% 0; }
    to   { background-position:  200% 0; }
}

.animate-fadeup       { animation: fadeUp .4s ease forwards; }
.animate-slide-right  { animation: slideInRight .3s ease forwards; }
.animate-pulse-glow   { animation: pulseGlow 2s ease-in-out infinite; }
.animate-spin         { animation: spin .8s linear infinite; }

/* ── Skeleton loader ── */
.skeleton {
    background:      linear-gradient(90deg, var(--bg-card) 25%, var(--border) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation:       shimmer 1.5s infinite;
    border-radius:   8px;
}

/* ── Glass morphism ── */
.glass {
    background:              rgba(var(--bg-sec-rgb), 0.85);
    backdrop-filter:         blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border:                  1px solid var(--accent-subtle);
}

/* ── Gradient text ── */
.gradient-text {
    background:              linear-gradient(135deg, var(--accent), var(--accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

/* ── Focus ring ── */
.focus-ring:focus {
    outline:    none;
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── Prose dark ── */
.prose-dark { color: #cbd5e1; line-height: 1.75; }
.prose-dark p  { margin-bottom: .875rem; }
.prose-dark strong { color: #e2e8f0; }