/* A small collection of market objects, coordinated by one Blink agent. */
#trade .trading-art.trade-constellation {
  container-type: inline-size;
  width: 100%;
  max-width: 500px;
  min-height: 0;
  aspect-ratio: 1 / 1.02;
  margin: 0;
  justify-self: center;
  transform: none;
  perspective: 1000px;
}
#trade .trade-constellation .trade-scene {
  inset: 0;
  translate: none;
  scale: 1;
  transform-origin: 50% 50%;
}
#trade .tc-light {
  position: absolute;
  inset: 14% 1% 4%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 48%, #8254ee2e, #7345da0c 48%, transparent 70%);
  filter: blur(15px);
  transform: translateZ(-30px);
}
#trade .tc-market {
  --tc-angle: 0deg;
  position: absolute;
  aspect-ratio: 1;
  border-radius: 20%;
  padding: 3px;
  background: linear-gradient(145deg, #f1eaffb8, #9d7ddd99 28%, #35284a 62%, #b9a9df99);
  box-shadow: 0 2px 0 #ded1ff4d, 0 5px 0 #34264b, 0 8px 0 #211a2c, 0 18px 24px -8px #0009, 0 32px 54px -18px #000a;
  transform: rotate(var(--tc-angle)) rotateY(-8deg) rotateX(5deg);
  animation: tc-market-float 7.5s ease-in-out infinite;
}
#trade .tc-market::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid #f2e7ff45;
  background: linear-gradient(145deg, #ffffff20, transparent 37%, transparent 73%, #b5a0e120);
  box-shadow: inset 0 1px 1px #fff5;
  pointer-events: none;
}
#trade .tc-image {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(20% - 2px);
  background: #6339da;
  box-shadow: inset 0 0 0 1px #ffffff24;
}
#trade .tc-image img {
  position: absolute;
  top: -2%;
  left: -32%;
  display: block;
  width: 164%;
  height: 164%;
  max-width: none;
  object-fit: cover;
}
#trade .tc-chip { --tc-angle: -11deg; left: 5%; top: 7%; width: 35%; z-index: 2; }
#trade .tc-bitcoin { --tc-angle: 9deg; left: 66%; top: 13%; width: 28%; animation-delay: -3s; }
#trade .tc-gold { --tc-angle: -8deg; left: 5%; top: 63%; width: 28%; animation-delay: -1.6s; }
#trade .tc-oil { --tc-angle: 10deg; left: 64%; top: 61%; width: 32%; animation-delay: -4.7s; z-index: 2; }

#trade .tc-core,
#trade .tc-agent {
  position: absolute;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 29%;
  transform: rotate(-11deg) rotateY(-9deg) rotateX(7deg);
  animation: tc-core-float 8s ease-in-out infinite;
}
#trade .tc-core {
  left: 35%;
  top: 39%;
  width: 31%;
  z-index: 5;
  background: radial-gradient(ellipse at 16% 5%, #e2cfff8c, transparent 42%), linear-gradient(145deg, #b098ff 0%, #8a63f5 24%, #7348df 64%, #46229d 100%);
  border: 1px solid #dac5ff8c;
  box-shadow: inset 0 2px 2px #f6edff7a, inset 2px 0 3px #f6edff36, inset -3px -5px 7px #30106d66, 0 5px 0 #503095, 0 9px 0 #38216d, 0 21px 28px -7px #0009, 0 0 50px #8053e540;
}
#trade .tc-core::before,
#trade .tc-agent::before {
  content: '';
  position: absolute;
  inset: 5%;
  border-radius: 25%;
  border: 1px solid #ffffff1f;
  pointer-events: none;
}
#trade .tc-core img {
  width: 58%;
  height: auto;
  filter: drop-shadow(0 2px 1px #38216d66);
}
#trade .tc-agent {
  width: 10%;
  background: linear-gradient(140deg, #efffc7, #c5ff52 35%, #abdc44 78%, #8eaf30);
  border: 1px solid #eaffb399;
  box-shadow: inset 0 1px 2px #f5ffd9e6, inset 0 -2px 4px #648b294d, 0 3px 0 #71922e, 0 6px 0 #40561e, 0 13px 22px -6px #000a;
  z-index: 3;
}
#trade .tc-agent img { width: 62%; height: auto; filter: brightness(0); opacity: .8; }
#trade .tc-agent-one { left: 46%; top: 15%; transform: rotate(12deg); animation-delay: -2.4s; }
#trade .tc-agent-two { left: 43%; top: 84%; width: 8%; transform: rotate(-16deg); animation-delay: -5s; }

@keyframes tc-market-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -1.4cqw; }
}
@keyframes tc-core-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -1.1cqw; }
}
#trade.is-offscreen .tc-market,
#trade.is-offscreen .tc-core,
#trade.is-offscreen .tc-agent { animation-play-state: paused; }
@media (max-width: 680px) {
  #trade .trading-art.trade-constellation { max-width: 440px; min-height: 0; margin: 0; }
  #trade .tc-market { padding: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  #trade .tc-market,
  #trade .tc-core,
  #trade .tc-agent { animation: none; }
  #trade .trade-constellation .trade-scene { transform: none; transition: none; }
}