/*
  GLOBAL TILT CARD HOVER EFFECT RULES
  Recreates Perplexity Comet Invite Card 3D Tilt & Radial Sweep Animation
  Applied globally to ALL card views across the website.
*/

.tilt-card {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;

  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.15s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(212, 136, 6, 0.18);
  background: #FFFFFF;
  cursor: pointer;
  will-change: transform;
}

/* Hover Lift & Glow Shadow (Perplexity Comet Card Style) */
.tilt-card:hover {
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.02);
  box-shadow: 0 30px 60px rgba(212, 136, 6, 0.22), 0 12px 35px rgba(0, 0, 0, 0.12);
  border-color: rgba(212, 136, 6, 0.5);
}

/* Cursor-Following Radial Shine Sweep Overlay */
.tilt-card__shine {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 260px at var(--mx) var(--my),
    rgba(255, 255, 255, 0.35),
    rgba(245, 166, 35, 0.15) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.25s ease-out;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 10;
}

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

/* 3D Elevated Content Body */
.tilt-card__body {
  transform: translateZ(25px);
  position: relative;
  z-index: 2;
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  .tilt-card {
    transition: none;
    transform: none !important;
  }
  .tilt-card__shine {
    display: none;
  }
}