/* Common styles shared across pages */

:root {
    --accent: #acf2f4;
    --base-size: calc(100svh / 72);

    /* Background animation variables */
    --bg-gradient-x: 0%;
    --bg-gradient-y: 0%;

    /* Background gradient colors (default: black/desaturated) */
    /* Circle 1: Dark Gray */
    --bg-color-1-h: 0;
    --bg-color-1-s: 0%;
    --bg-color-1-l: 20%;

    /* Circle 2: Dark Gray */
    --bg-color-2-h: 0;
    --bg-color-2-s: 0%;
    --bg-color-2-l: 15%;

    /* Circle 3: Dark Gray */
    --bg-color-3-h: 0;
    --bg-color-3-s: 0%;
    --bg-color-3-l: 18%;

    /* Circle 4: Dark Gray */
    --bg-color-4-h: 0;
    --bg-color-4-s: 0%;
    --bg-color-4-l: 22%;

    /* Circle 5: Dark Gray */
    --bg-color-5-h: 0;
    --bg-color-5-s: 0%;
    --bg-color-5-l: 16%;

    /* Circle 6: Dark Gray */
    --bg-color-6-h: 0;
    --bg-color-6-s: 0%;
    --bg-color-6-l: 19%;

    /* Circle 7: Dark Gray */
    --bg-color-7-h: 0;
    --bg-color-7-s: 0%;
    --bg-color-7-l: 21%;

    /* Color shift amount (0-1, affects saturation and lightness) */
    --bg-color-shift: 0;
}

/* Background animation - 7-layer gradient system (mouse-reactive circles) */
#bg-animation-container {
    background-color: #000;
    background-image:
        radial-gradient(at calc(37% + var(--bg-gradient-x)) calc(71% + var(--bg-gradient-y)), hsl(var(--bg-color-1-h), var(--bg-color-1-s), var(--bg-color-1-l), var(--bg-opacity1)) 0px, transparent 50%),
        radial-gradient(at calc(83% + var(--bg-gradient-x)) calc(3% + var(--bg-gradient-y)), hsl(var(--bg-color-2-h), var(--bg-color-2-s), var(--bg-color-2-l), var(--bg-opacity2)) 0px, transparent 50%),
        radial-gradient(at calc(38% + var(--bg-gradient-x)) calc(42% + var(--bg-gradient-y)), hsl(var(--bg-color-3-h), var(--bg-color-3-s), var(--bg-color-3-l), var(--bg-opacity1)) 0px, transparent 50%),
        radial-gradient(at calc(7% + var(--bg-gradient-x)) calc(51% + var(--bg-gradient-y)), hsl(var(--bg-color-4-h), var(--bg-color-4-s), var(--bg-color-4-l), var(--bg-opacity2)) 0px, transparent 50%),
        radial-gradient(at calc(72% + var(--bg-gradient-x)) calc(4% + var(--bg-gradient-y)), hsl(var(--bg-color-5-h), var(--bg-color-5-s), var(--bg-color-5-l), var(--bg-opacity1)) 0px, transparent 50%),
        radial-gradient(at calc(75% + var(--bg-gradient-x)) calc(6% + var(--bg-gradient-y)), hsl(var(--bg-color-6-h), var(--bg-color-6-s), var(--bg-color-6-l), var(--bg-opacity2)) 0px, transparent 50%),
        radial-gradient(at calc(24% + var(--bg-gradient-x)) calc(53% + var(--bg-gradient-y)), hsl(var(--bg-color-7-h), var(--bg-color-7-s), var(--bg-color-7-l), var(--bg-opacity1)) 0px, transparent 50%);
}

/* Fallback for browsers that don't support svh */
@supports not (height: 100svh) {
    :root {
        --base-size: calc(100vh / 72);
    }
}

/* Base styles */
body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    color: white;
    font-size: calc(var(--base-size) * 1);
    margin: 0;
    padding: 0;
}

html {
    background-color: black;
}

