/* ===================================================================
   NOW VISITING — the header's second row (js/now-visiting.js, 2026-10-25).
   Demo of record: /static/home-store-v2-preview.html.

   The header row itself grows from 72px to 80px (--hdr-row, "a little more
   space"), and while there's something to say the ticker hangs under it the
   way the Boost Flight strip does. Everything below the header lays out from
   --header-height, so raising it here moves every tab down; the header box
   keeps its own row height. With a boost running too, the flight strip sits
   under the ticker.
   =================================================================== */
:root { --hdr-row: 80px; --nv-h: 46px; }
body { --nv-cur: 0px; --header-height: calc(var(--hdr-row) + var(--nv-cur)); }
body.nv-on { --nv-cur: var(--nv-h); }
body.boost-flight { --header-height: calc(var(--hdr-row) + var(--nv-cur) + var(--bf-h)); }
body .currency-header,
body.boost-flight .currency-header { height: calc(var(--hdr-row) + var(--safe-top, 0px)); }
body.nv-on .bf-strip { top: calc(100% + var(--nv-cur)); }

.nv-strip {
    position: absolute; left: 0; right: 0; top: 100%;
    height: 0; overflow: hidden;
    padding: 0 14px;
    background: inherit;
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    transition: height .45s cubic-bezier(.2, .9, .25, 1);
}
body.nv-on .nv-strip { height: var(--nv-h); }
.nv-tick {
    display: flex; align-items: stretch; width: 100%; height: 34px; margin: 0; padding: 0;
    border: 0; border-radius: 10px; overflow: hidden; background: #14202b; cursor: pointer; text-align: left;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 2px 6px rgba(0, 0, 0, .12);
}
.nv-lb {
    flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px;
    background: #FFD93D; color: #14202b;
    font: 800 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em;
}
.nv-lb i { width: 7px; height: 7px; border-radius: 50%; background: #e74c3c; animation: nv-blink 1.4s ease-in-out infinite; }
@keyframes nv-blink { 50% { opacity: .25; } }
.nv-vw {
    flex: 1; position: relative; overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.nv-run { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; white-space: nowrap;
    animation: nv-run var(--nv-dur, 16s) linear infinite; }
.nv-run span { padding-right: 46px; font: 700 13px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em;
    color: #ffcf4a; text-shadow: 0 0 6px rgba(255, 190, 40, .55); }
.nv-run span em { font-style: normal; color: #f4f1ea; opacity: .75; }
@keyframes nv-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .nv-run { animation: none; }
    .nv-lb i { animation: none; }
}
