/* ══════════════════════════════════════════════════════════════════
   VISION SINDH — HOME · THE DESCENT (2.5D) + THE DROP RAIL
   Owned: public/css/home-space.css · public/js/home-space.js
   Nothing here reaches #sindhu-hero / .hero-* / .powder-* / .sv-*.

   CONTRACT — the file is written STATIC FIRST.
   Everything above the `html.vs-space` fence is the honest page:
   real <img> and real text, an editorial stack that reads with no
   JS, no WebGL, and with prefers-reduced-motion. `vs-space` is set
   by home-space.js only when JS ran AND motion is allowed; only then
   does the scene become a pinned camera dolly and the rail become a
   scroll-driven strip.

   ONE WebGL context on this page belongs to the hero. Nothing below
   allocates a canvas: it is perspective + preserve-3d + translate3d,
   composited transforms only.
   ══════════════════════════════════════════════════════════════════ */

.dig,
.rail {
  --sp-ember: #d9611f;
  --sp-bone: #e9e4da;
  --sp-ink: #0d0c0a;
  --sp-ash: #7a746a;
  --sp-slow: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════════════════════════════════════════════════════
   1 — THE DESCENT · static composition (the page without JS)
   ══════════════════════════════════════════════════════════════════ */

.dig {
  position: relative;
  background: #0d0c0a;
  color: var(--sp-bone);
  --paper: #0d0c0a; --paper-2: #131110;
  --ink: #e9e4da; --ink-soft: #b5aea1; --ash: #8b8478; --line: #2e2a25;
  padding-block: clamp(46px, 8vh, 96px) 0;
}
/* the hero ends in the ink and the dig begins in it — one continuous
   dark. A single seam gradient keeps the join from banding. */
.dig::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140px;
  background: linear-gradient(to bottom, #131110, #0d0c0a);
  pointer-events: none;
}
.dig__head { position: relative; z-index: 2; }
.dig__lede { margin-top: 16px; color: var(--ink-soft); }

.dig__world {
  display: grid;
  gap: clamp(46px, 8vh, 92px);
  padding-block: clamp(40px, 7vh, 84px);
}
.dig__stratum {
  display: grid;
  gap: 22px;
  padding-inline: var(--gutter);
  max-width: 1480px; margin-inline: auto; width: 100%;
}
/* decorative depth furniture has no job in the static page */
.dig__l--glyph,
.dig__l--type,
.dig__l--chip,
.dig__l--band,
.dig__hud { display: none; }

.dig__cap-num { color: var(--ash); display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.dig__cap-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 7vw, 66px); line-height: 1;
  margin: 10px 0 0;
}
.dig__cap-name span { color: var(--ash); font-size: 0.5em; margin-left: 0.4em; }
.dig__cap-desc { color: var(--ink-soft); font-size: 14.5px; max-width: 40ch; margin: 12px 0 0; line-height: 1.55; }
/* a word's underline only exists once the scrub can drive it */
.dig__cap-desc .dw { position: relative; }
.dig__cap-desc .dw i { display: none; }
.dig__ribbon { display: none; }
.dig__cap-cta {
  display: inline-block; margin-top: 16px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sp-bone);
  border-bottom: 1px solid color-mix(in srgb, var(--sp-ember) 70%, transparent);
  padding-bottom: 4px;
}
@media (hover: hover) { .dig__cap-cta:hover { color: var(--sp-ember); } }

.dig__stratum .dig__l--plate { margin: 0; }
.dig__stratum .dig__l--plate figure { margin: 0; position: relative; }
.dig__l--plate img, .dig__l--plate video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
  background: #17140f;
}
.dig__l--plate figcaption {
  display: block; margin-top: 9px;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash);
}
/* static: the plates of a stratum sit as a row of artefacts */
@media (min-width: 640px) {
  .dig__stratum { grid-template-columns: minmax(230px, 1fr) 2fr; align-items: start; }
  .dig__stratum .dig__cap { grid-row: 1; }
  .dig__stratum .dig__l--plate { grid-row: 1; }
}
@media (max-width: 639px) {
  .dig__stratum { grid-template-columns: repeat(2, 1fr); }
  .dig__stratum .dig__cap { grid-column: 1 / -1; }
}
@media (min-width: 640px) {
  .dig__stratum { grid-template-columns: minmax(220px, 0.9fr) repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   2 — THE DROP RAIL · static composition
   A real, natively scrollable strip with scroll-snap. This is what
   ships when JS is off or motion is reduced — no fallback rendering,
   the same cards, the same order, just driven by the finger.
   ══════════════════════════════════════════════════════════════════ */

.rail {
  position: relative;
  background: #131110;
  --paper: #131110; --paper-2: #0d0c0a;
  --ink: #e9e4da; --ink-soft: #b5aea1; --ash: #8b8478; --line: #2e2a25;
  color: var(--ink);
  padding-block: clamp(56px, 9vh, 110px);
}
.rail__head { position: relative; z-index: 2; }

.rail__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin-top: clamp(28px, 4vh, 44px);
}
.rail__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.8vw, 28px);
  padding-inline: var(--gutter);
  width: max-content;
}
.rail__end { flex: 0 0 1px; }

