/* ==========================================================================
   NAUTILUS — Domains · Section 2: The journey outward
   Full-width photo bands; the text sits in a translucent dark card so the photos
   stay clean. A distance axis stays fixed on the left. Prefix dj-.
   ========================================================================== */
.dj{
  --dj-hfont: var(--heading-font, 'Exo 2', sans-serif);
  --dj-hw: var(--font-weight-heading, 600);
  --dj-ease: cubic-bezier(.16, 1, .3, 1);
  --dj-accent: #FF9DB6;                  /* light accent for lines on dark; crimson #A11A3D for glows */
  --dj-header: 84px;                     /* fixed header height: the axis and the phone bar sit below it */
  --prog: 0;                             /* 0 → 1 along the axis, set by the script */
  position: relative; background: #0B0C10; color: #fff;
  overflow: clip;                        /* nothing spills into the next section; unlike hidden, it keeps the axis sticky */
}

/* ---------- distance axis (desktop) ---------- */
.dj-rail{ position: absolute; top: 0; bottom: 80px; left: max(24px, calc(50% - 585px)); width: 190px; z-index: 3; pointer-events: none; }
.dj-axis{ position: sticky; top: calc(var(--dj-header) + 60px); height: calc(100vh - var(--dj-header) - 140px); margin-top: 120px; }
/* legible on bright photos (Enceladus is almost white): a slim strip behind the line, small pills behind the texts */
.dj-axis::before{ content: ""; position: absolute; left: 1px; width: 23px; top: -14px; bottom: -14px; border-radius: 12px; background: rgba(11,12,16,.5); }
.dj-line-bg, .dj-line-fill{ position: absolute; left: 12px; top: 0; width: 1px; }
.dj-line-bg{ bottom: 0; background: rgba(255,255,255,.22); }
.dj-line-fill{ height: calc(var(--prog) * 100%); background: var(--dj-accent); }
.dj-stops{ list-style: none; margin: 0; padding: 0; }
.dj-stops li{ position: absolute; left: 7px; top: calc(var(--p) * 100%); width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.5); background: #0B0C10; transition: border-color .3s, background .3s; }
.dj-stops li.is-past{ border-color: var(--dj-accent); background: var(--dj-accent); }
.dj-stops span{ position: absolute; left: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 6px;
  background: rgba(11,12,16,.6); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); transition: opacity .3s; }
.dj-stops li.is-here span{ opacity: 0; }                           /* the readout takes its place */
.dj-marker{ position: absolute; left: 4px; top: calc(var(--prog) * 100%); width: 17px; height: 17px; margin-top: -8.5px; border-radius: 50%;
  background: var(--dj-accent); box-shadow: 0 0 0 6px rgba(161,26,61,.45), 0 0 22px rgba(255,157,182,.5); }
