/* Trade section art: floating 3D panes over the lime panel.
   Overrides the flat tile styles in styles.css. Gradients are allowed here by request. */

/* Lime panel: slow, soft light wash */
#trade.live-trading::after {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 42% at 70% 38%, rgba(255, 255, 255, .34), transparent 70%),
    radial-gradient(30% 34% at 88% 82%, rgba(236, 255, 190, .40), transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: trade-wash 16s ease-in-out infinite alternate;
}
@keyframes trade-wash {
  from { transform: translate3d(-4%, -3%, 0); }
  to   { transform: translate3d(5%, 4%, 0); }
}

/* Perspective container */
#trade .trading-art {
  z-index: 1;
  perspective: 1100px;
  perspective-origin: 50% 40%;
}
#trade .trade-scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
#trade .trading-orbit { transform: translate(-50%, -50%) translateZ(-60px); }

/* Tiles: base placement in --tx / --rz, depth + tilt in 3D, idle float via translate/rotate */
#trade .trade-tile {
  --tx: -50%;
  --rz: 0deg;
  --z: 0px;
  --rx: 0deg;
  --ry: 0deg;
  transform: translateX(var(--tx)) translateZ(var(--z)) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--rz));
  transform-style: preserve-3d;
  will-change: translate, rotate;
  border-radius: 16px;
}
#trade .wallet-tile    { --tx: -57%; --rz: -7deg; --z: 18px; --rx: 10deg; --ry: -12deg; }
#trade .chain-tile     { --tx: -36%; --rz: 6deg;  --z: 72px; --rx: 8deg;  --ry: -16deg; }
#trade .portfolio-tile { --tx: -54%; --rz: -4deg; --z: 40px; --rx: 12deg; --ry: -10deg; }

/* Light tiles: glassy, white-to-tinted sheen, inner top light */
#trade .wallet-tile,
#trade .portfolio-tile {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .96) 0%, rgba(252, 255, 244, .9) 45%, rgba(239, 246, 222, .86) 100%);
  border: 1px solid rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(120, 150, 60, .10),
    0 1px 2px rgba(48, 70, 14, .08),
    0 10px 22px -8px rgba(48, 70, 14, .20),
    0 28px 56px -22px rgba(48, 70, 14, .30);
}
#trade .portfolio-tile {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(120, 150, 60, .10),
    0 1px 2px rgba(48, 70, 14, .08),
    0 14px 26px -8px rgba(48, 70, 14, .22),
    0 36px 64px -24px rgba(48, 70, 14, .32);
}

/* Lucide-style icons in lavender chips */
#trade .tile-icon {
  width: 42px;
  height: 42px;
  background: linear-gradient(160deg, #efe9fb, #e2d9f5);
  color: #6a4fd0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(80, 60, 140, .12);
}
#trade .tile-svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Violet card: rich, slowly flowing gradient */
#trade .chain-tile {
  background: linear-gradient(120deg, #5b3fd6 0%, #7250ed 28%, #8f78f5 50%, #7250ed 72%, #5b3fd6 100%);
  background-size: 260% 260%;
  background-position: 0% 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(30, 10, 90, .25),
    0 2px 4px rgba(40, 24, 110, .14),
    0 18px 34px -10px rgba(52, 30, 140, .34),
    0 44px 80px -28px rgba(40, 60, 10, .40);
  animation: trade-flow 11s ease-in-out infinite alternate, trade-float-b 7.4s ease-in-out infinite;
}
#trade .chain-tile::before {
  /* soft moving sheen across the card face */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .12) 48%, transparent 66%);
  background-size: 250% 100%;
  animation: trade-sheen 9s ease-in-out infinite;
  pointer-events: none;
}
#trade .chain-tile > * { position: relative; }
@keyframes trade-flow {
  from { background-position: 0% 40%; }
  to   { background-position: 100% 60%; }
}
@keyframes trade-sheen {
  0%, 100% { background-position: 120% 0; }
  50%      { background-position: -20% 0; }
}

/* Real chain logos, one size */
#trade .chain-labels { gap: 10px; }
#trade .chain-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#trade .chain-logo svg { width: 18px; height: 18px; display: block; }
#trade .chain-plus { margin: 0 4px; font-size: 16px; }
#trade .chain-bottom { font-size: 13px; }
#trade .chain-bottom img { filter: none; width: 44px; height: auto; }

/* Idle float: independent periods, small amplitude */
#trade .wallet-tile    { animation: trade-float-a 8.6s ease-in-out infinite; }
#trade .portfolio-tile { animation: trade-float-c 6.8s ease-in-out infinite -2.4s; }
@keyframes trade-float-a {
  0%, 100% { translate: 0 0;        rotate: 0deg; }
  50%      { translate: 3px -9px;   rotate: .8deg; }
}
@keyframes trade-float-b {
  0%, 100% { translate: 0 0;        rotate: 0deg; }
  50%      { translate: -4px -11px; rotate: -.9deg; }
}
@keyframes trade-float-c {
  0%, 100% { translate: 0 0;        rotate: 0deg; }
  50%      { translate: 4px -7px;   rotate: .7deg; }
}

/* Pause when off screen (class set by trade-art.js) */
#trade.is-offscreen::after,
#trade.is-offscreen .trade-tile,
#trade.is-offscreen .chain-tile::before { animation-play-state: paused; }

/* Breakpoints: mirror placements from styles.css */
@media (max-width: 1180px) {
  #trade .chain-tile { --tx: -43%; }
}
@media (max-width: 680px) {
  #trade .wallet-tile    { --tx: -53%; --ry: -6deg; }
  #trade .chain-tile     { --tx: -47%; --ry: -8deg; --z: 56px; }
  #trade .portfolio-tile { --tx: -53%; --ry: -5deg; }
}