.rail__card {
  flex: 0 0 auto;
  width: clamp(230px, 68vw, 300px);
  scroll-snap-align: start;
  position: relative;
  display: block;
  color: inherit;
}
@media (min-width: 900px) {
  .rail__card { width: clamp(300px, 27vw, 420px); }
}
.rail__card figure {
  margin: 0; position: relative; overflow: hidden;
  background: #17140f;
}
.rail__card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform 0.8s var(--ease, ease);
}
@media (hover: hover) { .rail__card:hover img { transform: scale(1.035); } }

.rail__tick {
  position: absolute; z-index: 2; top: 10px; left: 10px;
  font-size: 10px; letter-spacing: 0.16em;
  color: var(--sp-bone);
  padding: 4px 7px;
  background: rgba(13, 12, 10, 0.55);
  border-left: 1px solid color-mix(in srgb, var(--sp-ember) 78%, transparent);
}
.rail__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-top: 13px;
}
.rail__name { font-family: var(--font-display); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.2; }
.rail__price { color: var(--ash); font-size: 11.5px; white-space: nowrap; }
.rail__hook {
  display: block; margin-top: 7px;
  color: var(--ink-soft); font-size: 12.5px; line-height: 1.5;
  max-width: 34ch;
}

.rail__meta {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  padding-inline: var(--gutter);
  margin-top: clamp(20px, 3vh, 32px);
  max-width: 1480px; margin-inline: auto;
}
.rail__idx { color: var(--ash); font-size: 11px; letter-spacing: 0.14em; }
.rail__idx b { color: var(--sp-bone); font-weight: 500; }
.rail__ticks { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; }
.rail__ticks i {
  display: block; height: 1px; flex: 1 1 auto; min-width: 8px;
  background: color-mix(in srgb, var(--sp-bone) 22%, transparent);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.rail__ticks i.on {
  background: var(--sp-ember);
  box-shadow: 0 0 9px 1px color-mix(in srgb, var(--sp-ember) 55%, transparent);
}
.rail__all {
  color: var(--sp-bone); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--sp-ember) 70%, transparent);
  padding-bottom: 3px;
}
@media (hover: hover) { .rail__all:hover { color: var(--sp-ember); } }
@media (max-width: 560px) {
  .rail__meta { flex-wrap: wrap; }
  .rail__all { order: 3; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   ▓▓▓ THE FENCE ▓▓▓  everything below needs html.vs-space, which
   home-space.js sets only when JS ran and motion is allowed.
   ══════════════════════════════════════════════════════════════════ */

/* ── 3 — THE DESCENT · pinned camera ──────────────────────────────── */

.vs-space .dig { padding-bottom: 0; }

.vs-space .dig__spacer {
  position: relative;
  height: var(--dig-road, 560vh);
}
@media (max-width: 899px) {
  .vs-space .dig__spacer { height: var(--dig-road-m, 340svh); }
}

.vs-space .dig__stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: clip;
  perspective: var(--dig-p, 1000px);
  perspective-origin: 50% 46%;
  background: radial-gradient(120% 80% at 50% 42%, #16130f 0%, #0d0c0a 62%, #080706 100%);
  contain: paint;
}

.vs-space .dig__world {
  position: absolute; inset: 0;
  display: block; gap: 0; padding: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform;
}
.vs-space .dig__stratum {
  position: absolute; inset: 0;
  display: block; gap: 0; padding: 0; max-width: none;
  transform-style: preserve-3d;
}

.vs-space .dig__l {
  position: absolute; left: 50%; top: 50%;
  margin: 0;
  backface-visibility: hidden;
  /* pin each layer's raster: without this Chrome re-rasterises every plate
     (4-gradient veil + 90px shadow) as its projected scale changes through
     the dolly — worst exactly in the PASS beat where plates go full-bleed */
  will-change: transform, opacity;
  opacity: 0;
  /* JS writes `transform` once per layout and only `opacity`/`visibility`
     per frame; the camera itself is a single write on .dig__world. */
}

.vs-space .dig__l--plate {
  width: clamp(200px, 56vmin, 520px);
}
.vs-space .dig__l--plate figure {
  margin: 0; position: relative;
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.9);
}
.vs-space .dig__l--plate figcaption { display: none; }
/* The catalogue photography is shot on a light studio sweep. Left raw it
   reads as a bright sticker floating in the ink, so every plate carries a
   fixed ink veil plus a cold rim down one edge — a lit object in a dark
   room. A `filter` would do it too, and would re-rasterise on every frame
   of the dolly; this composites. Ember stays LIGHT, added by .dig__flare. */
.vs-space .dig__l--plate figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(101deg, rgba(233, 228, 218, 0.12) 0%, rgba(233, 228, 218, 0) 22%),
    linear-gradient(to top, rgba(8, 7, 6, 0.72), rgba(8, 7, 6, 0.1) 54%),
    radial-gradient(112% 76% at 50% 42%, rgba(8, 7, 6, 0.04) 0%, rgba(8, 7, 6, 0.4) 100%),
    rgba(11, 10, 8, 0.16);
}

