/* ============================================================
   disc-rail.css: the disc changer rail on the left of the machine.
   numbered bays with grooves, one LIVE light up top, the active disc's
   name in a little LCD, port lights that blink while a disc "reads",
   "new" stickers, and a now-playing deck in the lower half.
   the flying pixi disc in script.js is unchanged: it still parks in
   the port of whichever section you're on.
   load after styles.css and site-extras.css, before mobile.css.
   ============================================================ */

.nav-tower{
  --rail-engrave:#7f9098;
  --rail-bay:#9fb0b8;
  --rail-bayhi:rgba(255,255,255,.7);
  --rail-lcd:linear-gradient(180deg,#e4e8fb,#d3d9f4);
  --rail-lcd-edge:#7f88c9;
  --rail-lcd-ink:#3a4290;
  --rail-glow:rgba(108,116,207,.75);
  --rail-live:#e5484d;
  counter-reset:bay;
}

[data-theme="dark"] .nav-tower{
  --rail-engrave:#5c676d;
  --rail-bay:#0b0e10;
  --rail-bayhi:rgba(255,255,255,.06);
  --rail-lcd:linear-gradient(180deg,#141729,#0d0f1c);
  --rail-lcd-edge:#3a3f74;
  --rail-lcd-ink:#b9bdf5;
  --rail-glow:rgba(139,147,230,.75);
}

/* the old vertical hairline ran straight through the discs; the grooves replace it */
.nav-tower::before{ display:none; }

/* ---------- status strip: one LIVE light ---------- */
.rail-status{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:34px;
  z-index:4;
  border-bottom:1px solid var(--rail-bay);
  box-shadow:0 1px 0 var(--rail-bayhi);
  pointer-events:none;
}

.rail-status-label{
  position:absolute;
  left:7px;
  top:5px;
  font-family:var(--font-pixel);
  font-size:10px;
  letter-spacing:1px;
  white-space:nowrap;
  color:var(--rail-engrave);
}

.rail-onair{
  position:absolute;
  left:8px;
  top:17px;
  display:flex;
  align-items:center;
  gap:5px;
  font-family:var(--font-pixel);
  font-size:11px;
  letter-spacing:1px;
  color:var(--rail-engrave);
  transition:color .2s ease;
}

.rail-onair i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8d9ba3;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.3);
}

/* the live bay already gets .is-live from live.js; the status light follows it */
.nav-tower:has(.nav-live.is-live) .rail-onair{
  color:var(--rail-live);
  text-shadow:0 0 6px rgba(229,72,77,.45);
}

.nav-tower:has(.nav-live.is-live) .rail-onair i{
  background:var(--rail-live);
  box-shadow:0 0 6px rgba(229,72,77,.9);
  animation:liveLedPulse 1.6s ease-in-out infinite;
}

/* ---------- bays: number + groove ---------- */
.nav-btn{ counter-increment:bay; }

.nav-btn::before{
  content:counter(bay, decimal-leading-zero);
  position:absolute;
  left:-7px;
  top:-3px;
  font-family:var(--font-pixel);
  font-size:11px;
  letter-spacing:.5px;
  color:var(--rail-engrave);
  transition:color .2s ease;
}

.nav-btn.active::before{ color:var(--accent); }

.nav-btn::after{
  content:"";
  position:absolute;
  left:2px;
  right:-3px;
  top:11px;
  height:3px;
  z-index:-1;
  border-radius:2px;
  background:var(--rail-bay);
  box-shadow:0 1px 0 var(--rail-bayhi), inset 0 1px 2px rgba(0,0,0,.35);
}

/* discs: hover nudges one out of its bay and spins it slowly */
.nav-btn .disc{
  transition:transform .35s cubic-bezier(.2,.8,.2,1.15), opacity .3s ease, filter .2s ease, box-shadow .2s ease;
}

