/* =====================================================================
   SKY-GLASS — the site-wide light theme (2026-07-10, Pete's direction)

   One fixed light-orbit scene now sits behind every page, with frosted
   glass surfaces floating over it — the same visual language as the
   Living Résumé. Two pages keep their own scenery and hide this layer:
   the Experience film (its own cinematic backdrops) and the résumé
   route (it already paints an identical sky of its own).

   This file loads AFTER style.css and overrides the flat light theme.
   ===================================================================== */

.site-sky {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 5%) 0%, rgb(246 249 255 / 2%) 52%, rgb(228 238 255 / 10%) 100%),
        url("../images/background-templates/2509b8db-4281-468c-a2cf-dba20ac3268b.png") center / cover no-repeat,
        #f6f8fc;
}

@media (max-width: 48rem) {
    .site-sky {
        background:
            linear-gradient(180deg, rgb(255 255 255 / 4%) 0%, rgb(236 243 255 / 8%) 100%),
            url("../images/background-templates/2509b8db-4281-468c-a2cf-dba20ac3268b.png") center / 100% 100% no-repeat,
            #f6f8fc;
    }
}

body.cinematic-home-page .site-sky,
body.living-resume-v2-page .site-sky {
    display: none;
}

/* Let the sky show through the page itself. */
body.slate-light,
body.slate-light .main-content {
    background: transparent;
}

/* ---------------------------------------------------------------------
   Shared glass tokens — the same recipe the résumé bubbles use.
   Components below opt in via the utility custom properties.
   --------------------------------------------------------------------- */
body.slate-light {
    --glass-bg: linear-gradient(135deg, rgb(255 255 255 / 66%), rgb(241 248 255 / 54%));
    --glass-bg-strong: linear-gradient(135deg, rgb(255 255 255 / 82%), rgb(244 249 255 / 72%));
    --glass-border: 1px solid rgb(255 255 255 / 78%);
    --glass-radius: 1.25rem;
    --glass-shadow:
        0 1.5rem 4rem rgb(17 44 78 / 14%),
        inset 0 0 0 0.3rem rgb(255 255 255 / 30%);
    --glass-blur: blur(15px) saturate(1.2);
}

/* ---------------------------------------------------------------------
   Frosted surfaces: the site's card families become the résumé's glass.
   Colors, borders-radius accents, and inner layouts stay untouched —
   only the panel surface changes.
   --------------------------------------------------------------------- */
