/* Movement stays on the ticket surface, list entries and outer rim. */
.website-live .live-fx-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.website-live .live-fx-field::before,
.website-live .live-fx-field::after {
  content: '';
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.website-live .live-fx-field::before {
  top: 0;
  left: 8%;
  width: 29%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #cfc5f5, #c1e1ff, transparent);
}
.website-live .live-fx-field::after {
  right: 0;
  top: 24%;
  width: 2px;
  height: 90px;
  background: linear-gradient(180deg, transparent, #b6cdecbd, transparent);
}
.website-live .live-fx-particle {
  position: absolute;
  left: var(--fx-x);
  top: var(--fx-y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #b9c9e6;
  opacity: 0;
}
.website-live .live-fx-particle:nth-child(2n) { background: #c0a6dd; }
.website-live.live-fx-running .live-flip-desk.is-live-fx-visible .live-fx-field::before {
  animation: live-rim-pass 4.8s ease-in-out infinite;
}
.website-live.live-fx-running .live-flip-desk.is-live-fx-visible .live-fx-field::after {
  animation: live-rim-fall 5.8s ease-in-out -3s infinite;
}
.website-live.live-fx-running .live-flip-desk.is-live-fx-visible .live-fx-particle {
  animation: live-particle-rise 5.6s ease-in-out var(--fx-delay) infinite;
}
.website-live.live-fx-running .live-flip-desk.is-live-fx-visible .live-ticket-enter:not(.is-flipped) .live-deck-card-inner {
  animation: live-ticket-settle .55s cubic-bezier(.2,.75,.3,1) both;
}
.website-live.live-fx-running .live-flip-desk.is-live-fx-visible .live-ticket-enter.is-current:not(.is-flipped) .live-deck-front::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: -12% auto -12% -32%;
  width: 22%;
  border-right: 1px solid #d7e8ffa6;
  background: linear-gradient(90deg, transparent, #b7c8f115 40%, #c8ddff29 99%, transparent);
  animation: live-ticket-scan 1.15s cubic-bezier(.2,.7,.3,1) both;
  pointer-events: none;
}
.website-live.live-fx-running .live-trade-list.is-live-fx-visible > .live-row-enter {
  animation: live-row-arrive .54s cubic-bezier(.2,.72,.3,1) both;
  animation-delay: calc(var(--live-row-index, 0) * 65ms);
}
@keyframes live-ticket-settle {
  from { translate: 0 9px; }
  to { translate: 0 0; }
}
@keyframes live-ticket-scan {
  0% { transform: translateX(0) skewX(-14deg); opacity: 0; }
  16% { opacity: 1; }
  86% { opacity: 1; }
  100% { transform: translateX(680%) skewX(-14deg); opacity: 0; }
}
@keyframes live-row-arrive {
  from { opacity: .35; translate: 0 9px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes live-rim-pass {
  0%, 12% { transform: translateX(-135%); opacity: 0; }
  28%, 68% { opacity: .85; }
  88%, 100% { transform: translateX(285%); opacity: 0; }
}
@keyframes live-rim-fall {
  0%, 18% { transform: translateY(-95px); opacity: 0; }
  38%, 69% { opacity: .65; }
  94%, 100% { transform: translateY(230px); opacity: 0; }
}
@keyframes live-particle-rise {
  0%, 10% { transform: translateY(10px); opacity: 0; }
  38% { opacity: .7; }
  78%, 100% { transform: translateY(-25px); opacity: 0; }
}
@media (max-width: 680px) {
  .website-live .live-fx-particle:nth-child(n + 5) { display: none; }
  .website-live .live-fx-field::after { height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .website-live .live-fx-field,
  .website-live .live-ticket-enter .live-deck-front::before { display: none !important; }
  .website-live .live-ticket-enter .live-deck-card-inner,
  .website-live .live-row-enter { animation: none !important; translate: none !important; opacity: 1 !important; }
}


/* One bright head with a continuous fading tail moves around the ticket rim. */
@property --live-ticket-flow-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.website-live .live-ticket-flow {
  position: absolute;
  z-index: 3;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  opacity: 0;
  background: conic-gradient(
    from var(--live-ticket-flow-angle),
    transparent 0deg 205deg,
    #977cc50a 228deg,
    #ab94d932 266deg,
    #b2b6ed70 303deg,
    #bcdcffc9 334deg,
    #eff7ff 348deg,
    #c5e3ffd9 353deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.website-live.live-fx-running .live-flip-desk.is-live-fx-visible .is-current .live-ticket-flow {
  opacity: .95;
  animation: live-ticket-flow-around 4s linear infinite;
}

/* The records keep a slow travelling highlight after their first entrance. */
.website-live .live-trade-card { position: relative; isolation: isolate; }
.website-live .live-trade-card::before,
.website-live .live-trade-card::after,
.website-live .live-trade-summary::after {
  content: '';
  position: absolute;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.website-live .live-trade-card::before {
  inset: 0;
  border: 1px solid #bdaee5;
  border-left: 2px solid #c4dcf8;
  border-radius: inherit;
}
.website-live .live-trade-card::after {
  top: 0;
  left: -30%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #b1b4f0, #e3f1ff, #b6d5f8, transparent);
}
.website-live .live-trade-summary { position: relative; overflow: hidden; }
.website-live .live-trade-summary::after {
  inset: -12% auto -12% -26%;
  width: 22%;
  border-right: 1px solid #c4dcff52;
  background: linear-gradient(90deg, transparent, #b9c9ed0a 58%, #c0d5ff1c 99%, transparent);
}
.website-live.live-fx-running .live-trade-list.is-live-fx-visible > .live-trade-card::before {
  animation: live-row-edge 6s ease-in-out var(--live-row-phase, 0s) infinite;
}
.website-live.live-fx-running .live-trade-list.is-live-fx-visible > .live-trade-card::after {
  animation: live-row-trace 6s ease-in-out var(--live-row-phase, 0s) infinite;
}
.website-live.live-fx-running .live-trade-list.is-live-fx-visible .live-trade-summary::after {
  animation: live-row-surface 6s ease-in-out var(--live-row-phase, 0s) infinite;
}
.website-live.live-fx-running .live-trade-list.is-live-fx-visible .live-trade-disclosure[open] .live-trade-body {
  animation: live-detail-arrive .42s cubic-bezier(.2,.72,.3,1) both;
}
@keyframes live-ticket-flow-around { to { --live-ticket-flow-angle: 360deg; } }
@keyframes live-row-edge {
  0%, 29%, 100% { opacity: 0; }
  7%, 20% { opacity: .76; }
}
@keyframes live-row-trace {
  0% { transform: translateX(0); opacity: 0; }
  4%, 23% { opacity: 1; }
  28%, 100% { transform: translateX(445%); opacity: 0; }
}
@keyframes live-row-surface {
  0% { transform: translateX(0) skewX(-12deg); opacity: 0; }
  4%, 22% { opacity: 1; }
  28%, 100% { transform: translateX(650%) skewX(-12deg); opacity: 0; }
}
@keyframes live-detail-arrive {
  from { opacity: .35; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .website-live .live-ticket-flow,
  .website-live .live-trade-card::before,
  .website-live .live-trade-card::after,
  .website-live .live-trade-summary::after { display: none !important; }
  .website-live .live-trade-body { animation: none !important; opacity: 1 !important; translate: none !important; }
}