/* ============================================================
   GLOBAL BASE — theme-native defaults for the whole app.
   Master palette tokens live in wwwroot/themes/serbres.css.
   Per-page / per-brand looks live in their own files.
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}
html, body {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    background-color: #0b0b0d;
    color: #e9ebef;
    /* slim themed scrollbar (Firefox) */
    scrollbar-color: #3a3a42 transparent;
    scrollbar-width: thin;
}

/* slim themed scrollbar (WebKit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0b0b0d; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3a3a42, #25252b);
    border: 2px solid #0b0b0d;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #50505a, #34343c); }

/* marble-cut selection */
::selection {
    background: rgba(199, 203, 210, 0.28);
    color: #f2f4f7;
    text-shadow: none;
}

a { color: #c7cbd2; text-underline-offset: 3px; }

h1:focus, [tabindex="-1"]:focus { outline: none; }

/* ---- scroll-reveal (progressive enhancement) ----
   Only hides content once atmosphere.js has marked the document ready,
   so the page is fully visible if JS never runs. Disabled for users
   who prefer reduced motion. */
html.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
html.reveal-ready [data-reveal].reveal-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    html.reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
    html { scroll-behavior: auto; }
}

/* ---- reading-progress rail (top of viewport) ----
   A hair-thin silver line that fills as you read. JS sets --read.
   Hidden by default; .is-active is added only on long pages. */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 80;
    transform: scaleX(var(--read, 0));
    transform-origin: 0 50%;
    background: linear-gradient(90deg, rgba(199, 203, 210, 0.35), #f2f4f7 60%, rgba(199, 203, 210, 0.35));
    box-shadow: 0 0 10px rgba(242, 244, 247, 0.45);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.read-progress.is-active { opacity: 1; }

/* themed framework error fallbacks */
.blazor-error-boundary {
    background: #2a1416;
    color: #f2d8d8;
    padding: 1rem 1.25rem;
    font-family: system-ui, sans-serif;
}
.blazor-error-boundary::after { content: "An error has occurred."; }