/* Give the grid 3D perspective so children can tilt convincingly */
.dash-stats,
.brokerage-strip,
.day-modal-summary,
.hero-preview-stats {
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

/* === Base 3D Card === */
.dash-stats > .stat-card,
.day-modal-summary > .day-summary-box,
.hero-preview-stats > .hp-stat {
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
  transform:
    perspective(1000px)
    rotateX(var(--ry, 0deg))
    rotateY(var(--rx, 0deg))
    translateZ(0) !important;
  transition:
    transform 0.32s cubic-bezier(.22,.61,.36,1),
    box-shadow 0.32s cubic-bezier(.22,.61,.36,1),
    border-color 0.25s ease !important;
  position: relative;
  isolation: isolate;
  animation: card3dFloat 7s ease-in-out infinite;
}

/* Each card gets a slightly different floating phase so they don't sync */
.dash-stats > .stat-card:nth-child(2)   { animation-delay: -0.7s; }
.dash-stats > .stat-card:nth-child(3)   { animation-delay: -1.4s; }
.dash-stats > .stat-card:nth-child(4)   { animation-delay: -2.1s; }
.dash-stats > .stat-card:nth-child(5)   { animation-delay: -2.8s; }
.dash-stats > .stat-card:nth-child(6)   { animation-delay: -3.5s; }
.dash-stats > .stat-card:nth-child(7)   { animation-delay: -4.2s; }
.dash-stats > .stat-card:nth-child(8)   { animation-delay: -4.9s; }
.dash-stats > .stat-card:nth-child(9)   { animation-delay: -5.6s; }
.dash-stats > .stat-card:nth-child(10)  { animation-delay: -6.3s; }
.dash-stats > .stat-card:nth-child(11)  { animation-delay: -0.3s; }

@keyframes card3dFloat {
  0%, 100% { transform: perspective(1000px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0) translateY(0); }
  50%      { transform: perspective(1000px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0) translateY(-3px); }
}

/* On hover/active-tilt: pause float, lift card, deeper shadow, accent glow */
.dash-stats > .stat-card:hover,
.dash-stats > .stat-card.tilting,
.day-modal-summary > .day-summary-box:hover,
.hero-preview-stats > .hp-stat:hover {
  animation-play-state: paused;
  transform:
    perspective(1000px)
    rotateX(var(--ry, 0deg))
    rotateY(var(--rx, 0deg))
    translateZ(30px)
    translateY(-6px) !important;
  box-shadow:
    0 30px 60px -12px rgba(0,0,0,0.7),
    0 18px 36px -8px rgba(0,0,0,0.5),
    0 0 0 1px rgba(124,92,252,0.18) inset,
    0 0 40px -8px var(--accent, #7C5CFC) !important;
  border-color: rgba(124,92,252,0.35) !important;
}

/* === Cursor-following radial glow (the "spotlight" on the surface) === */
.dash-stats > .stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(124,92,252,0.18),
    rgba(124,92,252,0.06) 25%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.dash-stats > .stat-card.tilting::before,
.dash-stats > .stat-card:hover::before {
  opacity: 1;
}

/* Per-accent glow color override */
.dash-stats > .stat-card.accent-green::before  { background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(34,197,94,0.22), rgba(34,197,94,0.06) 25%, transparent 55%); }
.dash-stats > .stat-card.accent-red::before    { background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(239,68,68,0.22), rgba(239,68,68,0.06) 25%, transparent 55%); }
.dash-stats > .stat-card.accent-blue::before   { background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(167,139,250,0.22), rgba(167,139,250,0.06) 25%, transparent 55%); }
.dash-stats > .stat-card.accent-purple::before { background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(196,181,253,0.22), rgba(196,181,253,0.06) 25%, transparent 55%); }
.dash-stats > .stat-card.accent-yellow::before { background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(251,191,36,0.20), rgba(251,191,36,0.06) 25%, transparent 55%); }

/* === Diagonal shine sweep on hover === */
.dash-stats > .stat-card > .shine-3d {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.dash-stats > .stat-card > .shine-3d::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,0.06) 50%,
    transparent 60%,
    transparent 100%
  );
  transform: translateX(-100%) skewX(-12deg);
  transition: transform 0.9s cubic-bezier(.4,.0,.2,1);
}
.dash-stats > .stat-card:hover > .shine-3d::before {
  transform: translateX(420%) skewX(-12deg);
}

/* === Depth on inner content — make label, value, trend float at different Z === */
.dash-stats > .stat-card > .label,
.dash-stats > .stat-card > .stat-label,
.day-modal-summary > .day-summary-box > .lbl,
.hero-preview-stats > .hp-stat > .lbl {
  transform: translateZ(18px);
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
  position: relative;
  z-index: 3;
}

