/**
* HOVER EFFECTS
* Premium hover animations and interactions
* 2025/2026 Hover Effect Best Practices
*/

/* ============================================
  CARD HOVER EFFECTS
  ============================================ */
.card-hover,
.project-card,
.project-card-animated,
.blog-card,
.blog-card-animated,
.card-premium {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.card-hover::before,
.project-card::before,
.project-card-animated::before,
.blog-card::before,
.blog-card-animated::before,
.card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    pointer-events: none;
}

.card-hover:hover,
.project-card:hover,
.project-card-animated:hover,
.blog-card:hover,
.blog-card-animated:hover,
.card-premium:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(102, 126, 234, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
}

.card-hover:hover::before,
.project-card:hover::before,
.project-card-animated:hover::before,
.blog-card:hover::before,
.blog-card-animated:hover::before,
.card-premium:hover::before {
    opacity: 1;
}

.card-hover > *,
.project-card > *,
.project-card-animated > *,
.blog-card > *,
.blog-card-animated > *,
.card-premium > * {
    position: relative;
    z-index: 1;
}

/* Card image hover effect */
.card-hover .project-image img,
.project-card .project-image img,
.project-card-animated .project-image img,
.blog-card .blog-img img,
.blog-card-animated .blog-img img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover .project-image img,
.project-card:hover .project-image img,
.project-card-animated:hover .project-image img,
.blog-card:hover .blog-img img,
.blog-card-animated:hover .blog-img img {
    transform: scale(1.1);
}

/* ============================================
  ICON HOVER EFFECTS
  ============================================ */
.icon-hover,
i[class*="fa-"],
.icon,
svg {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

.icon-hover:hover,
i[class*="fa-"]:hover,
.icon:hover {
    transform: scale(1.2) rotate(5deg);
    color: #667eea;
    filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.4));
}

