/* ═══════════════════════════════════════════════════════════════
   SKILL CARDS HOVER FIX - 3D PERSPECTIVE LIKE IT RESOURCES CARD
   ═══════════════════════════════════════════════════════════════ */

/* Force skill cards to be visible and interactive */
.skill-card {
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) !important;
  transform-style: preserve-3d !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 3D perspective hover effect like IT Resources card */
.skill-card:hover {
  transform: perspective(1000px) rotateX(-2deg) rotateY(3deg) translateY(-12px) scale(1.03) !important;
  border-color: var(--accent) !important;
  box-shadow:
    0 20px 60px rgba(255, 46, 63, 0.25),
    0 10px 30px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Make sure skill card gradient overlay shows on hover */
.skill-card:hover::before {
  opacity: 1 !important;
}

/* Make sure top accent line appears on hover */
.skill-card:hover::after {
  transform: scaleX(1) !important;
}

/* Make sure icon animates on hover */
.skill-card:hover .skill-icon-wrap {
  transform: rotate(-8deg) scale(1.2) translateZ(20px) !important;
  background: linear-gradient(
    135deg,
    rgba(255, 46, 63, 0.3),
    rgba(179, 18, 31, 0.2)
  ) !important;
  border-color: var(--accent) !important;
  box-shadow:
    0 10px 30px rgba(255, 46, 63, 0.4),
    0 0 50px rgba(255, 46, 63, 0.3) !important;
}

/* Make skill name glow on hover */
.skill-card:hover .skill-name {
  color: var(--accent) !important;
  text-shadow: 0 0 25px rgba(255, 46, 63, 0.6) !important;
  transform: translateZ(10px) !important;
}

/* Make description lighter on hover */
.skill-card:hover .skill-desc {
  color: var(--text) !important;
  transform: translateZ(5px) !important;
}

/* Show particles on hover */
.skill-card:hover .skill-particles {
  opacity: 1 !important;
}

/* Show corner accent on hover */
.skill-card:hover .corner-accent {
  transform: scale(1.5) !important;
  opacity: 1 !important;
}

/* Show badge on hover */
.skill-card:hover .skill-badge {
  opacity: 1 !important;
  transform: translateY(0) translateZ(15px) !important;
}

/* Make skill meter pop out */
.skill-card:hover .skill-meter {
  transform: translateZ(10px) !important;
}

/* Override any existing styles that might interfere */
.skills-grid .skill-card {
  opacity: 1 !important;
}

/* Ensure all child elements can be transformed in 3D */
.skill-card * {
  visibility: visible !important;
  transform-style: preserve-3d !important;
}

/* Make sure the grid supports 3D transforms */
.skills-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  perspective: 1500px !important;
}

/* Add subtle shadow on normal state for depth */
.skill-card {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Smooth transition back to normal state */
.skill-card:not(:hover) {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}