.nav-btn .disc::before{
  background:conic-gradient(from 0deg,#eef4f6,#bac8cf,#e7eef1,#bac8cf,#eef4f6);
}

.nav-btn:hover .disc{ transform:translateX(-4px); }
.nav-btn:hover .disc::before{ animation:railSpin 2.4s linear infinite; }

@keyframes railSpin{ to{ transform:rotate(360deg); } }

/* the disc that's slotted in the port leaves an empty bay; when you
   switch away it slides back into its groove */
.nav-btn.vacant .disc{
  opacity:0;
  filter:none;
  transform:translateX(12px) scale(.8);
}

/* active name in a little LCD (same screen as the music player) */
.nav-btn > span{
  padding:2px 0 1px;
  border:1px solid transparent;
  border-radius:3px;
}

.nav-btn.active > span{
  margin-inline:-2px;
  border-color:var(--rail-lcd-edge);
  background:var(--rail-lcd);
  color:var(--rail-lcd-ink);
  text-shadow:0 0 5px var(--rail-glow);
  box-shadow:inset 0 1px 3px rgba(20,24,60,.3);
}

.nav-btn.active > span.warm{ animation:railCrtOn .55s steps(6) both; }

@keyframes railCrtOn{
  0%{ opacity:0; }
  20%{ opacity:.8; }
  30%{ opacity:.1; }
  55%{ opacity:1; }
  70%{ opacity:.4; }
  100%{ opacity:1; }
}

/* live + streaming: keep the red label even inside the LCD */
.nav-live.is-live.active > span,
[data-theme="dark"] .nav-live.is-live.active > span{
  color:var(--rail-live);
  text-shadow:0 0 6px rgba(229,72,77,.45);
}

/* ---------- ports: a small slot with a light that reads the disc ---------- */
.nav-port{
  width:12px;
  border:0;
  background:none;
  opacity:1;
}

.nav-port::after{
  right:0;
  top:7px;
  width:10px;
  height:16px;
  border:1px solid var(--rail-engrave);
  border-right:0;
  background:var(--rail-bay);
  box-shadow:inset 0 0 4px rgba(0,0,0,.4);
}

.nav-port::before{
  content:"";
  position:absolute;
  right:5px;
  top:13px;
  z-index:1;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#6f7d85;
  transition:background .2s ease, box-shadow .2s ease;
}

.nav-port.active::before{
  background:var(--accent);
  box-shadow:0 0 5px var(--rail-glow);
}

.nav-port.reading::before{ animation:railPortRead .18s steps(2) 4; }

@keyframes railPortRead{
  50%{ background:#6f7d85; box-shadow:none; }
}

.nav-tower:has(.nav-live.is-live) .port-live::before{
  background:var(--rail-live);
  box-shadow:0 0 5px rgba(229,72,77,.9);
  animation:liveLedPulse 1.6s ease-in-out infinite;
}

[data-theme="dark"] .nav-port{ background:none; border:0; }
[data-theme="dark"] .nav-port::after{ border-color:#3a4147; background:#0b0e10; }

/* ---------- "new" sticker on a section with something added this week ---------- */
.rail-new{
  position:absolute;
  left:30px;
  top:-5px;
  z-index:2;
  padding:0 4px 1px;
  border:1px solid var(--mp-purple-border, #5b62b8);
  border-radius:999px;
  background:var(--mp-purple, linear-gradient(180deg,#a7aef0,#7b83dd));
  color:#fff;
  font-family:var(--font-pixel);
  font-size:10px;
  font-weight:normal;
  line-height:1;
  letter-spacing:.5px;
  text-transform:lowercase;
  box-shadow:0 0 6px var(--rail-glow);
  transform:rotate(8deg);
  pointer-events:none;
  animation:railNewPulse 2.4s ease-in-out infinite;
}

@keyframes railNewPulse{
  50%{ transform:rotate(8deg) scale(1.1); box-shadow:0 0 11px var(--rail-glow); }
}

/* ---------- now-playing deck (lower half) ---------- */
.rail-deck{
  position:absolute;
  left:0;
  right:0;
  top:478px;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:12px 8px 0 0;
}

.rail-deck::before,
.rail-deck::after{
  content:"";
  position:absolute;
  left:8px;
  right:12px;
  height:1px;
  background:var(--rail-bay);
  box-shadow:0 1px 0 var(--rail-bayhi);
}

.rail-deck::before{ top:0; }
.rail-deck::after{ bottom:-14px; }

.rail-deck-tag{
  font-family:var(--font-pixel);
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--rail-engrave);
  white-space:nowrap;
}

.rail-deck-lcd{
  position:relative;
  width:42px;
  height:196px;
  margin-left:3px;
  border:1px solid var(--rail-lcd-edge);
  border-radius:4px;
  background:var(--rail-lcd);
  box-shadow:inset 0 2px 5px rgba(20,24,60,.28), 0 1px 0 var(--rail-bayhi);
  overflow:hidden;
  color:var(--rail-lcd-ink);
  text-shadow:0 0 5px var(--rail-glow);
}

.rail-deck-lcd::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(20,24,60,.07) 0 1px,transparent 1px 3px);
}

.rail-deck-scroll{
  position:absolute;
  left:6px;
  top:0;
  writing-mode:vertical-rl;
  font-family:var(--font-pixel);
  font-size:16px;
  line-height:1;
  letter-spacing:1px;
  white-space:nowrap;
}

.rail-deck-scroll span{
  display:inline-block;
  padding-block-start:8px;
  padding-inline-end:30px;
}

/* the title scrolls down the screen while music plays */
.nav-tower.deck-playing .rail-deck-scroll{ animation:railDeckScroll var(--rail-deck-dur, 10s) linear infinite; }

@keyframes railDeckScroll{
  from{ transform:translateY(-50%); }
  to{ transform:translateY(0); }
}

.rail-deck-vu{
  position:absolute;
  right:4px;
  top:6px;
  bottom:6px;
  width:12px;
  display:flex;
  flex-direction:column-reverse;
  gap:2px;
}

.rail-deck-vu span{
  display:block;
  height:3px;
  width:12px;
  background:currentColor;
  box-shadow:0 0 3px var(--rail-glow);
  transform:scaleX(.2);
  transform-origin:right;
}

.rail-deck-btns{
  display:flex;
  gap:4px;
  width:42px;
  margin-left:3px;
}

.rail-deck-btns button{
  flex:1 1 0;
  height:20px;
  padding:0;
  border:1px solid var(--rail-engrave);
  border-radius:3px;
  background:linear-gradient(180deg,#f7fafb,#d5dde1);
  color:#4b5d67;
  font-size:8px;
  letter-spacing:-1px;
  line-height:1;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

.rail-deck-btns #railDeckPlay{
  border-color:var(--mp-purple-border, #5b62b8);
  background:var(--mp-purple, linear-gradient(180deg,#a7aef0,#7b83dd));
  color:#fff;
  font-size:9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 var(--mp-purple-border, #5b62b8);
}

.rail-deck-btns button:hover{ border-color:var(--accent); }
.rail-deck-btns #railDeckNext:hover{ color:var(--accent); }

.rail-deck-btns button:active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 3px rgba(20,24,60,.35);
}

.rail-deck-btns button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
}

[data-theme="dark"] .rail-deck-btns #railDeckNext{
  border-color:#454c52;
  background:linear-gradient(180deg,#31383d,#20262b);
  color:#c3ced3;
}

/* hex ticker moves below the deck */
.rail-ticker{
  top:792px;
  height:220px;
}

/* ---------- phones: the rail is a tab bar there, so only the bits that fit ---------- */
@media(max-width:860px){
  .rail-status,
  .rail-deck,
  .nav-btn::after{ display:none; }

  .nav-btn::before{ content:none; }

  /* relative so the "new" sticker can sit on it; top/left reset so the
     desktop rail offsets (top:42px, 103px...) don't push it off the tab bar */
  .nav-tower .nav-btn{ position:relative; top:auto; left:auto; }

  .nav-btn.vacant .disc{ transform:none; }
  .nav-btn:hover .disc{ transform:none; }

  .nav-btn.active > span{ margin-inline:0; padding:2px 3px 1px; }

  .rail-new{ left:auto; right:0; top:-6px; }
}

@media(prefers-reduced-motion: reduce){
  .nav-btn .disc,
  .nav-btn:hover .disc::before,
  .nav-btn.active > span.warm,
  .nav-port.reading::before,
  .rail-new,
  .nav-tower.deck-playing .rail-deck-scroll,
  .nav-tower:has(.nav-live.is-live) .rail-onair i{
    animation:none !important;
    transition:none !important;
  }
}