/**
 * Feature Tilt Effect Component
 *
 * 3D perspective tilt on hover using mouse position.
 * Driven by CSS custom properties --tilt-x and --tilt-y set via JavaScript.
 * Fully disabled on touch devices and for users who prefer reduced motion.
 */

/* ===================================================================
   Tilt Container Setup
   =================================================================== */

.feature-tilt {
  transform-style: preserve-3d;
  perspective: 1000px;
  backface-visibility: hidden;
  will-change: transform;
}

/* ===================================================================
   Default State - Fast Transition
   =================================================================== */

.feature-tilt {
  transition: transform 0.1s ease-out, box-shadow 0.3s ease-out;
}

/* ===================================================================
   Hover State - 3D Tilt Transform
   =================================================================== */

.feature-tilt:hover {
  transform: perspective(1000px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    scale3d(1.02, 1.02, 1.02);
}

/* Glow effect on hover */
.feature-tilt:hover {
  box-shadow:
    var(--shadow-lg),
    0 0 30px rgba(139, 92, 246, 0.2),
    0 0 60px rgba(6, 182, 212, 0.1);
}

/* ===================================================================
   Return to Neutral - Slower Transition
   =================================================================== */

.feature-tilt:not(:hover) {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* ===================================================================
   Accessibility - Touch Devices (No Hover Capability)
   =================================================================== */

@media (hover: none) {
  .feature-tilt {
    will-change: auto;
    transform: none !important;
  }

  .feature-tilt:hover {
    box-shadow: var(--shadow-lg);
  }
}

/* ===================================================================
   Accessibility - Reduced Motion Preference
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  .feature-tilt {
    will-change: auto;
    transform: none !important;
    transition: none;
  }

  .feature-tilt:hover {
    box-shadow: var(--shadow-lg);
  }
}