/* Scroll-focus (PROTOTYPE) -- timeline entries and route stations dim until
   they cross the middle of the viewport, then pop into full color and
   scale. JS (js/scroll-focus.js) adds .sf-on to <body>; with no JS the
   items stay exactly as they were, at full opacity. Remove this file +
   js/scroll-focus.js and their <link>/<script> tags to drop the effect. */

/* opacity/filter dim the whole row, including its rail marker -- safe,
   since neither property moves or resizes the box. */
.sf-on .tl-item,
.sf-on .station,
.sf-on .feature-row {
  opacity: .28;
  filter: saturate(.35);
  transition: opacity .55s ease, filter .55s ease;
}
.sf-on .tl-item.in-focus,
.sf-on .station.in-focus,
.sf-on .feature-row.in-focus {
  opacity: 1;
  filter: saturate(1);
}

/* The "settle into place" motion is scoped to exclude each row's rail
   marker (the .tl-item/.st-body dot pseudo-elements, and route's .f-ico
   icon) -- those are anchored to the fixed rail line and must stay
   centered on it in every state. Transforming the row itself would drag
   its marker off-center along with the text, which is what made dots
   look off-rail while dimmed. */
.sf-on .tl-item > .yr,
.sf-on .tl-item > .tl-body,
.sf-on .station > .mp,
.sf-on .station .st-body > *,
.sf-on .feature-row > *:not(.f-ico) {
  transform: translateY(10px) scale(.985);
  transition: transform .55s ease;
  will-change: transform;
}
.sf-on .tl-item.in-focus > .yr,
.sf-on .tl-item.in-focus > .tl-body,
.sf-on .station.in-focus > .mp,
.sf-on .station.in-focus .st-body > *,
.sf-on .feature-row.in-focus > *:not(.f-ico) {
  transform: translateY(0) scale(1);
}

/* the year / milepost marker gets an extra pop of color */
.sf-on .tl-item .yr,
.sf-on .station .mp b {
  transition: color .45s ease, text-shadow .45s ease;
}
.sf-on .tl-item.in-focus .yr {
  color: var(--gold);
  text-shadow: 0 0 16px rgba(184,137,45,.5);
}
.sf-on .station.in-focus .mp b {
  color: var(--gold);
  text-shadow: 0 0 16px rgba(184,137,45,.5);
}

/* the rail dot glows without its own transform -- it must stay fixed on
   the rail regardless of focus state (see the note above) */
.sf-on .tl-item::before,
.sf-on .station .st-body::before {
  transition: box-shadow .45s ease;
}
.sf-on .tl-item.in-focus::before,
.sf-on .station.in-focus .st-body::before {
  box-shadow: 0 0 0 7px rgba(184,137,45,.28);
}

@media (prefers-reduced-motion: reduce) {
  .sf-on .tl-item,
  .sf-on .station,
  .sf-on .feature-row,
  .sf-on .tl-item > .yr,
  .sf-on .tl-item > .tl-body,
  .sf-on .station > .mp,
  .sf-on .station .st-body > *,
  .sf-on .feature-row > *:not(.f-ico) {
    opacity: 1; filter: none; transform: none; transition: none;
  }
}