/* Social icons hover */
.social-icon,
.profile-social a,
.nav-link i,
.fab,
.fas.fa-linkedin,
.fas.fa-github,
.fas.fa-twitter,
.fas.fa-instagram {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icon:hover,
.profile-social a:hover,
.nav-link:hover i {
    transform: translateY(-3px) scale(1.15);
    color: #667eea;
}

.profile-social a:hover i.fa-linkedin {
    color: #0077b5;
    transform: translateY(-3px) scale(1.15) rotate(-5deg);
}

.profile-social a:hover i.fa-github {
    color: #333;
    transform: translateY(-3px) scale(1.15) rotate(5deg);
}

.profile-social a:hover i.fa-x-twitter,
.profile-social a:hover i.fa-twitter {
    color: #1da1f2;
    transform: translateY(-3px) scale(1.15) rotate(-5deg);
}

.profile-social a:hover i.fa-instagram {
    color: #e4405f;
    transform: translateY(-3px) scale(1.15) rotate(5deg);
}

/* ============================================
  BUTTON HOVER EFFECTS
  ============================================ */
.btn-hover,
.btn,
button,
.btn-premium,
.btn-primary,
.view-project,
.read-more {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hover::after,
.btn::after,
button::after,
.btn-premium::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-hover:hover::after,
.btn:hover::after,
button:hover::after,
.btn-premium:hover::after {
    width: 300px;
    height: 300px;
}

.btn-hover:hover,
.btn:hover,
button:hover,
.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(102, 126, 234, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-hover:active,
.btn:active,
button:active,
.btn-premium:active {
    transform: translateY(0);
}

/* Link hover effects */
a:not(.btn):not(.nav-link):not(.social-icon) {
    position: relative;
    transition: color 0.3s ease;
}

a:not(.btn):not(.nav-link):not(.social-icon)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s ease;
}

a:not(.btn):not(.nav-link):not(.social-icon):hover::after {
    width: 100%;
}

a:not(.btn):not(.nav-link):not(.social-icon):hover {
    color: #667eea;
}

/* ============================================
  IMAGE HOVER EFFECTS
  ============================================ */
.img-hover,
img:not(.no-hover) {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.img-hover::after,
img:not(.no-hover)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.img-hover:hover,
img:not(.no-hover):hover {
    transform: scale(1.05);
    filter: brightness(1.1) contrast(1.05);
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.3);
}

.img-hover:hover::after,
img:not(.no-hover):hover::after {
    opacity: 1;
}

/* ============================================
  TAG/BADGE HOVER EFFECTS
  ============================================ */
.tag-hover,
.badge-premium,
.card-tag,
.badge {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    cursor: pointer;
}

.tag-hover:hover,
.badge-premium:hover,
.card-tag:hover,
.badge:hover {
    transform: translateY(-2px) scale(1.05);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* ============================================
  NAVIGATION HOVER EFFECTS
  ============================================ */
.nav-link-hover,
.nav-link,
.nav-link-enhanced {
    position: relative;
    transition: all 0.3s ease;
}

.nav-link-hover::before,
.nav-link::before,
.nav-link-enhanced::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s ease;
    border-radius: 3px 3px 0 0;
}

.nav-link-hover:hover::before,
.nav-link:hover::before,
.nav-link-enhanced:hover::before {
    width: 80%;
}

.nav-link-hover:hover,
.nav-link:hover,
.nav-link-enhanced:hover {
    color: #667eea;
    transform: translateY(-2px);
}

/* ============================================
  INPUT HOVER EFFECTS
  ============================================ */
.input-hover,
.form-input-enhanced,
input:not([type="submit"]):not([type="button"]),
textarea,
select {
    transition: all 0.3s ease;
}

.input-hover:hover,
.form-input-enhanced:hover,
input:not([type="submit"]):not([type="button"]):hover,
textarea:hover,
select:hover {
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* ============================================
  PROFILE CARD HOVER
  ============================================ */
.profile-card-hover,
.profile-card-animated {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-card-hover:hover,
.profile-card-animated:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 
        0 25px 50px rgba(102, 126, 234, 0.2),
        0 10px 20px rgba(0, 0, 0, 0.1);
}

.profile-card-hover:hover .profile-image,
.profile-card-animated:hover .profile-image {
    transform: scale(1.05);
}

.profile-image {
    transition: transform 0.4s ease;
}

/* ============================================
  SECTION TITLE HOVER
  ============================================ */
.section-title-hover,
.section-title {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
}

.section-title-hover::after,
.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.4s ease;
    border-radius: 2px;
}

.section-title-hover:hover::after,
.section-title:hover::after {
    width: 100%;
}

.section-title-hover:hover,
.section-title:hover {
    color: #667eea;
    transform: translateX(5px);
}

/* ============================================
  LIST ITEM HOVER
  ============================================ */
.list-item-hover,
li:not(.no-hover) {
    transition: all 0.3s ease;
    padding: 4px 0;
}

.list-item-hover:hover,
li:not(.no-hover):hover {
    transform: translateX(8px);
    color: #667eea;
    padding-left: 8px;
}

/* ============================================
  TABLE ROW HOVER
  ============================================ */
.table-row-hover,
tr:not(.no-hover) {
    transition: all 0.3s ease;
}

.table-row-hover:hover,
tr:not(.no-hover):hover {
    background: rgba(102, 126, 234, 0.05);
    transform: scale(1.01);
}

/* ============================================
  GLOW HOVER EFFECT
  ============================================ */
.glow-hover {
    transition: all 0.3s ease;
}

.glow-hover:hover {
    box-shadow: 
        0 0 20px rgba(102, 126, 234, 0.5),
        0 0 40px rgba(118, 75, 162, 0.3);
    transform: scale(1.05);
}

/* ============================================
  ROTATE HOVER EFFECT
  ============================================ */
.rotate-hover {
    transition: transform 0.3s ease;
}

.rotate-hover:hover {
    transform: rotate(5deg) scale(1.1);
}

/* ============================================
  BOUNCE HOVER EFFECT
  ============================================ */
.bounce-hover {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.bounce-hover:hover {
    transform: translateY(-8px);
}

/* ============================================
  SHIMMER HOVER EFFECT
  ============================================ */
.shimmer-hover {
    position: relative;
    overflow: hidden;
}

.shimmer-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    transition: left 0.5s ease;
}

.shimmer-hover:hover::before {
    left: 100%;
}

/* ============================================
  RESPONSIVE DESIGN
  ============================================ */
@media (max-width: 768px) {
    .card-hover:hover,
    .project-card:hover,
    .project-card-animated:hover {
        transform: translateY(-4px) scale(1.01);
    }

    .icon-hover:hover,
    i[class*="fa-"]:hover {
        transform: scale(1.1);
    }
}

/* ============================================
  ACCESSIBILITY
  ============================================ */
@media (prefers-reduced-motion: reduce) {
    .card-hover,
    .icon-hover,
    .btn-hover,
    .img-hover,
    .tag-hover,
    .nav-link-hover,
    .profile-card-hover,
    .section-title-hover,
    .list-item-hover,
    .table-row-hover,
    .glow-hover,
    .rotate-hover,
    .bounce-hover,
    .shimmer-hover {
        transition: none;
    }

    .card-hover:hover,
    .icon-hover:hover,
    .btn-hover:hover,
    .img-hover:hover,
    .tag-hover:hover,
    .nav-link-hover:hover,
    .profile-card-hover:hover,
    .section-title-hover:hover,
    .list-item-hover:hover,
    .table-row-hover:hover,
    .glow-hover:hover,
    .rotate-hover:hover,
    .bounce-hover:hover {
        transform: none;
    }
}

/* ============================================
  TOUCH DEVICES
  ============================================ */
@media (hover: none) {
    .card-hover:hover,
    .project-card:hover,
    .project-card-animated:hover,
    .icon-hover:hover,
    .btn-hover:hover {
        transform: none;
    }
}


/* Focus styles for accessibility - Auto-added */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}