/* ===========================
   Shared — bryanrea.com
   Design tokens, global link styles, and site nav.
   Referenced by both the portfolio (static) and Fragments (Flask).
   =========================== */

/* ===========================
   Design tokens
   =========================== */
:root {
    --nav-height: 56px;

    --color-bg: #FCF8EE;           /* warm cream */
    --color-ink: #1F1B16;          /* warm near-black */
    --color-ink-soft: #2A2620;     /* body text */
    --color-muted: #7A7068;        /* secondary text */
    --color-muted-light: #B8A89A;  /* dividers, hint labels */
    --color-rule: rgba(237, 229, 213, 0.5); /* cream at half opacity — softens on gradient */
    --color-accent: #E63946;       /* crimson */
    --color-accent-soft: rgba(230, 57, 70, 0.4);
    --color-surface-soft: #F6F0E1; /* slightly darker cream for hover */

    --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===========================
   Global base
   Shared root sizing for both sites. Scales down on narrow screens
   so the rem-based type system reflows everywhere at once.
   =========================== */
html {
    font-size: 17px;
}

@media (max-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* ===========================
   Global link styles
   =========================== */
a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-accent-soft);
    text-decoration-skip-ink: auto;
    text-underline-offset: 0.2em;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
}

/* ===========================
   Site nav (fixed top bar)

   Layout: HOME / ABOUT on the left, EXPERIENCE / FRAGMENTS on the
   right, "Bryan Rea" centered. The center title is hidden by
   default — once the hero scrolls past, JS toggles
   .site-nav--title-visible and the small "Bryan Rea" mark flies in.
   On pages without a hero (post pages, subpages), the title shows
   immediately via JS adding the class on load.
   =========================== */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background-color: rgba(252, 248, 238, 0.85);
    backdrop-filter: saturate(160%) blur(8px);
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid transparent;
    z-index: 100;
    transition: border-color 0.3s ease;
    padding: 0 32px;
}

.site-nav--scrolled {
    border-bottom-color: var(--color-rule);
}

.site-nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    height: 100%;
}

.site-nav__group {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.site-nav__group--left {
    grid-column: 1;
    justify-self: start;
}

.site-nav__group--right {
    grid-column: 3;
    justify-self: end;
}

.site-nav__group a {
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.15s ease;
}

.site-nav__group a:hover {
    color: var(--color-accent);
}

/* Brand title that flies in on scroll. */
.site-nav__title {
    grid-column: 2;
    justify-self: center;
    font-family: var(--font-serif);
    font-style: normal;
    font-variation-settings: "opsz" 144;
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: -0.015em;
    color: var(--color-ink);
    text-decoration: none;
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
        color 0.15s ease;
    pointer-events: none;
}

.site-nav--title-visible .site-nav__title {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.site-nav__title:hover {
    color: var(--color-accent);
}

/* ===========================
   Responsive nav
   =========================== */
@media (max-width: 768px) {
    .site-nav {
        padding: 0 16px;
    }

    .site-nav__group {
        gap: 1rem;
    }

    .site-nav__group a {
        font-size: 0.72rem;
        letter-spacing: 0.1em;
    }

    .site-nav__title {
        display: none;
    }
}

/* ===========================
   Background — animated gradient blobs + noise overlay
   Fixed behind all content on every page.
   =========================== */
.background {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--color-bg);
    overflow: hidden;
}

.circle {
    position: absolute;
    width: 80vmin;
    height: 80vmin;
    border-radius: 50%;
    filter: blur(20vmin);
    opacity: 0.55;
    will-change: transform;
}

/* Warm peach into crimson */
.circle-1 {
    background: radial-gradient(circle at 70% 30%, #f4a88c, #e63946);
    top: 20%;
    left: 25%;
    animation: drift-1 64s ease-in-out infinite;
}

/* Soft amber into terracotta */
.circle-2 {
    background: radial-gradient(circle at 0% 100%, #f5c99b, #c97a66);
    top: 55%;
    left: -5%;
    animation: drift-2 82s ease-in-out infinite;
}

/* Different durations and waypoints keep the blobs from ever syncing. */
@keyframes drift-1 {
    0%   { transform: translate(0vw, 0vh) scale(1); }
    20%  { transform: translate(-12vw, 8vh) scale(1.05); }
    45%  { transform: translate(10vw, 16vh) scale(0.97); }
    70%  { transform: translate(18vw, -6vh) scale(1.03); }
    100% { transform: translate(0vw, 0vh) scale(1); }
}

@keyframes drift-2 {
    0%   { transform: translate(0vw, 0vh) scale(1); }
    25%  { transform: translate(18vw, -10vh) scale(1.04); }
    50%  { transform: translate(8vw, 14vh) scale(0.96); }
    75%  { transform: translate(-10vw, 6vh) scale(1.06); }
    100% { transform: translate(0vw, 0vh) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .circle-1,
    .circle-2 {
        animation: none;
    }
}

.noise {
    position: absolute;
    inset: 0;
    background-image: url("../img/noise.png");
    background-repeat: repeat;
    opacity: 0.25;
    mix-blend-mode: overlay;
}