/* Trạm Preview stays restrained until the visitor actively selects a story. */
#tram-preview.preview-station {
  --preview-rest-dim: .9;
  --preview-rest-saturation: .9;
}

#tram-preview.preview-station .preview-station-head,
#tram-preview.preview-station .preview-station-signal,
#tram-preview.preview-station .preview-station-media,
#tram-preview.preview-station .preview-station-backdrop,
#tram-preview.preview-station .preview-station-poster,
#tram-preview.preview-station .preview-station-play,
#tram-preview.preview-station .preview-station-copy,
#tram-preview.preview-station .preview-station-copy::before,
#tram-preview.preview-station .preview-station-card {
  transition:
    opacity .52s ease,
    filter .52s ease,
    border-color .52s ease,
    box-shadow .52s ease,
    transform .38s cubic-bezier(.2,.8,.2,1) !important;
}

/* Initial/resting state: keep the station in the same dark visual hierarchy as nearby sections. */
#tram-preview.preview-station:not(.is-preview-engaged) .preview-station-head {
  opacity: .94;
}

#tram-preview.preview-station:not(.is-preview-engaged) .preview-station-signal {
  filter: brightness(.9) saturate(.9);
  box-shadow: 0 0 14px rgba(155,107,255,.2) !important;
}

#tram-preview.preview-station:not(.is-preview-engaged) .preview-station-media {
  border-color: rgba(137,151,190,.4) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.32) !important;
}

#tram-preview.preview-station:not(.is-preview-engaged) .preview-station-backdrop {
  opacity: .9 !important;
  filter: brightness(.72) saturate(.88) contrast(1.02) !important;
}

#tram-preview.preview-station:not(.is-preview-engaged) .preview-station-poster {
  filter: brightness(.92) saturate(.92) contrast(1) !important;
}

#tram-preview.preview-station:not(.is-preview-engaged) .preview-station-play {
  filter: brightness(.92) saturate(.9);
  box-shadow: 0 10px 24px rgba(3,7,18,.42), 0 0 14px rgba(155,107,255,.16) !important;
}

#tram-preview.preview-station:not(.is-preview-engaged) .preview-station-copy {
  border-color: rgba(119,137,179,.3) !important;
  filter: brightness(.96) saturate(.94);
  box-shadow: 0 14px 32px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#tram-preview.preview-station:not(.is-preview-engaged) .preview-station-copy::before {
  opacity: .62;
  box-shadow: none !important;
}

#tram-preview.preview-station:not(.is-preview-engaged) .preview-station-card {
  opacity: .72 !important;
  filter: brightness(.86) saturate(.82);
  box-shadow: 0 10px 22px rgba(0,0,0,.2) !important;
}

#tram-preview.preview-station:not(.is-preview-engaged) .preview-station-card.is-active {
  opacity: .92 !important;
  border-color: rgba(155,107,255,.46) !important;
  filter: brightness(.95) saturate(.92);
  box-shadow: 0 12px 28px rgba(0,0,0,.24), 0 0 12px rgba(155,107,255,.08) !important;
}

/* Selected-by-swipe state: only the centered story and its large preview light up. */
#tram-preview.preview-station.is-preview-engaged .preview-station-media {
  border-color: rgba(155,107,255,.64) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.3), 0 0 24px rgba(105,230,243,.08) !important;
}

#tram-preview.preview-station.is-preview-engaged .preview-station-backdrop {
  opacity: .94 !important;
  filter: brightness(.82) saturate(1.02) contrast(1.03) !important;
}

#tram-preview.preview-station.is-preview-engaged .preview-station-poster {
  filter: brightness(.96) saturate(.98) contrast(1.01) !important;
}

#tram-preview.preview-station.is-preview-engaged .preview-station-card:not(.is-active) {
  opacity: .7 !important;
  filter: brightness(.84) saturate(.82);
}

#tram-preview.preview-station.is-preview-engaged .preview-station-card.is-active {
  opacity: 1 !important;
  filter: brightness(1) saturate(1);
  box-shadow:
    0 0 0 1px rgba(216,92,255,.7),
    0 12px 32px rgba(91,61,204,.34),
    0 0 20px rgba(105,230,243,.16) !important;
}

#tram-preview.preview-station.is-preview-arriving .preview-station-media,
#tram-preview.preview-station.is-preview-arriving .preview-station-card.is-active {
  animation: preview-arrival-glow .66s cubic-bezier(.2,.78,.2,1) both;
}

@keyframes preview-arrival-glow {
  0% { transform: scale(.992); }
  52% { transform: scale(1.008); filter: brightness(1.08) saturate(1.08); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #tram-preview.preview-station.is-preview-arriving .preview-station-media,
  #tram-preview.preview-station.is-preview-arriving .preview-station-card.is-active {
    animation: none !important;
  }
}