.dash-stats > .stat-card > .stat-val,
.day-modal-summary > .day-summary-box > .val,
.hero-preview-stats > .hp-stat > .val {
  transform: translateZ(36px);
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), text-shadow 0.35s ease;
  position: relative;
  z-index: 3;
  display: inline-block;
}

.dash-stats > .stat-card > .stat-trend,
.dash-stats > .stat-card > .stat-sub {
  transform: translateZ(24px);
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
  position: relative;
  z-index: 3;
}

/* Push deeper on hover for that "lifting off the card" look */
.dash-stats > .stat-card:hover > .label,
.dash-stats > .stat-card.tilting > .label {
  transform: translateZ(30px);
}
.dash-stats > .stat-card:hover > .stat-val,
.dash-stats > .stat-card.tilting > .stat-val {
  transform: translateZ(58px);
  text-shadow:
    0 6px 18px rgba(0,0,0,0.55),
    0 0 24px var(--accent, rgba(124,92,252,0.4));
}
.dash-stats > .stat-card:hover > .stat-trend,
.dash-stats > .stat-card.tilting > .stat-trend {
  transform: translateZ(40px);
}

/* Win-ratio ring card: lift the ring itself too */
.dash-stats > .stat-card .wr-ring-wrap,
.dash-stats > .stat-card .wr-details {
  transform: translateZ(32px);
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
  position: relative;
  z-index: 3;
}
.dash-stats > .stat-card:hover .wr-ring-wrap {
  transform: translateZ(54px);
}

/* === Brokerage strip items — get the same 3D treatment === */
.brokerage-strip > .brk-item {
  transform-style: preserve-3d;
  will-change: transform;
  transform:
    perspective(900px)
    rotateX(var(--ry, 0deg))
    rotateY(var(--rx, 0deg))
    translateZ(0);
  transition: transform 0.3s cubic-bezier(.22,.61,.36,1);
  border-radius: 10px;
  cursor: default;
}
.brokerage-strip > .brk-item:hover,
.brokerage-strip > .brk-item.tilting {
  transform:
    perspective(900px)
    rotateX(var(--ry, 0deg))
    rotateY(var(--rx, 0deg))
    translateZ(18px)
    translateY(-3px);
}
.brokerage-strip > .brk-item .brk-val {
  transform: translateZ(26px);
  transition: transform 0.3s, text-shadow 0.3s;
  display: inline-block;
}
.brokerage-strip > .brk-item:hover .brk-val,
.brokerage-strip > .brk-item.tilting .brk-val {
  transform: translateZ(40px);
  text-shadow: 0 4px 16px currentColor;
}
.brokerage-strip > .brk-item .brk-lbl,
.brokerage-strip > .brk-item .brk-sub {
  transform: translateZ(14px);
  transition: transform 0.3s;
  display: block;
}

/* Accent bar at top of card — make it glow & pulse */
.dash-stats > .stat-card::after {
  opacity: 0.5;
  transition: opacity 0.4s ease, box-shadow 0.4s ease;
  z-index: 2;
}
.dash-stats > .stat-card:hover::after {
  opacity: 1;
  box-shadow: 0 0 18px var(--accent, #7C5CFC), 0 0 36px var(--accent, #7C5CFC);
}

/* Subtle pulsing accent border in idle state */
@keyframes card3dAccentPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}
.dash-stats > .stat-card::after {
  animation: card3dAccentPulse 4s ease-in-out infinite;
}
.dash-stats > .stat-card:hover::after {
  animation: none;
}

/* Disable everything on touch & reduced-motion & small screens */
@media (hover: none), (prefers-reduced-motion: reduce), (max-width: 760px) {
  .dash-stats > .stat-card,
  .day-modal-summary > .day-summary-box,
  .hero-preview-stats > .hp-stat,
  .brokerage-strip > .brk-item {
    animation: none !important;
    transform: none !important;
    /* Mobile GPU layers from the 3D tilt sometimes fail to paint and flash
       a grey block (the lone Net P&L card especially). Flatten them. */
    will-change: auto !important;
    transform-style: flat !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }
  .dash-stats > .stat-card > .label,
  .dash-stats > .stat-card > .stat-val,
  .dash-stats > .stat-card > .stat-trend,
  .dash-stats > .stat-card .wr-ring-wrap,
  .dash-stats > .stat-card .wr-details,
  .brokerage-strip > .brk-item .brk-val,
  .brokerage-strip > .brk-item .brk-lbl,
  .brokerage-strip > .brk-item .brk-sub,
  .day-modal-summary > .day-summary-box > .lbl,
  .day-modal-summary > .day-summary-box > .val,
  .hero-preview-stats > .hp-stat > .lbl,
  .hero-preview-stats > .hp-stat > .val {
    transform: none !important;
  }
  .dash-stats > .stat-card::before,
  .dash-stats > .stat-card > .shine-3d {
    display: none;
  }
}