/* ═══════════════════════════════════════════════════════════
   AURUM OSS — 3D Card Effects
   ═══════════════════════════════════════════════════════════ */

/* Wrap every .card-3d in a perspective container */
.card-3d-wrap {
  perspective: 1000px;
  perspective-origin: center center;
}

/* The tiltable element */
.card-3d {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.08s linear, box-shadow 0.3s ease;
  position: relative;
}

/* Smooth reset on mouse-leave is handled by JS removing inline style,
   so CSS transition kicks in */
.card-3d.resetting {
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.55s ease !important;
}

/* ── Shine / Gloss layer ── */
.card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(200, 168, 75, 0.22) 0%,
    rgba(200, 168, 75, 0.08) 40%,
    transparent 70%
  );
}

.card-3d:hover .card-shine {
  opacity: 1;
}

/* ── Edge highlight — simulates a light catching the card edge ── */
.card-3d::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background:
    transparent padding-box,
    linear-gradient(
      135deg,
      rgba(200,168,75,0.5) 0%,
      transparent 40%,
      transparent 60%,
      rgba(200,168,75,0.2) 100%
    ) border-box;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}

.card-3d:hover::after { opacity: 1; }

/* ── Inner depth: push content slightly forward in 3D space ── */
.card-3d .card-inner-3d {
  transform: translateZ(12px);
}

/* ── Shadow response to tilt ── */
.card-3d:hover {
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.65),
    0 0 40px rgba(200, 168, 75, 0.12),
    0 1px 0 rgba(200, 168, 75, 0.3) inset;
}

/* ── Specific card types ── */

/* Product cards */
.product-card.card-3d {
  border-radius: var(--radius-lg);
}

/* Diferencial cards */
.diferencial-card.card-3d {
  border-radius: var(--radius-lg);
}

/* ── Floating depth shadow layers ── */
.card-shadow-layer {
  position: absolute;
  inset: 12px;
  border-radius: inherit;
  background: transparent;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  transform: translateZ(-20px);
  pointer-events: none;
}

/* ── Specular highlight that shifts with tilt ── */
.card-specular {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    ellipse 80% 80% at 30% 20%,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-3d:hover .card-specular { opacity: 1; }

/* ── Depth border — gives a sense of thickness ── */
.card-3d .card-depth-border {
  position: absolute;
  bottom: -4px;
  left: 4px;
  right: 4px;
  height: 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  transform: translateZ(-4px);
  pointer-events: none;
}