/* ==========================================================
   3D Card Tilt Effect — WOW Phase 3 M8
   Applies perspective-based 3D tilt on mouse hover.
   Target: .tilt-card (add to any card element)
   ========================================================== */

/* Parent container needs perspective for 3D depth */
.tilt-container {
  perspective: 1200px;
  perspective-origin: center;
}

.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
}

/* Subtle shine overlay */
.tilt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at var(--tilt-x, 50%) var(--tilt-y, 50%),
    rgba(255, 255, 255, 0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tilt-card:hover::before {
  opacity: 1;
}

/* Enhanced shadow on tilt */
.tilt-card:hover {
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(212, 175, 55, 0.08);
}

/* Inner elements float above the card surface */
.tilt-card .tilt-float {
  transform: translateZ(20px);
  transition: transform 0.2s ease;
}

.tilt-card:hover .tilt-float {
  transform: translateZ(30px);
}

/* KPI card specific: icon lifts on tilt */
.tilt-card .kpi-card__icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tilt-card:hover .kpi-card__icon {
  transform: scale(1.1) rotate(5deg) translateZ(25px);
}

/* KPI value number pops forward */
.tilt-card .kpi-card__value {
  transition: transform 0.2s ease;
}

.tilt-card:hover .kpi-card__value {
  transform: translateZ(15px);
}

/* Sparkline canvas lifts slightly */
.tilt-card .kpi-sparkline {
  transition: transform 0.2s ease;
}

.tilt-card:hover .kpi-sparkline {
  transform: translateZ(10px);
}

/* Light mode adjustments */
[data-theme="light"] .tilt-card::before,
html.theme-light .tilt-card::before {
  background: radial-gradient(
    ellipse at var(--tilt-x, 50%) var(--tilt-y, 50%),
    rgba(212, 175, 55, 0.06) 0%,
    transparent 60%
  );
}

[data-theme="light"] .tilt-card:hover,
html.theme-light .tilt-card:hover {
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(212, 175, 55, 0.12);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .tilt-card {
    transform: none !important;
    transition: box-shadow 0.3s ease !important;
  }
  .tilt-card::before {
    display: none;
  }
  .tilt-card .tilt-float,
  .tilt-card .kpi-card__icon,
  .tilt-card .kpi-card__value,
  .tilt-card .kpi-sparkline {
    transform: none !important;
  }
}

/* Disable tilt on touch devices (hover is unreliable) */
@media (hover: none) {
  .tilt-card {
    transform: none !important;
  }
  .tilt-card::before {
    display: none;
  }
}