.vs-space .dig__l--type {
  display: block;
  width: max-content; max-width: none;
}
.vs-space .dig__l--type b {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(56px, 26vmin, 172px);
  line-height: 0.86; letter-spacing: 0.005em; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(233, 228, 218, 0.5);
}
@media (min-width: 900px) {
  .vs-space .dig__l--type b { font-size: clamp(56px, 14vmin, 172px); }
}
.vs-space .dig__l--type[data-l="l-type"] b {
  color: rgba(233, 228, 218, 0.94);
  -webkit-text-stroke: 0;
}
/* every letter of the closing name is its own object in the field */
.vs-space .dig__l--type .dc { display: inline-block; will-change: transform; }
.vs-space .dig__l--type .dc--sp { width: 0.3em; }

.vs-space .dig__l--glyph { display: block; width: max-content; }
.vs-space .dig__l--glyph b {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(150px, 80vmin, 430px);
  line-height: 0.74; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(233, 228, 218, 0.17);
}
@media (min-width: 900px) {
  .vs-space .dig__l--glyph b { font-size: clamp(150px, 38vmin, 430px); }
}

.vs-space .dig__l--chip { display: block; width: max-content; }
.vs-space .dig__l--chip span {
  display: block;
  font-size: 11px; letter-spacing: 0.17em; text-transform: uppercase;
  color: rgba(233, 228, 218, 0.62);
  padding: 7px 11px;
  border-left: 1px solid color-mix(in srgb, var(--sp-ember) 80%, transparent);
  background: rgba(13, 12, 10, 0.34);
  white-space: nowrap;
}

/* the strata boundaries — ink/dust planes the camera descends through */
.vs-space .dig__l--band {
  display: block;
  width: 300vmax; height: 132vmin;
  background:
    radial-gradient(64% 50% at 50% 50%, rgba(217, 97, 31, 0.11) 0%, rgba(217, 97, 31, 0) 64%),
    radial-gradient(120% 62% at 50% 50%, rgba(28, 24, 20, 0.94) 0%, rgba(13, 12, 10, 0.72) 42%, rgba(8, 7, 6, 0) 78%);
}
.vs-space .dig__l--band[data-l="band-1"] {
  height: 88vmin;
  background:
    radial-gradient(70% 44% at 50% 50%, rgba(217, 97, 31, 0.085) 0%, rgba(217, 97, 31, 0) 62%),
    radial-gradient(120% 50% at 50% 50%, rgba(34, 27, 21, 0.72) 0%, rgba(13, 12, 10, 0) 76%);
}

/* far layers lose their edge — aerial perspective, toggled by BAND, not
   per frame, so a filter is rasterised once and never scrubbed. */
@media (min-width: 900px) {
  .vs-space .dig__l.is-deep { filter: blur(2.4px); }
  .vs-space .dig__l.is-mid { filter: blur(0.9px); }
}

/* ── 4 — THE HUD · flat, above the world, never intersected ─────── */