.dj-readout{ position: absolute; left: 30px; top: calc(var(--prog) * 100%); transform: translateY(-50%); margin: 0; padding: 8px 12px 9px; border-radius: 10px;
  background: rgba(11,12,16,.66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dj-dist{ display: block; font-family: var(--dj-hfont); font-weight: var(--dj-hw); font-size: 22px; line-height: 1.1; color: #fff; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.dj-from{ display: block; margin-top: 3px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap; }
.dj-readout.is-swap .dj-dist{ animation: dj-swap .5s ease; }
.dj-readout.is-label .dj-from{ display: none; }                     /* "Beyond the Moon" needs no "from Earth's surface" */
@keyframes dj-swap{ 0%{ opacity: 0; transform: translateY(6px); } 100%{ opacity: 1; transform: none; } }

/* ---------- phone progress bar ---------- */
.dj-bar{ display: none; }

/* ---------- stages ---------- */
.dj-stage{ --dj-img: none; position: relative; display: flex; align-items: center; min-height: 92vh; padding: 120px 0;
  scroll-margin-top: var(--dj-header); background-color: #0B0C10; background-size: cover; background-position: center; }
/* the photo (style attribute) sits on top of a drawn fallback, used until the image is in place */
.dj-stage--earth-surface{    background-image: var(--dj-img), radial-gradient(120% 80% at 70% 100%, #1d3348 0%, #0f1824 55%, #0B0C10 100%); }
.dj-stage--earth-orbit{ background-image: var(--dj-img), radial-gradient(75% 55% at 80% 108%, #8cbcf2 0%, #4a84c8 18%, #24467a 34%, rgba(20,36,62,.7) 46%, rgba(11,12,16,0) 60%), linear-gradient(#0B0C10, #0B0C10); }
.dj-stage--cislunar{    background-image: var(--dj-img), radial-gradient(circle at 84% 46%, #d8d8de 0, #a3a3ad 5%, #4a4a54 8%, rgba(11,12,16,0) 9.5%), linear-gradient(#0B0C10, #0B0C10); }
.dj-stage--deep-space{  background-image: var(--dj-img), radial-gradient(circle at 74% 46%, #f0d9a8 0, #c9a46a 5%, rgba(201,164,106,.25) 6.5%, rgba(11,12,16,0) 10%), linear-gradient(#0B0C10, #0B0C10); }
.dj-in{ position: relative; z-index: 2; width: 100%; }
.dj-card{ max-width: 600px; margin-left: 230px; padding: 34px 36px 30px; border-radius: 16px;   /* clears the distance axis */
  background: rgba(11,12,16,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08); }
.dj-dist-m{ display: none; }
.dj-stage h2{ margin-top: 0; margin-bottom: 12px; font-family: var(--dj-hfont); font-weight: var(--dj-hw); text-transform: uppercase;
  font-size: clamp(34px, 4vw, 56px); line-height: 1; letter-spacing: -.01em; color: #fff; }
.dj-line{ margin-top: 0; margin-bottom: 22px; font-family: var(--dj-hfont); font-weight: 400; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.35; color: rgba(255,255,255,.88); }
.dj-subs{ list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; }
.dj-subs li{ position: relative; padding: 9px 0 9px 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: 15.5px; line-height: 1.45; color: rgba(255,255,255,.9); }
.dj-subs li:last-child{ border-bottom: 1px solid rgba(255,255,255,.14); }
.dj-subs li::before{ content: ""; position: absolute; left: 2px; top: 1.15em; width: 12px; height: 1.5px; background: var(--dj-accent); }


/* long lists (more than five items) on two columns, so the card stays compact */
.dj-card:has(.dj-subs--cols){ max-width: 760px; }
.dj-subs--cols{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.dj-subs--cols li:last-child{ border-bottom: 0; }
.dj-subs--cols li:nth-last-child(-n+2){ border-bottom: 1px solid rgba(255,255,255,.14); }
@media (max-width: 899px){ .dj-subs--cols{ grid-template-columns: 1fr; } .dj-subs--cols li:nth-last-child(2){ border-bottom: 0; } }

/* text enters, one element after the other */
.dj-card{ opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s var(--dj-ease); }
.dj-card > *{ opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .7s var(--dj-ease); }
.dj-stage.is-in .dj-card, .dj-stage.is-in .dj-card > *{ opacity: 1; transform: none; }
.dj-stage.is-in .dj-card > :nth-child(2){ transition-delay: .1s; }
.dj-stage.is-in .dj-card > :nth-child(3){ transition-delay: .2s; }
.dj-stage.is-in .dj-card > :nth-child(4){ transition-delay: .3s; }

/* ---------- under 900px: progress bar on top, stages stacked ---------- */
@media (max-width: 899px){
  .dj-rail{ display: none; }
  .dj-bar{ display: block; position: sticky; top: var(--dj-header); z-index: 4; height: 34px; margin-bottom: -34px;
    background: rgba(11,12,16,.82); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,.08); }
  .dj-bar-fill{ position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--prog) * 100%); background: var(--dj-accent); }
  .dj-bar-dist{ position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--dj-hfont); font-weight: var(--dj-hw);
    font-size: 13px; color: #fff; font-variant-numeric: tabular-nums; }
  .dj-stage{ min-height: 0; padding: 110px 0 80px; }
  .dj-card{ margin-left: 0; padding: 26px 24px 22px; }
  .dj-dist-m{ display: block; margin: 0 0 12px; font-family: var(--dj-hfont); font-weight: var(--dj-hw); font-size: 13px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--dj-accent); }
}
@media (prefers-reduced-motion: reduce){
  .dj-card, .dj-card > *{ opacity: 1; transform: none; transition: none; }
  .dj-readout.is-swap .dj-dist{ animation: none; }
}