/* Floating finance visuals — inspired by Revolut's animated cards/coins */

/* CARDS FLOAT — hero or feature bg */
.cards-float {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  perspective: 1400px;
}
.cards-float .fcard {
  position: absolute;
  width: 260px; height: 160px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1a2332 0%, #0c1220 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
  padding: 18px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: var(--font-mono); color: #fff;
  opacity: 0.92;
  will-change: transform;
}
.fcard.gold  { background: linear-gradient(135deg, #1f5a3d 0%, #133327 100%); border-color: rgba(94,184,138,.35); box-shadow: 0 30px 80px rgba(94,184,138,.18), inset 0 1px 0 rgba(255,255,255,0.08); }
.fcard.accent { background: linear-gradient(135deg, #5EB88A 0%, #2F7D55 100%); color: #0A0A0A; border-color: rgba(255,255,255,0.15); }
.fcard .fc-num { font-size: 20px; letter-spacing: 0.08em; font-weight: 500; }
.fcard .fc-meta { display: flex; justify-content: space-between; font-size: 10px; opacity: .75; letter-spacing: .1em; text-transform: uppercase; }
.fcard .fc-chip { width: 30px; height: 22px; border-radius: 4px; background: linear-gradient(135deg, #d4a94b, #8d6f2a); opacity: .8; }
.fcard .fc-brand { font-family: var(--font-display); font-style: italic; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }

@keyframes cardFloatA { 0%,100% { transform: rotate(-8deg) translateY(0) rotateY(0deg); } 50% { transform: rotate(-8deg) translateY(-20px) rotateY(6deg); } }
@keyframes cardFloatB { 0%,100% { transform: rotate(12deg) translateY(0) rotateY(0deg); } 50% { transform: rotate(12deg) translateY(-28px) rotateY(-8deg); } }
@keyframes cardFloatC { 0%,100% { transform: rotate(-3deg) translateY(0) rotateY(0deg); } 50% { transform: rotate(-3deg) translateY(-14px) rotateY(4deg); } }

.fcard.c1 { top: 10%; left: 5%; animation: cardFloatA 7s ease-in-out infinite; }
.fcard.c2 { top: 18%; right: 4%; animation: cardFloatB 9s ease-in-out infinite; }
.fcard.c3 { bottom: 15%; left: 8%; animation: cardFloatC 8s ease-in-out infinite; }
.fcard.c4 { bottom: 8%; right: 10%; animation: cardFloatA 10s ease-in-out infinite reverse; }

/* COINS FLOAT — 3D coins bobbing */
.coins-float { position: absolute; inset: 0; pointer-events: none; overflow: hidden; perspective: 1200px; }
.coin {
  position: absolute;
  width: 110px; height: 110px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  color: #0A0A0A;
  background: radial-gradient(circle at 30% 30%, #8FD7B0 0%, #5EB88A 50%, #1F5A3D 100%);
  box-shadow:
    inset 0 -6px 12px rgba(0,0,0,0.4),
    inset 0 6px 12px rgba(255,255,255,0.3),
    0 20px 50px rgba(94,184,138,0.25),
    0 0 0 2px rgba(94,184,138,0.2);
  transform-style: preserve-3d;
  will-change: transform;
}
.coin::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  border: 1px dashed rgba(0,0,0,0.25);
}
.coin .cv { font-size: 36px; letter-spacing: -0.03em; z-index: 2; }
.coin.silver {
  background: radial-gradient(circle at 30% 30%, #F4F4F5 0%, #B8BCC8 50%, #5A6278 100%);
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.3), inset 0 6px 12px rgba(255,255,255,0.4), 0 20px 50px rgba(184,188,200,0.2);
}
.coin.dark {
  background: radial-gradient(circle at 30% 30%, #3A3F4C 0%, #1A1F2E 60%, #07090E 100%);
  color: var(--accent);
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.7), inset 0 6px 12px rgba(255,255,255,0.1), 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(94,184,138,0.3);
}

@keyframes coinSpinA {
  0% { transform: translateY(0) rotateY(0deg) rotate(-5deg); }
  50% { transform: translateY(-30px) rotateY(180deg) rotate(-5deg); }
  100% { transform: translateY(0) rotateY(360deg) rotate(-5deg); }
}
@keyframes coinSpinB {
  0% { transform: translateY(0) rotateY(0deg) rotate(8deg); }
  50% { transform: translateY(-20px) rotateY(-180deg) rotate(8deg); }
  100% { transform: translateY(0) rotateY(-360deg) rotate(8deg); }
}
@keyframes coinBob {
  0%,100% { transform: translateY(0) rotate(3deg); }
  50% { transform: translateY(-18px) rotate(-3deg); }
}

.coin.p1 { top: 15%; left: 12%; animation: coinSpinA 10s ease-in-out infinite; }
.coin.p2 { top: 30%; right: 8%; animation: coinSpinB 12s ease-in-out infinite; width: 130px; height: 130px; }
.coin.p3 { bottom: 20%; left: 20%; animation: coinBob 6s ease-in-out infinite; width: 80px; height: 80px; }
.coin.p4 { bottom: 12%; right: 18%; animation: coinSpinA 14s ease-in-out infinite reverse; width: 90px; height: 90px; }
.coin.p5 { top: 55%; left: 48%; animation: coinBob 8s ease-in-out infinite 2s; width: 70px; height: 70px; }

/* STOCK CARDS — mini floating tiles with live-looking numbers */
.chips-float { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.flchip {
  position: absolute;
  padding: 14px 18px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 140px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  will-change: transform;
}
.flchip .fc-sym { color: var(--text-muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.flchip .fc-val { color: var(--text); font-size: 18px; font-family: var(--font-display); font-style: italic; letter-spacing: -0.02em; }
.flchip .fc-delta { font-size: 10px; }
.flchip .fc-delta.up { color: #7FC99A; }
.flchip .fc-delta.down { color: #5EB88A; }

@keyframes chipDrift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(12px,-18px); } }
@keyframes chipDrift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-14px,-22px); } }
@keyframes chipDrift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(10px,16px); } }

.flchip.d1 { top: 22%; left: 6%; animation: chipDrift1 7s ease-in-out infinite; }
.flchip.d2 { top: 14%; right: 10%; animation: chipDrift2 9s ease-in-out infinite; }
.flchip.d3 { bottom: 18%; right: 6%; animation: chipDrift3 8s ease-in-out infinite; }
.flchip.d4 { bottom: 28%; left: 14%; animation: chipDrift2 10s ease-in-out infinite; }
.flchip.d5 { top: 50%; left: 4%; animation: chipDrift1 11s ease-in-out infinite; }
.flchip.d6 { top: 40%; right: 4%; animation: chipDrift3 9s ease-in-out infinite; }

/* ORBITS — circular paths */
.orbit-stage { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.orbit-ring {
  position: absolute; border-radius: 50%;
  border: 1px dashed var(--border-strong);
  opacity: .35;
}
.orbit-ring.r1 { width: 400px; height: 400px; animation: orbitRot 40s linear infinite; }
.orbit-ring.r2 { width: 620px; height: 620px; animation: orbitRot 60s linear infinite reverse; }
.orbit-ring.r3 { width: 880px; height: 880px; animation: orbitRot 90s linear infinite; }
@keyframes orbitRot { to { transform: rotate(360deg); } }
.orbit-item {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  padding: 6px 10px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border-strong);
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-muted); letter-spacing: .1em;
  animation: orbitRotCounter var(--d, 40s) linear infinite reverse;
}
@keyframes orbitRotCounter { to { transform: translateX(-50%) rotate(-360deg); } }

/* responsive — hide heaviest on mobile */
@media (max-width: 820px) {
  .cards-float, .coins-float { opacity: .5; }
  .fcard { transform: scale(.7); }
  .flchip { min-width: 110px; font-size: 10px; }
}