.vs-space .dig__hud {
  display: block;
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
}
/* the readable band. The plates pass BEHIND this scrim, always. */
.vs-space .dig__hud::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(to top, rgba(8, 7, 6, 0.93) 0%, rgba(8, 7, 6, 0.74) 34%, rgba(8, 7, 6, 0) 100%);
}
@media (min-width: 900px) {
  .vs-space .dig__hud::before {
    left: 0; right: auto; top: 0; bottom: 0; height: auto; width: 54%;
    background: linear-gradient(to right, rgba(8, 7, 6, 0.9) 0%, rgba(8, 7, 6, 0.6) 42%, rgba(8, 7, 6, 0) 100%);
  }
}

/* ember arrives strictly as light, flaring when a plate crosses close.
   Contained, not full-frame: a 140%-viewport blended gradient was the
   PASS beat's biggest overdraw cost; gone entirely on phones. */
.vs-space .dig__flare {
  position: absolute; inset: 6% 12%;
  opacity: 0;
  background: radial-gradient(38% 38% at 42% 48%,
    rgba(255, 186, 120, 0.38) 0%,
    rgba(217, 97, 31, 0.18) 32%,
    rgba(217, 97, 31, 0) 68%);
}
@media (max-width: 900px) { .vs-space .dig__flare { display: none; } }

.vs-space .dig__cap {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: calc(6svh + env(safe-area-inset-bottom, 0px));
  max-width: 40ch;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.62s var(--sp-slow), transform 0.8s var(--sp-slow);
}
@media (min-width: 900px) {
  .vs-space .dig__cap {
    right: auto; width: min(38ch, 40vw);
    bottom: auto; top: 50%; transform: translate3d(0, calc(-50% + 16px), 0);
  }
}
.vs-space .dig__cap.is-on { opacity: 1; transform: translate3d(0, 0, 0); pointer-events: auto; }
@media (min-width: 900px) {
  .vs-space .dig__cap.is-on { transform: translate3d(0, -50%, 0); }
}
.vs-space .dig__cap-name { font-size: clamp(28px, 6.2vmin, 62px); }
.vs-space .dig__cap-desc { font-size: 13.5px; max-width: 34ch; }

/* ── the scrubbed sentence ───────────────────────────────────────
   Each word is dim until the scrub reaches it, then lifts to bone
   with an ember hairline running under it. --w is the only thing
   JS writes, and it defaults to 1 — so a stalled loop leaves the
   sentence fully lit, never half-erased. */
.vs-space .dig__cap-desc .dw {
  position: relative; display: inline-block;
  opacity: calc(0.36 + 0.64 * var(--w, 1));
}
.vs-space .dig__cap-desc .dw i {
  display: block; position: absolute;
  left: 0; right: 0; bottom: -2px; height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--sp-ember) 85%, transparent),
    color-mix(in srgb, var(--sp-ember) 30%, transparent));
  box-shadow: 0 0 7px 0 color-mix(in srgb, var(--sp-ember) 45%, transparent);
  transform: scaleX(var(--w, 0));
  transform-origin: 0 50%;
  opacity: calc(var(--w, 0) * (1 - var(--w, 0)) * 3.4);
}

/* ── the sideways type ribbon ────────────────────────────────────
   The seam between strata: one verbatim line, wider than any
   viewport, drawn across the frame while the camera plunges through
   the dust layer. It is FLAT — above the world, never in it — so it
   stays crisp and can never be intersected by a plate. */
.vs-space .dig__ribbon {
  display: block; position: absolute;
  left: 0; right: 0; top: 50%;
  height: max-content;
  transform: translate3d(0, -50%, 0);
  opacity: 0;
  /* The MASK stays with the frame while the line travels through it, so
     the copy band is inviolable: the ribbon dissolves before it reaches
     the caption instead of crossing it. Masking the travelling element
     itself would carry the hole along with the text. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 70%, transparent 96%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 70%, transparent 96%);
}
@media (min-width: 900px) {
  .vs-space .dig__ribbon {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 28%, #000 46%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 28%, #000 46%);
  }
}
.vs-space .dig__ribbon b {
  display: block; width: max-content; will-change: transform;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(46px, 16vmin, 168px);
  line-height: 1; letter-spacing: 0.005em; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.1px rgba(233, 228, 218, 0.62);
  padding-inline: 8vw;
}

/* three strata ticks — where the camera is in the column of earth */
.vs-space .dig__depth {
  position: absolute;
  right: var(--gutter); top: 50%;
  transform: translateY(-50%);
  display: grid; gap: 10px;
}
.vs-space .dig__depth i {
  display: block; width: 1px; height: clamp(26px, 5vh, 46px);
  background: rgba(233, 228, 218, 0.2);
  justify-self: end;
  transition: background 0.4s ease, box-shadow 0.4s ease, width 0.4s ease;
}
.vs-space .dig__depth i.on {
  width: 2px;
  background: var(--sp-ember);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--sp-ember) 50%, transparent);
}
@media (max-width: 899px) {
  .vs-space .dig__depth { top: auto; bottom: calc(6svh + env(safe-area-inset-bottom, 0px)); transform: none; grid-auto-flow: column; gap: 7px; }
  .vs-space .dig__depth i { width: clamp(16px, 5vw, 26px); height: 1px; }
  .vs-space .dig__depth i.on { width: clamp(16px, 5vw, 26px); height: 2px; }
}