/* Reusable spinner component */
.spinner {
    width: calc(var(--base-size) * 4);
    height: calc(var(--base-size) * 4);
    border-radius: 50%;
    background: conic-gradient(transparent, var(--accent));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - calc(var(--base-size) * 0.27)), #fff calc(100% - calc(var(--base-size) * 0.27) + 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - calc(var(--base-size) * 0.27)), #fff calc(100% - calc(var(--base-size) * 0.27) + 1px));
    animation: spin 1s linear infinite;
}

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

/* Top navbar (for portfolio and other pages) */
#top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--base-size) * 1.5) calc(var(--base-size) * 3);
    z-index: 1000;
    background: transparent;
    box-sizing: border-box;
    opacity: 0;
}

#top-navbar::before {
    content: '';
    position: absolute;
    inset: 0 0 -40% 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.8) 55%, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

#top-navbar.is-scrolled::before {
    opacity: 1;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: calc(var(--base-size) * 3);
}

.nav-logo img {
    height: calc(var(--base-size) * 3);
    width: auto;
    padding-bottom: 0;
    cursor: pointer;
    transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .nav-logo img:hover {
        transform: scale(1.05);
        filter: none;
    }
}

.nav-links {
    display: flex;
    gap: calc(var(--base-size) * 3);
    align-items: center;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: calc(var(--base-size) * 1.2);
    font-weight: 400;
    position: relative;
    /* Equal space above and below the text (the underline lives in the bottom half),
       so the links' center matches the CONNECT button's */
    padding: calc(var(--base-size) * 0.5) 0;
    cursor: pointer;
}

/* Underline using pseudo-element for smooth transitions */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: calc(var(--base-size) * 0.2);
    left: 0;
    width: 100%;
    height: calc(var(--base-size) * 0.2);
    background-color: white;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: center;
}

.nav-links a.active::after {
    transform: scaleX(1);
}

/* Show underline on hover for non-active links */
@media (hover: hover) and (pointer: fine) {
    .nav-links a:not(.active):hover::after {
        transform: scaleX(1);
    }

    /* Hide active link's underline when hovering over any other link */
    .nav-links:has(a:not(.active):hover) a.active::after {
        transform: scaleX(0);
    }
}

.connect-btn {
    background: var(--accent);
    border-radius: calc(var(--base-size) * 0.67);
    padding: calc(var(--base-size) * 0.53) calc(var(--base-size) * 2);
    font-weight: 700;
    font-size: calc(var(--base-size) * 1);
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
    color: black;
}

@media (hover: hover) and (pointer: fine) {
    .connect-btn:hover {
        transform: scale(1.05);
    }
}

/* Mobile responsiveness for navbar */
@media (max-width: 768px) {
    #top-navbar {
        padding: calc(var(--base-size) * 1) calc(var(--base-size) * 2);
        justify-content: center;
    }

    .nav-logo img {
        height: calc(var(--base-size) * 2.5);
    }

    .nav-links {
        display: none;
    }

    .connect-btn {
        display: none;
    }

    .nav-right {
        display: none;
    }
}

/* Entry page styles (shared by journal and portfolio) */
.journal-article-container {
    max-width: 900px;
    margin: 0 auto;
    padding: calc(var(--base-size) * 2);
}

.md .journal-back-button-container {
    display: block;
    width: 100%;
    padding: calc(var(--base-size) * 3) 0;
    color: #d0d0d0;
    font-size: calc(var(--base-size) * 0.9);
    font-weight: 500;
    user-select: none;
}

.md .journal-back-button-container:hover {
    cursor: pointer;
}

.md > :nth-child(2) {
    margin-top: 0;
    padding-top: 0;
}

@media (max-width: 768px) {
    .journal-article-container {
        padding: calc(var(--base-size) * 2.5) calc(var(--base-size) * 2) calc(var(--base-size) * 2);
    }
}

.md .entry-meta {
    margin: -14px 0 32px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    white-space: pre-wrap;
}

.md .journal-back-button-container:focus-visible {
    outline-offset: -2px;
}