/* Public Website Styles */

/* ============================================================================
   Theme tokens — light (:root) and dark (.dark on <html>).
   Exposed to Tailwind as color names via the config in public.html, so
   utilities like bg-surface / text-ink / border-line flip with the theme.
   ============================================================================ */
:root {
    --bg: #fafaf9;
    --bg-alt: #f4f1ec;
    --surface: #ffffff;
    --text: #1c1917;
    --muted: #6b6259;
    --faint: #a39a8f;
    --border: #e7e2da;
    --accent: #b45309;
    --accent-soft: rgba(180, 83, 9, 0.10);
    --nav-bg: rgba(250, 250, 249, 0.85);
    /* "inv" = always-dark surfaces (the Writing section) — dark in both themes */
    --inv-bg: #1c1917;
    --inv-surface: #262220;
    --inv-text: #f7f3ee;
    --inv-muted: #a89e93;
    --inv-border: #3a332c;
}

.dark {
    --bg: #15120f;
    --bg-alt: #1b1712;
    --surface: #211c17;
    --text: #f4efe8;
    --muted: #a89e91;
    --faint: #6f665c;
    --border: #332c25;
    --accent: #f0a336;
    --accent-soft: rgba(240, 163, 54, 0.14);
    --nav-bg: rgba(21, 18, 15, 0.85);
    --inv-bg: #0d0b09;
    --inv-surface: #1a1611;
    --inv-text: #f4efe8;
    --inv-muted: #a89e91;
    --inv-border: #2c2620;
}

/* Typography */
.font-display {
    font-family: 'Fraunces', Georgia, serif;
}

.font-body {
    font-family: 'Source Sans 3', system-ui, sans-serif;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(2deg); }
}

@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-4%, -6%); }
    30% { transform: translate(2%, -8%); }
    50% { transform: translate(8%, 5%); }
    70% { transform: translate(6%, 3%); }
    90% { transform: translate(-1%, 4%); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-float {
    animation: float 7s ease-in-out infinite;
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* Grain overlay effect */
.grain {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

/* Perf: 120% layer (was 200% = 4x the composited area), keyframes capped
   inside the 10% overhang; hidden on small screens. */
.grain::before {
    content: '';
    position: fixed;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    animation: grain 8s steps(10) infinite;
}

@media (max-width: 767px) {
    .grain { display: none; }
}

/* Smooth anchor scrolling — only for users who haven't opted out of motion */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Respect reduced-motion: stop all decorative animation */
@media (prefers-reduced-motion: reduce) {
    .grain::before,
    .animate-float {
        animation: none;
    }
}

/* Skip layout/paint of offscreen sections until they approach the viewport */
#journey,
#projects,
#interests,
#writing,
#contact {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
}

/* Skeleton loading animation — theme-aware via tokens */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--border) 25%, var(--bg-alt) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}