.flip-back {
  position: absolute;
  overflow: hidden !important;
  isolation: isolate;
  background: #07090d !important;
  border: 0 !important;
  box-shadow: none !important;
}

.flip-back::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0 !important;
  background-image: var(--back-cover) !important;
  background-size: cover !important;
  background-position: center !important;
  transform: scaleX(-1) !important;
  filter: url(#coverGaussianBlur) saturate(1.08) brightness(1.08) contrast(.92) !important;
  opacity: 1 !important;
  pointer-events: none;
}

.flip-back::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 52%, rgba(3, 6, 10, .2) 0%, rgba(3, 6, 10, .1) 52%, rgba(3, 6, 10, .03) 84%),
    linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(3, 6, 10, .1));
  background-size: 150px 150px, 100% 100%, 100% 100%;
  background-blend-mode: soft-light, normal, normal;
  pointer-events: none;
}

.flip-back > * { position: relative; z-index: 1; text-shadow: 0 1px 12px rgba(0, 0, 0, .58); }
.flip-label, .flip-links a { color: #eef6ff !important; }
.flip-links a { border-color: rgba(238, 246, 255, .3) !important; background: rgba(2, 5, 8, .18) !important; }
.cover-view.cover-switching-out .flip-card { opacity: .18; transform: translateY(8px) scale(.975); filter: blur(7px); transition: opacity .18s ease, transform .18s ease, filter .18s ease; }
.cover-view.cover-switching-in .flip-card { animation: coverTrackIn .28s cubic-bezier(.2, .72, .18, 1) both; }

@keyframes coverTrackIn {
  from { opacity: .18; transform: translateY(-7px) scale(.975); filter: blur(7px); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cover-view.cover-switching-out .flip-card,
  .cover-view.cover-switching-in .flip-card { animation: none !important; transition: none !important; opacity: 1; transform: none; filter: none; }
}

/* The video script owns opacity, so a second CSS transition must not lag behind it. */
.visual video { transition: none !important; }

/* More restrained cursor response. */
.cur.cursor-hover { transform: translate3d(-50%,-50%,0) scale(1.04) !important; }
.cur-ring.cursor-hover { width: 38px !important; height: 37px !important; box-shadow: 0 0 10px rgba(158,205,232,.17) !important; }
.cur-ring.cursor-hover::after { opacity: .72 !important; }
.cur.cursor-click { transform: translate3d(-50%,-50%,0) scale(1.3) !important; }
.cur-ring.cursor-click { width: 27px !important; height: 26px !important; }

.live-arrival {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  background: #06090e;
  pointer-events: none;
  opacity: 1;
  overflow: hidden;
  transition: opacity .72s ease, filter .72s ease;
}
.live-arrival::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(122,179,212,.14), transparent 38%);
  transform: scale(1);
  transition: transform .9s cubic-bezier(.16,.8,.22,1), opacity .72s ease;
}
.live-arrival::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  opacity: .5;
}
.live-arrival-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 15px; color: #eef6ff; }
.live-arrival-mark { font: 300 clamp(38px,7vw,82px)/1 Georgia,serif; letter-spacing: .2em; transform: translateX(.1em); }
.live-arrival-line { width: min(330px,54vw); height: 1px; background: linear-gradient(90deg,transparent,#9ecde8,transparent); transform: scaleX(1); transition: transform .65s ease, opacity .55s ease; }
.live-arrival-sub { color: #9ecde8; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; }
.live-arrival.leaving { opacity: 0; filter: blur(7px); }
.live-arrival.leaving::before { transform: scale(1.22); opacity: 0; }
.live-arrival.leaving .live-arrival-line { transform: scaleX(0); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .live-arrival { transition-duration: .01ms; } }

@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .95s;
  animation-timing-function: cubic-bezier(.2,.75,.2,1);
}
::view-transition-old(root) { animation-name: holdLiveFrame; }
::view-transition-new(root) { animation-name: revealLiveFrame; }
@keyframes holdLiveFrame { 0%, 68% { opacity: 1; } 100% { opacity: 0; } }
@keyframes revealLiveFrame { from, to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01ms; }
}

.now.track-changing-out > .cover,
.now.track-changing-out > .info {
  opacity: 0;
  transform: translateY(5px) scale(.985);
  filter: blur(4px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.4, 0, .7, .2), filter .26s ease;
}

.now.track-changing-in > .cover,
.now.track-changing-in > .info {
  animation: currentTrackIn .42s cubic-bezier(.16, .8, .22, 1) both;
}

.now.track-initial-enter > .cover,
.now.track-initial-enter > .info {
  animation: currentTrackInitial .38s cubic-bezier(.16, .8, .22, 1) both;
}

@keyframes currentTrackIn {
  from { opacity: 0; transform: translateY(-5px) scale(.985); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes currentTrackInitial {
  from { opacity: 0; transform: translateY(4px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .now.track-changing-out > .cover,
  .now.track-changing-out > .info,
  .now.track-changing-in > .cover,
  .now.track-changing-in > .info,
  .now.track-initial-enter > .cover,
  .now.track-initial-enter > .info {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
}
