/* ============================================
   EDUCATION CARDS - ENHANCED DESIGN
   Mobile: Beautiful animated cards
   Desktop: Smooth cursor-following 3D
   ============================================ */

/* Desktop - Cursor Following 3D Cards */
@media (min-width: 769px) {
    .education-item {
        position: relative;
        padding: 45px;
        
        /* Thick 2.5D Acrylic Glass Effect */
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.12) 100%);
        backdrop-filter: blur(40px) saturate(180%);
        -webkit-backdrop-filter: blur(40px) saturate(180%);
        
        border: 1.5px solid rgba(255, 255, 255, 0.3);
        border-radius: 24px;
        
        box-shadow: 
            inset 0 1px 2px rgba(255, 255, 255, 0.5),
            inset 0 -2px 4px rgba(0, 0, 0, 0.1),
            0 4px 0 rgba(0, 0, 0, 0.1),
            0 8px 0 rgba(0, 0, 0, 0.08),
            0 12px 0 rgba(0, 0, 0, 0.06),
            0 16px 40px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.1);
        
        /* Smooth 3D transform - will be updated by cursor */
        transform: perspective(1000px) translateZ(0) rotateX(0deg) rotateY(0deg);
        transform-style: preserve-3d;
        
        /* Ultra smooth transitions - NO delay */
        transition: box-shadow 0.05s linear,
                    background 0.2s ease;
        
        /* Will-change for performance */
        will-change: transform;
    }

    .education-item:hover {
        box-shadow: 
            inset 0 1px 3px rgba(255, 255, 255, 0.6),
            inset 0 -2px 6px rgba(0, 0, 0, 0.15),
            0 5px 0 rgba(0, 0, 0, 0.12),
            0 10px 0 rgba(0, 0, 0, 0.1),
            0 15px 0 rgba(0, 0, 0, 0.08),
            0 20px 50px rgba(0, 0, 0, 0.4),
            0 0 0 1px rgba(255, 255, 255, 0.15);
    }
}

/* Mobile - Beautiful Animated Cards */
@media (max-width: 768px) {
    .education-item {
        position: relative;
        padding: 30px 25px;
        margin-bottom: 25px;
        
        /* Modern card design */
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.06) 100%);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 20px;
        
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 1px rgba(255, 255, 255, 0.4);
        
        transform: translateY(0);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .education-item:active {
        transform: translateY(2px);
        box-shadow: 
            0 4px 16px rgba(0, 0, 0, 0.15),
            inset 0 1px 1px rgba(255, 255, 255, 0.3);
    }
    
    /* Mobile Text Styling - Clean & Modern */
    .education-item strong {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-color);
        margin-bottom: 12px;
        display: block;
        line-height: 1.4;
        text-align: left;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        
        /* Fade in animation */
        opacity: 0;
        transform: translateY(10px);
        animation: fadeInUp 0.6s ease forwards;
    }
    
    .education-item span {
        font-size: 0.95rem;
        color: rgba(220, 227, 232, 0.8);
        display: block;
        text-align: left;
        font-weight: 400;
        line-height: 1.5;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
        
        /* Fade in animation - delayed */
        opacity: 0;
        transform: translateY(10px);
        animation: fadeInUp 0.6s ease 0.2s forwards;
    }
    
    /* Fade in animation */
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Scroll trigger animation */
    .education-item.is-visible strong {
        animation: fadeInUp 0.6s ease forwards;
    }
    
    .education-item.is-visible span {
        animation: fadeInUp 0.6s ease 0.2s forwards;
    }
}

/* Shared styles for all screen sizes */
.education-item strong {
    position: relative;
    z-index: 1;
}

.education-item span {
    position: relative;
    z-index: 1;
}

.education-item br {
    display: none;
}

/* Glass reflection layer */
.education-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%);
    border-radius: 24px 24px 0 0;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px) {
    .education-item::before {
        border-radius: 20px 20px 0 0;
    }
}