mi-sitio-personal/src/theme.css

@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    /* Backgrounds */
    --bg-base: #111113;
    /* Main page background */
    --bg-surface: rgba(24, 24, 27, 0.4);
    /* Cards and secondary backgrounds */
    --bg-panel: rgba(9, 9, 11, 0.85);
    /* Terminal panes and rigid components */

    /* Typography */
    --text-main: #f4f4f5;
    /* Headings and primary text */
    --text-muted: #a1a1aa;
    /* Paragraphs and secondary text */
    --text-dim: #52525b;
    /* Annotations and subtle details */

    /* Structure */
    --border-main: #27272a;
    /* Dashed lines and pane borders */
    --grid-pattern: rgba(255, 255, 255, 0.08);
    /* Background dot grid color */

    /* Status Indicators */
    --status-success: #34d399;
    /* Emerald color for 'Online' status */

    /* Easter Egg (Cat) */
    --cat-body: #111113;
    /* Main body color (usually matches bg-base) */
    --cat-stroke: #60a5fa;
    /* Blue stroke outline */
    --cat-nose: #f472b6;
    /* Pink nose */
    --cat-eyes: #ffffff;
    /* White eyes */
    --heart-color: #f472b6;
    /* Heart animation color */
}

.font-sketch {
    font-family: 'Architects Daughter', cursive;
}

.font-mono {
    font-family: 'Space Mono', monospace;
}

.accent-text {
    color: var(--color-accent);
    transition: color 0.3s ease;
}

.accent-bg {
    background-color: var(--color-accent);
    transition: background-color 0.3s ease;
}

/* Indie / Hand-drawn borders */
.sketch-border {
    border: 2px solid var(--color-accent-muted);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    transition: all 0.3s ease;
}

.sketch-border:hover {
    border-color: var(--color-accent);
    border-radius: 15px 225px 15px 255px/255px 15px 225px 15px;
}

.sketch-border-subtle {
    border: 1px solid var(--border-main);
    border-radius: 2px 255px 3px 25px / 255px 5px 225px 3px;
    transition: all 0.3s ease;
}

.sketch-border-subtle:hover {
    border-color: var(--color-accent);
    border-radius: 255px 5px 225px 3px / 2px 255px 3px 25px;
}

.dot-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.dot-grid::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(var(--grid-pattern) 1px, transparent 1px);
    background-size: 24px 24px;
    /* Lock Y so scroll never changes it; keep X drift via CSS variable. */
    background-position: var(--dot-grid-x, 0px) 0px;
    will-change: background-position;
    animation: dot-grid-drift-x 3s linear infinite;
}

.dot-grid.dot-grid-static::before {
    animation: none;
    background-position: 0px 0px;
}

.arrow-trail-text {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--color-accent);
    text-shadow: 0 0 6px var(--color-accent), 0 0 14px var(--color-accent);
    animation: arrow-trail-glow 1s linear infinite;
    opacity: 0.85;
}

@keyframes dot-grid-drift-x {
    from {
        background-position: 0px 0px;
    }

    to {
        background-position: 24px 0px;
    }
}

@keyframes project-shake {

    0%,
    100% {
        transform: rotate(-3deg) translateY(0);
    }

    20% {
        transform: rotate(1deg) translateY(-1px);
    }

    40% {
        transform: rotate(-1deg) translateY(1px);
    }

    60% {
        transform: rotate(1.5deg) translateY(-2px);
    }

    80% {
        transform: rotate(-1.5deg) translateY(1px);
    }
}

@keyframes arrow-trail-glow {
    0% {
        opacity: 0.6;
        text-shadow: 0 0 4px var(--color-accent), 0 0 10px var(--color-accent);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 8px var(--color-accent), 0 0 18px var(--color-accent);
    }

    100% {
        opacity: 0.6;
        text-shadow: 0 0 4px var(--color-accent), 0 0 10px var(--color-accent);
    }
}

@keyframes modal-zoom {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes modal-exit {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }
}

@keyframes pill-glow {
    0% {
        filter: drop-shadow(0 0 4px var(--color-accent)) drop-shadow(0 0 8px var(--color-accent));
    }

    50% {
        filter: drop-shadow(0 0 7px var(--color-accent)) drop-shadow(0 0 14px var(--color-accent));
    }

    100% {
        filter: drop-shadow(0 0 4px var(--color-accent)) drop-shadow(0 0 8px var(--color-accent));
    }
}

@media (prefers-reduced-motion: reduce) {
    .dot-grid::before {
        animation: none;
    }

    .arrow-trail-text {
        animation: none;
    }

    .animate-\[modal-zoom_0\.25s_ease-out\] {
        animation: none;
    }

    .animate-\[modal-exit_0\.2s_ease-in_forwards\] {
        animation: none;
    }

    .animate-\[pill-glow_1\.6s_ease-in-out_infinite\] {
        animation: none;
        filter: drop-shadow(0 0 8px var(--color-accent));
    }
}