body.slate-light .ps-card,
body.slate-light .preview-card,
body.slate-light .preview-main,
body.slate-light .preview-ghost,
body.slate-light .ps-project,
body.slate-light .ps-ov-block,
body.slate-light .ps-feature,
body.slate-light .ps-metric,
body.slate-light .ps-step,
body.slate-light .ct-card,
body.slate-light .iv-card,
body.slate-light .iv-mode,
body.slate-light .platform-page__card,
body.slate-light .fun-fact-card,
body.slate-light .story-card,
body.slate-light .work-hero-panel,
body.slate-light .work-project-panel,
body.slate-light .bd-shield,
body.slate-light .ts-heat,
body.slate-light .ts-group,
body.slate-light .pf-topic,
body.slate-light .pf-side > *,
body.slate-light .projects-section {
    background: var(--glass-bg);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* The profile band + tab strip float as one frosted header piece. */
body.slate-light .profile-header {
    background: var(--glass-bg-strong);
    border-bottom: var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

body.slate-light .profile-tabs {
    background: rgb(252 254 255 / 62%);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* The Slate routes use the same compact profile subheader as every public
   Slate page. The in-page Slate Feed/My Slate/Daily tabs remain a separate
   contextual control below; this rule only standardizes the global row. */
body.slate-light.the-slate-page .profile-tabs {
    position: static;
    width: 100%;
    margin: 0;
    background: linear-gradient(180deg, rgb(236 246 255 / 70%), rgb(247 251 255 / 88%));
    border-top: 1px solid rgb(139 169 206 / 26%);
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.slate-light.the-slate-page .profile-tabs::before,
body.slate-light.the-slate-page .profile-tabs::after {
    display: none;
}

body.slate-light.the-slate-page .profile-tabs__inner {
    position: relative;
    width: min(calc(100% - 3rem), 68rem);
    min-height: 2.45rem;
    justify-content: center;
    padding: 0 0.75rem;
    border: 0;
}

body.slate-light.the-slate-page .profile-tabs__list {
    flex: 0 1 auto;
    width: 100%;
    justify-content: center;
    gap: clamp(1rem, 2.3vw, 2.4rem);
}

body.slate-light.the-slate-page .profile-tab {
    min-height: 2.45rem;
    padding: 0 0.05rem;
    color: #43546c;
    font-size: 0.78rem;
    font-weight: 680;
    letter-spacing: 0.01em;
}

body.slate-light.the-slate-page .profile-tab::after {
    height: 2px;
    background: #203767;
}

body.slate-light.the-slate-page .profile-tab:hover,
body.slate-light.the-slate-page .profile-tab:focus-visible,
body.slate-light.the-slate-page .profile-tab[aria-current="page"] {
    color: #203767;
}

body.slate-light.the-slate-page .profile-tabs__ask-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    min-height: 2rem;
    margin-left: 0;
    padding: 0 0.85rem;
    font-size: 0.76rem;
    transform: translateY(-50%);
}

@media (max-width: 743px) {
    body.slate-light.the-slate-page .profile-tabs__inner {
        width: 100%;
        min-height: 2.35rem;
        padding: 0 0.75rem;
        overflow: hidden;
    }

    body.slate-light.the-slate-page .profile-tabs__list {
        justify-content: flex-start;
        gap: 1.25rem;
        overflow-x: auto;
        scroll-padding-inline: 0.75rem;
    }

    body.slate-light.the-slate-page .profile-tab {
        min-height: 2.35rem;
        font-size: 0.75rem;
    }
}

/* Headings that sit directly on the sky get the résumé's soft halo so
   they hold up over clouds and rock. Invisible on white cards. */
body.slate-light h1,
body.slate-light h2,
body.slate-light h3,
body.slate-light .section-eyebrow {
    text-shadow: 0 1px 12px rgb(255 255 255 / 55%);
}

/* Scroll reveals for the showcase pages (sky-reveal.js). */
body.sky-reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(1.75rem);
}

body.sky-reveal-on [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 620ms ease,
        transform 620ms cubic-bezier(0.22, 0.8, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
    body.sky-reveal-on [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Footer floats as glass instead of a solid slab. */
body.slate-light .footer {
    background: rgb(250 253 255 / 72%);
    border-top: var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* Soft daylight haze behind full-sky opening titles so serif heroes
   stay readable over the busy lower half of the scene. */
.sky-haze {
    position: relative;
}

.sky-haze::before {
    position: absolute;
    inset: -12% -18%;
    z-index: -1;
    background: radial-gradient(60% 58% at 50% 44%,
        rgb(243 249 255 / 90%) 0%,
        rgb(243 249 255 / 66%) 48%,
        rgb(243 249 255 / 0%) 80%);
    content: "";
    pointer-events: none;
}

/* =====================================================================
   LAYERED INK & SIGNAL GOLD overrides (PS-THEME-002, 2026-07-16)
   When the member toggles the dark theme (body[data-theme="dark"]), the
   blue-orbit sky becomes the near-black page canvas with a whisper of
   gold atmosphere, and every frosted-glass card becomes a planted dark
   card one layer lighter than the canvas: solid graphite, 1px hairline,
   deep soft shadow. The light theme above is untouched.
   ===================================================================== */
body[data-theme="dark"] .site-sky {
    background:
        radial-gradient(70rem 36rem at 80% -6rem, rgb(216 169 40 / 5%), transparent 60%),
        linear-gradient(180deg, #0a1730 0%, #0e1d3a 40%, #0e1d3a 100%);
}

@media (max-width: 48rem) {
    body[data-theme="dark"] .site-sky {
        background: #0e1d3a;
    }
}

body[data-theme="dark"].slate-light {
    --glass-bg: #1a2c4f;
    --glass-bg-strong: #223a66;
    --glass-border: 1px solid #2e4573;
    --glass-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 14px 34px rgb(0 0 0 / 40%);
    --glass-blur: none;
}

/* Profile band + tab strip: layered graphite pieces under the ink header
   — black on black, separated by hairlines and elevation. */
body[data-theme="dark"].slate-light .profile-header {
    background: #132444;
    border-bottom: 1px solid #253c66;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-theme="dark"].slate-light .profile-tabs {
    background: rgb(16 31 60 / 96%);
    border-bottom: 1px solid #253c66;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Community (the-slate) sub-header: same graphite strip. */
body[data-theme="dark"].slate-light.the-slate-page .profile-tabs {
    background: linear-gradient(180deg, rgb(16 31 60 / 92%), rgb(14 29 58 / 98%));
    border-top: 1px solid #24375c;
}

body[data-theme="dark"].slate-light.the-slate-page .profile-tab {
    color: #9aa5b8;
}

body[data-theme="dark"].slate-light.the-slate-page .profile-tab::after {
    background: #d8a928;
}

body[data-theme="dark"].slate-light.the-slate-page .profile-tab:hover,
body[data-theme="dark"].slate-light.the-slate-page .profile-tab:focus-visible,
body[data-theme="dark"].slate-light.the-slate-page .profile-tab[aria-current="page"] {
    color: #e3b83a;
}

/* Heading halos exist to fight the busy sky photo — flat ink needs none. */
body[data-theme="dark"].slate-light h1,
body[data-theme="dark"].slate-light h2,
body[data-theme="dark"].slate-light h3,
body[data-theme="dark"].slate-light .section-eyebrow {
    text-shadow: none;
}

/* Footer is the deepest well band (style.css owns its colors). */
body[data-theme="dark"].slate-light .footer {
    background: #081426;
    border-top: 1px solid #253c66;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-theme="dark"] .sky-haze::before {
    background: none;
}