/* ------------------------------------------------------------- Space slide ---
   Epic onfiremobile-zjzga. Contract: docs/PRD/displays/CONTRACT-slide-settings.md
   §space. Every class here is .ns-sp*. The globe (globe.js) paints its own
   canvases inside .ns-sp-stage; this file only positions the chrome over it.

   Sizes are clamp()/vmin so one layout reads on a 1280x720 Pi panel and on a
   4K wall. Motion is opacity only: the stage fades between views with the
   house ease-out (cubic-bezier(0.33, 1, 0.68, 1)), never linear. */

.ns-sp {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    isolation: isolate;
}

.ns-sp-stage {
    position: absolute;
    inset: 0;
    opacity: 1;
    transition: opacity 700ms cubic-bezier(0.33, 1, 0.68, 1);
}

.ns-sp-stage.ns-sp-fade { opacity: 0; }

/* Caption: bottom-left, over a soft scrim so it reads on the lit limb too. */
.ns-sp-cap {
    position: absolute;
    left: clamp(20px, 4vmin, 64px);
    bottom: clamp(20px, 4vmin, 64px);
    max-width: min(80%, 90ch);
    z-index: 2;
    pointer-events: none;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}

.ns-sp-title {
    font-size: clamp(28px, 5.2vmin, 84px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.ns-sp-sub {
    margin-top: clamp(4px, 0.8vmin, 12px);
    font-size: clamp(14px, 2.1vmin, 32px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    font-variant-numeric: tabular-nums;
}

/* Which view of N: small pills, top-right. */
.ns-sp-dots {
    position: absolute;
    top: clamp(20px, 4vmin, 64px);
    right: clamp(20px, 4vmin, 64px);
    display: flex;
    gap: clamp(6px, 0.9vmin, 14px);
    z-index: 2;
    pointer-events: none;
}

.ns-sp-dot {
    width: clamp(8px, 1.1vmin, 16px);
    height: clamp(8px, 1.1vmin, 16px);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    transition: width 500ms cubic-bezier(0.33, 1, 0.68, 1), background-color 500ms cubic-bezier(0.33, 1, 0.68, 1);
}

.ns-sp-dot.on {
    width: clamp(22px, 3vmin, 44px);
    background: #FFCE54;
}

/* Live ISS readout, bottom-right. A pill, like every chip in the app. */
.ns-sp-iss {
    position: absolute;
    right: clamp(20px, 4vmin, 64px);
    bottom: clamp(20px, 4vmin, 64px);
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.1vmin, 16px);
    padding: clamp(8px, 1.1vmin, 16px) clamp(14px, 2vmin, 28px);
    border-radius: 999px;
    background: rgba(12, 16, 24, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: clamp(13px, 1.8vmin, 26px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    z-index: 2;
    pointer-events: none;
}

.ns-sp-iss[hidden] { display: none; }

.ns-sp-iss-dot {
    width: clamp(8px, 1.1vmin, 14px);
    height: clamp(8px, 1.1vmin, 14px);
    border-radius: 50%;
    background: #FF6B1F;
    box-shadow: 0 0 0 0 rgba(255, 107, 31, 0.6);
    animation: ns-sp-ping 2s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}

@keyframes ns-sp-ping {
    0%   { box-shadow: 0 0 0 0 rgba(255, 107, 31, 0.6); }
    100% { box-shadow: 0 0 0 clamp(8px, 1.4vmin, 18px) rgba(255, 107, 31, 0); }
}

/* Backdrop-filter is a real cost on the Pi; the low tier drops it. */
.ns-sp[data-tier="low"] .ns-sp-iss,
.ns-sp[data-tier="fallback"] .ns-sp-iss {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(12, 16, 24, 0.82);
}

/* Portrait: the globe is lifted (SPACE_PORTRAIT_CENTER_Y) and the caption
   and ISS chip stack in the bottom band, chip under the caption, both left
   aligned, so neither sits on the disc or on each other. */
@media (orientation: portrait) {
    .ns-sp-cap { max-width: 90%; bottom: clamp(72px, 12vmin, 140px); }
    .ns-sp-iss { right: auto; left: clamp(20px, 4vmin, 64px); }
}

@media (prefers-reduced-motion: reduce) {
    .ns-sp-stage, .ns-sp-dot { transition: none; }
    .ns-sp-iss-dot { animation: none; }
}