/* Teal accent hover utility classes */
.hover\:text-teal:hover {
    color: var(--teal);
}

.hover\:bg-teal:hover {
    background-color: var(--teal);
}

.hover\:border-teal:hover {
    border-color: var(--teal);
}

/* ========================================
    3D CARD HOVER EFFECTS
    ======================================== */

.card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform;
    contain: layout style paint;
}

.card-3d-inner {
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    transform: rotateX(var(--card-rotate-x, 0deg))
        rotateY(var(--card-rotate-y, 0deg))
        scale3d(var(--card-scale, 1), var(--card-scale, 1), 1);
    will-change: transform;
}

.card-3d-content {
    transform: translateZ(30px);
    transform-style: preserve-3d;
}

.card-3d-glow {
    position: absolute;
    inset: -2px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: inherit;
    z-index: -1;
}

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

.card-3d-shadow {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.1) 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.2) 100%
    );
    transform: translateZ(-1px);
    border-radius: inherit;
    pointer-events: none;
}

/* Enhanced glow effect for better visibility */
.card-3d::before {
    content: "";
    position: absolute;
    inset: -1px;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
    z-index: -2;
    filter: blur(20px);
    pointer-events: none;
}

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

/* ========================================
    PROJECT CARD 3D EFFECTS (Framer Motion)
    ======================================== */

.project-card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform;
    contain: layout style paint;
}

.project-card-inner {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Subtle glow animation for project cards */
@keyframes subtle-glow-pulse {
    0%,
    100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .project-card-3d,
    .project-card-inner {
        transform: none !important;
        transition: none !important;
    }
}

/* ========================================
    LIQUID GLASS HOVER EFFECTS
    ======================================== */

.glass-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transform: skewX(-25deg);
    transition: left 0.7s ease;
    pointer-events: none;
}

.glass:hover .glass-shine {
    left: 150%;
}