/* Corvo Edge · trade card, rebuilt as a 3D motion surface (2026-08-07).
   Brand: ember #f97316 primary, Base blue #0052FF secondary, deep #06080b.
   Applies to the /buy and /swap card (.rc-unified_swap). Pointer-tilt + enter
   motion are driven from bootUnifiedSwap; every effect degrades to flat under
   prefers-reduced-motion. No layout/interaction change, this is the surface only. */

.rc-unified_swap {
  --t3-ember: #f97316;
  --t3-base: #2c6fff;
  --t3-ink: #f5f6fa;
  --t3-mut: #9aa4b6;
  --t3-panel: #0e1117;
  --t3-line: rgba(255, 255, 255, .08);
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 30%;
  padding: 2px;
}

/* the tilting body. rotateX/Y set as CSS vars by the pointer handler. */
.rc-unified_swap .rc-body,
.rc-unified_swap > .result-card,
.rc-unified_swap.result-card {
  --rx: 0deg; --ry: 0deg; --lift: 0px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--lift));
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

/* the card itself: glass panel, ember->base rim, layered shadow for depth */
.rc-unified_swap.result-card {
  position: relative;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 15% -10%, rgba(249, 115, 22, .10), transparent 55%),
    radial-gradient(120% 120% at 100% 110%, rgba(44, 111, 255, .10), transparent 55%),
    linear-gradient(180deg, #12151d, #0a0c11);
  border: 1px solid var(--t3-line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    0 24px 60px -28px rgba(0, 0, 0, .8),
    0 8px 22px -18px rgba(249, 115, 22, .5);
  overflow: hidden;
  animation: t3-enter .6s cubic-bezier(.16, 1, .3, 1) both;
}

/* a moving sheen that catches the tilt */
.rc-unified_swap.result-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .06) 47%, transparent 62%);
  transform: translateX(calc(var(--ry) * -6px));
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
/* ember hairline that breathes */
.rc-unified_swap.result-card::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--t3-ember), var(--t3-base), transparent);
  opacity: .7;
  animation: t3-scan 5.5s ease-in-out infinite;
  pointer-events: none;
}

/* header lifts toward the viewer */
.rc-unified_swap .rc-head { transform: translateZ(34px); }
.rc-unified_swap .rc-title {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 650; letter-spacing: .2px;
  color: var(--t3-ink);
}
.rc-unified_swap .rc-meta { color: var(--t3-mut); }

/* the two legs are the mid depth plane, the divider sits deepest */
.rc-unified_swap .usw-leg {
  transform: translateZ(20px);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
  border: 1px solid var(--t3-line);
  transition: border-color .2s, box-shadow .2s, transform .28s cubic-bezier(.22, 1, .36, 1);
}
.rc-unified_swap .usw-leg:focus-within {
  border-color: rgba(249, 115, 22, .55);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .14), 0 14px 30px -20px rgba(249, 115, 22, .6);
  transform: translateZ(32px);
}
.rc-unified_swap .usw-amt, .rc-unified_swap .usw-recv {
  font-family: 'Geist Mono', ui-monospace, monospace;
  color: var(--t3-ink);
}
.rc-unified_swap .usw-recv:not(.empty) { color: #7dd3a8; }

/* flip button: a real 3D disc that spins on tap, sits highest */
.rc-unified_swap .usw-flip {
  transform: translateZ(46px);
  border-radius: 50%;
  background: linear-gradient(180deg, #1a1f29, #0d1016);
  border: 1px solid rgba(249, 115, 22, .4);
  color: var(--t3-ember);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .9), 0 0 0 4px rgba(6, 8, 11, .6);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), border-color .2s;
}
.rc-unified_swap .usw-flip:hover { border-color: var(--t3-ember); }
.rc-unified_swap .usw-flip:active { transform: translateZ(46px) rotate(180deg) scale(.92); }

/* token trigger + pct chips lift slightly for parallax */
.rc-unified_swap .usw-tok { transform: translateZ(28px); }
.rc-unified_swap .usw-pcts { transform: translateZ(14px); }
.rc-unified_swap .usw-pct {
  border: 1px solid var(--t3-line); background: rgba(255, 255, 255, .03);
  color: var(--t3-mut); transition: all .16s;
}
.rc-unified_swap .usw-pct:hover, .rc-unified_swap .usw-pct:active {
  border-color: rgba(249, 115, 22, .5); color: var(--t3-ink);
  background: rgba(249, 115, 22, .1);
}

/* the confirm/swap CTA: highest plane, ember->base, breathing glow */
.rc-unified_swap .usw-go, .rc-unified_swap [data-role="go"], .rc-unified_swap .usw-cta {
  transform: translateZ(40px);
  background: linear-gradient(120deg, var(--t3-ember), #fb923c 55%, var(--t3-base));
  color: #0a0c11; font-weight: 700; letter-spacing: .3px;
  border: 0; border-radius: 13px;
  box-shadow: 0 14px 30px -14px rgba(249, 115, 22, .7), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.rc-unified_swap .usw-go:hover { filter: brightness(1.06); box-shadow: 0 18px 40px -14px rgba(249, 115, 22, .85); }
.rc-unified_swap .usw-go:active { transform: translateZ(40px) scale(.98); }

/* token picker sheet floats above the card */
.rc-unified_swap .usw-sheet { transform: translateZ(60px); }

@keyframes t3-enter {
  0%   { opacity: 0; transform: rotateX(9deg) translateY(22px) translateZ(-40px); }
  100% { opacity: 1; transform: rotateX(0) translateY(0) translateZ(0); }
}
@keyframes t3-scan {
  0%, 100% { opacity: .35; transform: scaleX(.7); }
  50%      { opacity: .8;  transform: scaleX(1); }
}

/* accessibility: no motion, no tilt, still looks premium */
@media (prefers-reduced-motion: reduce) {
  .rc-unified_swap .rc-body,
  .rc-unified_swap.result-card { transform: none !important; animation: none; transition: none; }
  .rc-unified_swap.result-card::after { animation: none; }
  .rc-unified_swap .usw-flip { transition: none; }
}