@media (prefers-reduced-motion: reduce) {
  #trade.live-trading::after,
  #trade .trade-tile,
  #trade .chain-tile::before { animation: none !important; }
  #trade .chain-tile { background-position: 40% 50%; }
  #trade .trade-scene { transition: none; transform: none; }
}

/* Softer ground: the same pale lime as the market rail panel, with a brighter lime glow
   only behind the floating tiles, instead of a solid #c5ff52 slab. */
#trade.live-trading{background:#eef7da}
#trade.live-trading::after{
  background:
    radial-gradient(40% 55% at 74% 50%, rgba(205, 250, 120, .55), transparent 72%),
    radial-gradient(34% 40% at 30% 30%, rgba(255, 255, 255, .7), transparent 70%),
    radial-gradient(30% 34% at 90% 85%, rgba(214, 244, 150, .5), transparent 70%);
}
#trade .live-copy h2 em{color:#4f7a1f}

/* Dark variant (Anmol, Oct 28): ink-to-black ground with brand light behind the tiles.
   The soft-lime version is backed up in the scratchpad as trade-art.softlime.css. */
#trade.live-trading{background:linear-gradient(135deg,#2a2b27 0%,#1a1b18 45%,#0c0d0b 100%);color:#f7f7f0}
#trade.live-trading::after{
  background:
    radial-gradient(38% 50% at 74% 48%, rgba(114, 80, 237, .38), transparent 72%),
    radial-gradient(26% 32% at 86% 82%, rgba(197, 255, 82, .14), transparent 70%),
    radial-gradient(30% 36% at 18% 12%, rgba(255, 255, 255, .05), transparent 70%);
}
#trade .live-copy h2{color:#f7f7f0}
#trade .live-copy h2 em{color:#c5ff52}
#trade .live-copy>p:not(.eyebrow){color:rgba(247,247,240,.68)}
#trade .transition-note{color:rgba(247,247,240,.45);font-size:13px}
#trade .button-ink{background:#f7f7f0;color:#21221f;box-shadow:0 1px 2px #0006,0 8px 24px #0005}
#trade .button-ink:hover{background:#fff}
#trade .trading-orbit{border-color:rgba(247,247,240,.10)}
#trade .trading-orbit.second{border-color:rgba(247,247,240,.12)}
#trade .trade-tile:not(.chain-tile){box-shadow:0 1px 2px #0005,0 18px 40px #0007}
#trade .trade-tile:not(.chain-tile){color:#21221f}
/* No violet or olive tint in the dark ground: just a faint neutral light behind the tiles. */
#trade.live-trading::after{
  background:
    radial-gradient(40% 52% at 72% 46%, rgba(255, 255, 255, .06), transparent 72%),
    radial-gradient(30% 36% at 16% 10%, rgba(255, 255, 255, .04), transparent 70%);
}
#trade.live-trading{background:linear-gradient(135deg,#2a2a2a 0%,#181818 45%,#0b0b0b 100%)}
#trade.live-trading::before{background:none}

/* ---------- Layout (Oct 29): balanced two columns ----------
   Copy column sized to the heading, with the lime statement underneath;
   art fills the rest and scales to its column. Stacks at 900px and below. */
#trade.live-trading{
  grid-template-columns:fit-content(620px) minmax(0,1fr);
  column-gap:clamp(40px,4vw,72px);
  align-items:center;
}
#trade .live-copy{max-width:620px}
#trade .live-copy h2{margin:0;text-wrap:balance}
#trade .live-copy h2 em{display:block}
#trade .live-copy>p:not(.eyebrow){max-width:40ch;text-wrap:balance}
#trade .trading-art{
  container-type:inline-size;
  width:100%;
  min-height:430px;
  align-self:center;
  transform:none;
  margin:0;
}
/* The tile cluster sits ~28px right of centre at full size; pull it back so it centres in the column. */
#trade .trade-scene{transform-origin:50% 50%;translate:-24px 0}
/* Tiles span ~390px at full size; shrink the whole scene when its column is narrower. */
@container (max-width:400px){#trade .trade-scene{scale:.92;translate:-22px 0}}
@container (max-width:370px){#trade .trade-scene{scale:.86;translate:-20px 0}}
@container (max-width:340px){#trade .trade-scene{scale:.8;translate:-19px 0}}
@container (max-width:310px){#trade .trade-scene{scale:.74;translate:-17px 0}}
@container (max-width:280px){#trade .trade-scene{scale:.68;translate:-16px 0}}

/* Tablet landscape: a step down on the heading so its first line still fits beside the art. */
@media(max-width:1180px) and (min-width:901px){
  #trade .live-copy h2{font-size:46px}
  #trade.live-trading{grid-template-columns:fit-content(480px) minmax(0,1fr)}
}

/* Stacked: copy, then art, centred. */
@media(max-width:900px){
  #trade.live-trading{grid-template-columns:1fr;row-gap:48px}
  #trade .live-copy{max-width:none}
  #trade .trading-art{min-height:420px;max-width:460px;justify-self:center}
}
@media(max-width:680px){
  #trade .trading-art{min-height:340px;margin-top:0}
  #trade.live-trading{row-gap:40px}
  #trade .trade-scene{transform-origin:50% 0}
}

/* The execution tile carries the same security and speed promise as the CTA. */
#trade .trade-execution-art{display:block;width:100%;height:94px;margin:-12px 0 11px;overflow:visible}
#trade .chain-tile .chain-bottom{border-top:1px solid #ffffff26;padding-top:14px}