/* ── 5 — THE DROP RAIL · pinned, scroll-driven ─────────────────── */

.vs-space .rail__spacer { position: relative; }
.vs-space .rail__stage {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(18px, 3vh, 34px);
  overflow: clip;
}
.vs-space .rail__viewport {
  overflow: hidden;
  scroll-snap-type: none;
  margin-top: 0;
}
.vs-space .rail__track {
  will-change: transform;
  align-items: center;
}
.vs-space .rail__card { scroll-snap-align: none; }
.vs-space .rail__card figure { transition: none; }
/* the card nearest the centre of the frame carries the ember tick */
.vs-space .rail__card .rail__tick {
  border-left-color: color-mix(in srgb, var(--sp-bone) 30%, transparent);
  transition: border-color 0.4s ease, color 0.4s ease;
  color: rgba(233, 228, 218, 0.6);
}
.vs-space .rail__card.is-on .rail__tick {
  border-left-color: var(--sp-ember);
  color: var(--sp-bone);
}
.vs-space .rail__card { opacity: 0.58; transition: opacity 0.5s ease; }
.vs-space .rail__card.is-on { opacity: 1; }
/* a column flex item with auto side margins shrink-wraps instead of
   stretching, which would float the index into the middle of the frame */
.vs-space .rail__meta { margin-top: 0; width: min(100%, 1480px); }

/* ── 6 — safety net ──────────────────────────────────────────────
   vs-space is only ever set when motion is allowed; if the OS flips
   after load, drop the pin and hand back the static page rather than
   leaving a frozen camera on screen. Element-scoped, never a wildcard. */
@media (prefers-reduced-motion: reduce) {
  .vs-space .dig__spacer { height: auto !important; }
  .vs-space .dig__stage { position: static !important; height: auto !important; perspective: none !important; background: none !important; }
  .vs-space .dig__world { position: static !important; transform: none !important; display: grid !important; gap: clamp(46px, 8vh, 92px); padding-block: clamp(40px, 7vh, 84px); }
  .vs-space .dig__stratum { position: static !important; transform: none !important; display: grid !important; gap: 22px; padding-inline: var(--gutter); max-width: 1480px; margin-inline: auto; }
  .vs-space .dig__l { position: static !important; transform: none !important; opacity: 1 !important; filter: none !important; width: auto !important; }
  .vs-space .dig__l--glyph, .vs-space .dig__l--type, .vs-space .dig__l--chip, .vs-space .dig__l--band { display: none !important; }
  /* the captions may already have been lifted into the HUD — hand them
     back as ordinary flow content rather than hiding real copy */
  .vs-space .dig__hud { position: static !important; display: grid !important; gap: 30px; padding: 0 var(--gutter) clamp(40px, 7vh, 84px); max-width: 1480px; margin-inline: auto; }
  .vs-space .dig__hud::before { display: none !important; }
  .vs-space .dig__flare, .vs-space .dig__depth, .vs-space .dig__ribbon { display: none !important; }
  .vs-space .dig__cap-desc .dw { opacity: 1 !important; }
  .vs-space .dig__cap-desc .dw i { display: none !important; }
  .vs-space .dig__cap { position: static !important; opacity: 1 !important; transform: none !important; transition: none !important; pointer-events: auto !important; width: auto !important; max-width: 40ch; }
  .vs-space .rail__stage { position: static !important; height: auto !important; }
  .vs-space .rail__viewport { overflow-x: auto !important; scroll-snap-type: x mandatory !important; }
  .vs-space .rail__track { transform: none !important; }
  .vs-space .rail__card { opacity: 1 !important; }
}