/* Scroll-revealed controls outside the card's flip target. */
.background-controls { position: fixed; top: max(20px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 8px; z-index: 30; transform:translateY(var(--controls-offset, 0px)); }
.background-controls[hidden], .background-pause[hidden] { display: none; }
.background-toggle { --option-width:48px; --option-height:44px; position:relative; display:flex; padding:3px; border:1px solid rgba(255,255,255,.3); border-radius:999px; background:linear-gradient(145deg,#ffffff24,#ffffff08); box-shadow:inset 0 1px 1px #ffffff33,0 4px 18px #0003; backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35); cursor:pointer; }
.background-toggle::before { content:''; box-sizing:border-box; position:absolute; top:3px; left:3px; width:var(--option-width); height:var(--option-height); border:1px solid #ffffff60; border-radius:999px; background:linear-gradient(145deg,#ffffff40,#ffffff10); box-shadow:inset 0 1px 2px #ffffff60,0 2px 7px #0003; transform:translateX(0); transition:transform .38s cubic-bezier(.22,.8,.25,1); pointer-events:none; }
html[data-background-mode="photos"] .background-toggle::before { transform:translateX(var(--option-width)); }
.background-toggle button, .background-pause { border:1px solid transparent; color:#e5e5e5; background:transparent; cursor:pointer; border-radius:999px; display:grid; place-items:center; padding:0; }
.background-toggle button { position:relative; width:var(--option-width); height:var(--option-height); border-radius:999px; }
.background-toggle button svg { opacity:.65; transition:opacity .25s; }
.background-toggle button[aria-pressed="true"] svg { opacity:1; }
.background-toggle button:focus-visible,.background-pause:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.background-toggle svg { width: 29px; height: 29px; }
.background-pause { width: 44px; height: 44px; background: #16191e70; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color:#ffffff40; font-size: 17px; }
.background-pause svg { width:26px; height:26px; fill:currentColor; display:block; }
.background-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#photoBackground { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0; background:#10141c; transition:opacity 1.8s ease; overflow:hidden; }
#photoBackground.is-ready { opacity:1; }
.photo-background-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--photo-desktop-position,50% 50%); opacity:0; transition:opacity 1.8s ease-in-out; }
@keyframes photo-drift {
    from { transform: translate(var(--photo-pan-x), var(--photo-pan-y)) scale(1.06); }
    to { transform: translate(var(--photo-pan-end-x), var(--photo-pan-end-y)) scale(1.06); }
}
.photo-background-image { animation: photo-drift 16s linear both; animation-play-state: paused; }
html[data-photo-motion="running"] .photo-background-image { animation-play-state: running; }
.photo-background-image.is-visible { opacity:1; }
#photoBackground::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.17); }
html[data-background-mode="photos"] #solar-system, html[data-background-mode="photos"] #stars, html[data-background-mode="photos"] #profile-webgl-scene { visibility:hidden; }
html[data-background-mode="photos"] #solar-system * { animation-play-state:paused !important; }
html[data-background-mode="photos"] .card, html[data-background-mode="photos"] .resume-front { background-color:rgba(14,18,24,.58); }
/* Override the first-paint profile tint while its planet renderer is paused. */
html[data-background-mode="photos"] #profileCard { background:rgba(14,18,24,.58) !important; }
/* Reserve room for the switch when it could overlap the centered card. */
/* 800px card + two 180px control gutters, plus scrollbar/safe breathing room. */
@media (max-width: 1200px) { body:has(.background-controls:not([hidden])) { padding-top:92px; } }
@media (max-width: 600px) {
    .background-controls { top: max(16px, env(safe-area-inset-top)); left:max(16px, env(safe-area-inset-left)); }
    .background-toggle { --option-width:52px; }
    body:has(.background-controls:not([hidden])) { padding-top:calc(88px + env(safe-area-inset-top,0px)); }
    .photo-background-image { object-position:var(--photo-mobile-position,50% 50%); }
}
@media (prefers-reduced-motion:reduce) { .photo-background-image { animation:none; transform:none; } #photoBackground,.photo-background-image,.background-toggle::before,.background-toggle button svg { transition:none; } }
@media print { .background-controls,#photoBackground { display:none !important; } }

/* Stable mobile backdrop: large viewport covers hidden browser controls without
   recropping/recentering each time the visible viewport changes. Body stays free. */
@media (hover:none) and (pointer:coarse) {
    body::before, html #solar-system, html #stars, html #photoBackground, html #profile-webgl-scene {
        top:calc(-1 * env(safe-area-inset-top, 0px)); bottom:auto; width:100%;
        height:calc(100lvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
    }
}

/* Compact desktop surfaces share the cards' pre-baked refraction material. */
@media not all and (hover:none) and (pointer:coarse) {
    #backgroundToggle, #backgroundPause, #christmas-countdown, #view-counter {
        background:rgba(198,215,238,.035);
        border:1px solid rgba(210,230,250,.3);
        box-shadow:0 10px 26px rgba(0,0,0,.23), inset 0 1px 1px rgba(230,243,255,.2);
    }
    html[data-background-mode="photos"] :is(#backgroundToggle, #backgroundPause, #christmas-countdown, #view-counter) { background:rgba(14,18,24,.58); }
    :is(#backgroundToggle, #backgroundPause, #christmas-countdown, #view-counter)[data-homepage-glass] {
        backdrop-filter:var(--homepage-glass-filter);
        -webkit-backdrop-filter:var(--homepage-glass-filter);
    }
}

/* Footer information uses the main cards' shape, tint, and mobile material. */
html :is(#christmas-countdown, #view-counter), html #view-counter:hover {
    --footer-tint:rgba(198,215,238,.035);
    background:var(--footer-tint);
    border-radius:24px;
    min-height:56px;
    padding:12px 20px;
    max-width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 26px rgba(0,0,0,.23);
    transition:box-shadow .25s ease;
}
@media (hover:none) and (pointer:coarse) {
    html :is(#christmas-countdown, #view-counter), html #view-counter:hover {
        --footer-tint:rgba(255,255,255,.05);
        backdrop-filter:blur(4px) saturate(100%);
        -webkit-backdrop-filter:blur(4px) saturate(100%);
        box-shadow:0 8px 24px rgba(0,0,0,.28);
    }
}
html[data-background-mode="photos"] :is(#christmas-countdown, #view-counter),
html[data-background-mode="photos"] #view-counter:hover { --footer-tint:rgba(14,18,24,.58); background:var(--footer-tint); }