/* ===== ANIMATIONS ===== */

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide Up Animation */
@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Slide In Left Animation */
@keyframes slideInLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide In Right Animation */
@keyframes slideInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Scale Animation */
@keyframes scale {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Rotate Animation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Glitch Animation */
@keyframes glitch {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Float Animation */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Typing Animation */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

/* 3D Cube Animation */
@keyframes cubeSpin {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

/* Cube Animation */
@keyframes cubeAppear {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(50px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ===== ANIMATION CLASSES ===== */

/* Apply animations to elements */
.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

.slide-up {
    opacity: 0;
    transform: translateY(50px);
    animation: slideUp 1s ease forwards;
}

.slide-left {
    opacity: 0;
    transform: translateX(-50px);
    animation: slideInLeft 1s ease forwards;
}

.slide-right {
    opacity: 0;
    transform: translateX(50px);
    animation: slideInRight 1s ease forwards;
}

.scale-in {
    opacity: 0;
    transform: scale(0.8);
    animation: scale 1s ease forwards;
}

.rotate {
    animation: rotate 10s linear infinite;
}

.float {
    animation: float 3s ease-in-out infinite;
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Glitch Text Effect */
.glitch-text {
    position: relative;
    animation: glitch 5s infinite;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.glitch-text::before {
    color: #0ff;
    z-index: -1;
    animation: glitch 0.3s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    transform: translate(-2px, -2px);
}

.glitch-text::after {
    color: #f0f;
    z-index: -2;
    animation: glitch 0.3s infinite reverse;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    transform: translate(2px, 2px);
}

/* Typing Effect */
.typing-effect {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--accent-color);
    width: 0;
    animation: typing 3.5s steps(40, end) forwards, blink 0.75s step-end infinite;
}

/* 3D Cube Styling */
.cube-wrapper {
    perspective: 800px;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    transform-style: preserve-3d;
    opacity: 0; /* Start hidden */
}

.cube-animate {
    animation: cubeAppear 1s ease forwards !important;
    visibility: visible !important;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: cubeSpin 20s linear infinite;
}

.cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    border: 2px solid var(--accent-color);
    backface-visibility: visible;
}

.front {
    transform: translateZ(100px);
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
}

.back {
    transform: rotateY(180deg) translateZ(100px);
    background: linear-gradient(-45deg, var(--primary-color), var(--secondary-color));
}

.right {
    transform: rotateY(90deg) translateZ(100px);
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.left {
    transform: rotateY(-90deg) translateZ(100px);
    background: linear-gradient(-90deg, var(--primary-color), var(--secondary-color));
}

.top {
    transform: rotateX(90deg) translateZ(100px);
    background: linear-gradient(var(--primary-color), var(--secondary-color));
}

.bottom {
    transform: rotateX(-90deg) translateZ(100px);
    background: linear-gradient(var(--secondary-color), var(--primary-color));
}

/* Media queries for responsive cube */
@media screen and (max-width: 768px) {
    /* Adjust cube face dimensions for mobile */
    .cube-face {
        border-width: 1px;
        width: 100%;
        height: 100%;
    }
    
    /* Adjust the translateZ value to half the width of the cube */
    .front {
        transform: translateZ(75px);
    }
    
    .back {
        transform: rotateY(180deg) translateZ(75px);
    }
    
    .right {
        transform: rotateY(90deg) translateZ(75px);
    }
    
    .left {
        transform: rotateY(-90deg) translateZ(75px);
    }
    
    .top {
        transform: rotateX(90deg) translateZ(75px);
    }
    
    .bottom {
        transform: rotateX(-90deg) translateZ(75px);
    }
}

@media screen and (max-width: 600px) {
    /* Adjust cube face dimensions for medium phones */
    .front {
        transform: translateZ(75px);
    }
    
    .back {
        transform: rotateY(180deg) translateZ(75px);
    }
    
    .right {
        transform: rotateY(90deg) translateZ(75px);
    }
    
    .left {
        transform: rotateY(-90deg) translateZ(75px);
    }
    
    .top {
        transform: rotateX(90deg) translateZ(75px);
    }
    
    .bottom {
        transform: rotateX(-90deg) translateZ(75px);
    }
}

@media screen and (max-width: 480px) {
    /* Adjust cube face dimensions for smaller mobile */
    .front {
        transform: translateZ(60px);
    }
    
    .back {
        transform: rotateY(180deg) translateZ(60px);
    }
    
    .right {
        transform: rotateY(90deg) translateZ(60px);
    }
    
    .left {
        transform: rotateY(-90deg) translateZ(60px);
    }
    
    .top {
        transform: rotateX(90deg) translateZ(60px);
    }
    
    .bottom {
        transform: rotateX(-90deg) translateZ(60px);
    }
}

@media screen and (max-width: 375px) {
    /* Adjust cube face dimensions for very small phones */
    .front {
        transform: translateZ(50px);
    }
    
    .back {
        transform: rotateY(180deg) translateZ(50px);
    }
    
    .right {
        transform: rotateY(90deg) translateZ(50px);
    }
    
    .left {
        transform: rotateY(-90deg) translateZ(50px);
    }
    
    .top {
        transform: rotateX(90deg) translateZ(50px);
    }
    
    .bottom {
        transform: rotateX(-90deg) translateZ(50px);
    }
}

/* Animation Delays for Staggered Effects */
.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

.delay-4 {
    animation-delay: 0.8s;
}

.delay-5 {
    animation-delay: 1s;
}

/* Animated Background */
.animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.animated-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(100, 255, 218, 0.1) 0%, transparent 20%),
                radial-gradient(circle, rgba(100, 255, 218, 0.05) 0%, transparent 30%);
    animation: rotate 30s linear infinite;
}

/* Animated Border */
.animated-border {
    position: relative;
}

.animated-border::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    background: linear-gradient(90deg, var(--accent-color), transparent, var(--accent-color));
    border-radius: inherit;
    z-index: -1;
    animation: rotate 3s linear infinite;
}

/* Reveal Animation for Scroll */
.reveal {
    position: relative;
    /* Don't set opacity or transform here, let specific element classes handle it */
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}

.hover-glow:hover {
    box-shadow: 0 0 15px var(--accent-color);
}

/* Particle Effect (to be used with JavaScript) */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.particle {
    position: absolute;
    background-color: var(--accent-color);
    border-radius: 50%;
    opacity: 0.5;
}

/* Education & Experience Section Animations */
.timeline-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.timeline-item.animate {
    opacity: 1;
    transform: translateY(0);
}

.education-column .timeline-item:nth-child(1) {
    transition-delay: 0.2s;
}

.education-column .timeline-item:nth-child(2) {
    transition-delay: 0.4s;
}

.education-column .timeline-item:nth-child(3) {
    transition-delay: 0.6s;
}

.experience-column .timeline-item:nth-child(1) {
    transition-delay: 0.3s;
}

.experience-column .timeline-item:nth-child(2) {
    transition-delay: 0.5s;
}

.experience-column .timeline-item:nth-child(3) {
    transition-delay: 0.7s;
}

.experience-column .timeline-item:nth-child(4) {
    transition-delay: 0.9s;
}

.experience-column .timeline-item:nth-child(5) {
    transition-delay: 1.1s;
}

/* Certificates Section Animations */
.certificate-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.certificate-card.animate {
    opacity: 1;
    transform: translateY(0);
}

.certificates-grid .certificate-card:nth-child(1) {
    transition-delay: 0.2s;
}

.certificates-grid .certificate-card:nth-child(2) {
    transition-delay: 0.3s;
}

.certificates-grid .certificate-card:nth-child(3) {
    transition-delay: 0.4s;
}

.certificates-grid .certificate-card:nth-child(4) {
    transition-delay: 0.5s;
}

.certificates-grid .certificate-card:nth-child(5) {
    transition-delay: 0.6s;
}

.certificates-grid .certificate-card:nth-child(6) {
    transition-delay: 0.7s;
}

/* Mobile Adjustments for Animations */
@media screen and (max-width: 768px) {
    /* Update timeline items for horizontal transitions */
    .timeline-item {
        opacity: 0;
        transform: translateX(-30px);
        transition: opacity 0.4s ease, transform 0.4s ease;
        will-change: transform, opacity;
    }

    .timeline-item.animate {
        opacity: 1;
        transform: translateX(0);
    }

    /* Update certificate cards for horizontal transitions */
    .certificate-card {
        opacity: 0;
        transform: translateX(30px);
        transition: opacity 0.4s ease, transform 0.4s ease;
        will-change: transform, opacity;
    }

    .certificate-card.animate {
        opacity: 1;
        transform: translateX(0);
    }

    /* Keep other mobile adjustments */
    .reveal, 
    .about-content,
    .about-image,
    .about-text,
    .detail-item,
    .skill-category,
    .skill-item,
    .project-card,
    .section-title,
    .projects-filter {
        transform: none !important;
    }

    /* Modify animations to only use opacity for mobile */
    .reveal.active,
    .about-content.animate,
    .about-image.animate,
    .about-text.animate,
    .detail-item.animate,
    .skill-category.animate,
    .skill-item.animate,
    .project-card.animate,
    .section-title.animate,
    .projects-filter.animate {
        transform: none !important;
        opacity: 1;
    }

    /* Adjust project card animations for mobile */
    .project-card {
        transition: opacity 0.6s ease;
    }

    .project-card:hover {
        transform: none !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    /* Remove 3D effects on mobile */
    .project-card:hover .project-img,
    .project-card:hover .project-info,
    .project-card:hover .project-tech span,
    .project-card:hover .project-links a {
        transform: none !important;
    }

    /* Ensure sections don't have vertical scroll */
    section {
        overflow: visible !important;
        height: auto !important;
    }

    /* Modify entrance animations for mobile */
    .project-card.entrance-animation {
        animation: none;
        opacity: 1;
        transform: none !important;
    }

    /* Adjust filter animations for mobile */
    .project-card.filter-fade-in {
        animation: filterFadeMobile 0.6s ease forwards;
    }

    @keyframes filterFadeMobile {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
}

/* Home Section Text Animation */
.home-text-hidden {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    visibility: hidden !important;
}

.home-text-animate {
    animation: slideUp 1s ease forwards !important;
    visibility: visible !important;
}

/* About Section Animations */
.about-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.about-content.animate {
    opacity: 1;
    transform: translateY(0);
}

.about-image {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
    transition-delay: 0.2s;
}

.about-image.animate {
    opacity: 1;
    transform: translateY(0);
}

.about-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
    transition-delay: 0.4s;
}

.about-text.animate {
    opacity: 1;
    transform: translateY(0);
}

.detail-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.detail-item.animate {
    opacity: 1;
    transform: translateY(0);
}

.about-details .detail-item:nth-child(1) {
    transition-delay: 0.6s;
}

.about-details .detail-item:nth-child(2) {
    transition-delay: 0.7s;
}

.about-details .detail-item:nth-child(3) {
    transition-delay: 0.8s;
}

/* Skills Section Animations */
.skill-category {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.skill-category.animate {
    opacity: 1;
    transform: translateY(0);
}

.skill-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.skill-item.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation for skill items */
.skills-grid .skill-item:nth-child(1) { transition-delay: 0.2s; }
.skills-grid .skill-item:nth-child(2) { transition-delay: 0.25s; }
.skills-grid .skill-item:nth-child(3) { transition-delay: 0.3s; }
.skills-grid .skill-item:nth-child(4) { transition-delay: 0.35s; }
.skills-grid .skill-item:nth-child(5) { transition-delay: 0.4s; }
.skills-grid .skill-item:nth-child(6) { transition-delay: 0.45s; }
.skills-grid .skill-item:nth-child(7) { transition-delay: 0.5s; }
.skills-grid .skill-item:nth-child(8) { transition-delay: 0.55s; }
.skills-grid .skill-item:nth-child(9) { transition-delay: 0.6s; }
.skills-grid .skill-item:nth-child(10) { transition-delay: 0.65s; }

/* Skill progress animation */
.skill-progress {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s ease;
    transition-delay: 0.5s;
}

.skill-item.animate .skill-progress {
    transform: scaleX(var(--progress-value, 0.8));
}

/* Projects Section Animations */
.projects-section .section-title {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

.projects-section .section-title.animate {
    opacity: 1;
    transform: translateY(0);
}

.projects-filter {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: 0.2s;
}

.projects-filter.animate {
    opacity: 1;
    transform: translateY(0);
}

.filter-btn {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 1;
}

.filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color);
    opacity: 0;
    transform: scale(0.8);
    border-radius: inherit;
    z-index: -1;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
}

.filter-btn:hover::before,
.filter-btn.active::before {
    opacity: 0.1;
    transform: scale(1);
}

.filter-btn.active {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.project-card {
    perspective: 1000px;
    transform-style: preserve-3d;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.3s ease;
    transform-origin: center;
    will-change: transform, opacity;
    visibility: visible; /* Ensure the card is structurally visible but opacity is 0 */
}

.project-card.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Ensure project cards are initially hidden until scrolled into view */
.projects-section:not(.animated) .project-card {
    opacity: 0 !important;
    transform: translateY(30px) scale(0.95) !important;
    pointer-events: none !important; /* Prevent interaction until animated */
}

.projects-section.animated .project-card {
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.3s ease;
    pointer-events: auto; /* Re-enable interaction after animation */
}

.projects-section.animated .project-card.animate {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

.project-card:hover {
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.project-card:hover .project-img {
    transform: translateZ(20px);
}

.project-card:hover .project-tech span {
    transform: translateZ(15px);
}

.project-card:hover .project-links a {
    transform: translateZ(20px);
}

.projects-grid .project-card:nth-child(1) { transition-delay: 0.15s; }
.projects-grid .project-card:nth-child(2) { transition-delay: 0.25s; }
.projects-grid .project-card:nth-child(3) { transition-delay: 0.35s; }
.projects-grid .project-card:nth-child(4) { transition-delay: 0.45s; }
.projects-grid .project-card:nth-child(5) { transition-delay: 0.55s; }
.projects-grid .project-card:nth-child(6) { transition-delay: 0.65s; }

.project-img {
    position: relative;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-img img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.project-card:hover .project-img::before {
    opacity: 1;
}

.project-card:hover .project-img img {
    transform: scale(1.1);
}

.project-tech span {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.project-tech span.animate {
    opacity: 1;
    transform: translateY(0);
}

.project-tech span:hover {
    background-color: var(--accent-color);
    color: var(--primary-color);
    transform: translateY(0) scale(1.05);
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-links {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    transition: opacity 0.5s ease;
    position: relative;
    z-index: 5;
}

.project-links a {
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1 !important; /* Ensure buttons are always visible */
    transform: translateY(0) !important; /* Ensure buttons are always in position */
    visibility: visible !important; /* Ensure buttons are always visible */
}

.project-links a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--accent-color);
    opacity: 0.2;
    transition: width 0.3s ease;
    z-index: -1;
}

.project-links a:hover::before {
    width: 100%;
}

.project-links a:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Filter animation */
@keyframes filterFade {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.project-card.filter-fade-in {
    animation: filterFade 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    display: flex !important;
}

.project-card.filter-fade-out {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

/* Ensure project links remain visible during animations */
.project-card.filter-fade-in .project-links a,
.project-card.animate .project-links a,
.project-card .project-links a {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Add a subtle glow effect to buttons on hover */
.project-card .project-links a:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Add a subtle entrance animation for project cards */
@keyframes projectEntrance {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    70% {
        opacity: 1;
        transform: translateY(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.project-card.entrance-animation {
    animation: projectEntrance 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Mobile adjustments for project animations */
@media screen and (max-width: 480px) {
    .project-card:hover {
        transform: translateY(-3px) rotateX(0);
    }
}

@media screen and (max-width: 600px) {
    .project-card {
        transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .projects-grid .project-card:nth-child(1) { transition-delay: 0.1s; }
    .projects-grid .project-card:nth-child(2) { transition-delay: 0.2s; }
    .projects-grid .project-card:nth-child(3) { transition-delay: 0.3s; }
    .projects-grid .project-card:nth-child(4) { transition-delay: 0.4s; }
    .projects-grid .project-card:nth-child(5) { transition-delay: 0.5s; }
    .projects-grid .project-card:nth-child(6) { transition-delay: 0.6s; }
}

@media screen and (max-width: 375px) {
    .project-card {
        transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .projects-grid .project-card:nth-child(1) { transition-delay: 0.1s; }
    .projects-grid .project-card:nth-child(2) { transition-delay: 0.2s; }
    .projects-grid .project-card:nth-child(3) { transition-delay: 0.3s; }
    .projects-grid .project-card:nth-child(4) { transition-delay: 0.4s; }
    .projects-grid .project-card:nth-child(5) { transition-delay: 0.5s; }
    .projects-grid .project-card:nth-child(6) { transition-delay: 0.6s; }
}