/* facelift.css — visual polish layer for lorincz.me.
   Loaded LAST, after style.css + shared.css, so it refines the Veletech base
   without touching the token files. Keeps the cute terminal feel: starfield
   background, CRT polish, sharper type, and accent micro-interactions.
   All motion is gated behind prefers-reduced-motion. */

/* --- Layout stability: reserve the scrollbar so pages never shift sideways --- */
html {
    scrollbar-gutter: stable;
    overflow-y: scroll; /* fallback for engines without scrollbar-gutter */
    background-color: var(--bg-color);
}

/* --- Starfield background (drawn by bg.js) + a soft vignette --- */
#bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
    display: block;
}
/* let the starfield show through the page between the opaque content panels */
body { background-color: transparent; }
body::before { /* gentle vignette to focus the centre */
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.38) 100%);
}

/* --- Typography & spacing polish --- */
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { letter-spacing: -0.012em; line-height: 1.25; }
.site-title { letter-spacing: -0.02em; }
.terminal-marker { text-shadow: 0 0 10px var(--success-color); }

/* --- Nav: animated underline + a clear, consistent active state --- */
nav ul li a {
    position: relative;
    padding-bottom: 3px;
}
nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
nav ul li a:hover::after,
nav ul li a.active::after { transform: scaleX(1); }
nav ul li a.active { color: var(--accent-color); font-weight: 600; }

/* --- CRT polish on the terminal window --- */
.terminal-container {
    position: relative;
    border-color: color-mix(in srgb, var(--accent-color) 28%, var(--secondary-color));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45),
                0 0 26px color-mix(in srgb, var(--accent-color) 16%, transparent);
}
.terminal-container::after { /* scanlines overlay (clipped by the container's overflow:hidden) */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.035) 0px,
        rgba(255, 255, 255, 0.035) 1px,
        transparent 1px,
        transparent 3px
    );
}

/* --- Hover micro-interactions --- */
.link-card, .project-item, .app-card { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.link-card:hover, .project-item:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35),
                0 0 16px color-mix(in srgb, var(--accent-color) 22%, transparent);
}
.link-card i { transition: transform 0.2s ease; }
.link-card:hover i { transform: translateY(-2px) scale(1.08); }
.profile-image img { transition: box-shadow 0.3s ease, transform 0.3s ease; }
.profile-image img:hover { transform: scale(1.02); box-shadow: 0 0 26px color-mix(in srgb, var(--accent-color) 45%, transparent); }

/* --- Respect reduced-motion: calm everything down --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}