body {
    background: var(--lc-bg);
    color: var(--lc-text);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color var(--lc-duration-med) var(--lc-ease),
                color var(--lc-duration-med) var(--lc-ease);
}

/* Aurora gradient on a fixed pseudo-element - same visual as `background-attachment: fixed` but
   composites into ONE cached GPU layer instead of forcing viewport recomposition every scroll
   frame. `background-attachment: fixed` is a well-known mobile scroll perf killer. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--lc-body-bg-image);
    pointer-events: none;
}

/* Themed scrollbars. Standards-based (Firefox + Chromium 121+) plus a WebKit fallback for
   older Chromium/Safari. Track stays transparent so the aurora bg reads through; thumb uses
   the accent so it swaps automatically with the theme. */
html {
    scrollbar-color: var(--lc-accent) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--lc-accent) 70%, transparent);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--lc-accent-hover);
    background-clip: padding-box;
    border: 2px solid transparent;
}

h1 {
    background: linear-gradient(135deg, var(--lc-text) 20%, var(--lc-accent-hover) 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

main {
    padding: 1.5rem 0 3rem;
}

/* Home page is full-bleed - its own hero + sections + optional final CTA carry the vertical
   rhythm, so main's padding would just add unused space (especially at the bottom when the
   authed-only branch renders nothing). Applies at every viewport. */
main:has(> .lc-home) {
    padding: 0;
}

/* When the sidebar is rendered (authorized users) at the desktop breakpoint, shift the main
   content right so it doesn't sit underneath the fixed sidebar. Selector uses the general
   sibling combinator because LcNavMenu renders <aside> before <main> in MainLayout. */
@media (min-width: 992px) {
    .lc-sidebar ~ main {
        padding-left: calc(var(--lc-sidebar-width) + 1.5rem);
        padding-right: 1.5rem;
    }

    /* Home page owns its own gutters via full-bleed feature sections - drop main's. */
    .lc-sidebar ~ main:has(> .lc-home) {
        padding: 0 0 0 var(--lc-sidebar-width);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}