/* tilt.css */
/* 3D tilt visual layer */

.tilt {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
  will-change: transform;
  border-radius: 6px;
}

.tilt:hover {
  box-shadow:
    0 12px 32px rgba(0, 255, 200, 0.2),
    0 0 24px rgba(0, 255, 200, 0.3),
    inset 0 0 12px rgba(0, 255, 200, 0.2);
}

/* Stronger glow variant */
.tilt-strong:hover {
  box-shadow:
    0 15px 40px rgba(0, 180, 255, 0.45),
    0 0 40px rgba(0, 180, 255, 0.7),
    inset 0 0 25px rgba(0, 180, 255, 0.5);
}

/* Optional holographic shine layer */
.tilt-glow {
  position: relative;
}

.tilt-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    130deg,
    rgba(0, 255, 255, 0.15),
    rgba(255, 0, 255, 0.05),
    rgba(0, 255, 255, 0.1)
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
  border-radius: inherit;
}

.tilt-glow:hover::after {
  opacity: 1;
}