/* Standard Keyframes */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animations Initialization */

/* 1. Hero Elements */
.hero-title,
.hero-title-2,
.hero-desc,
.btn-1,
.btn-2,
.hero-socials {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000),
        transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.hero-image {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 1s cubic-bezier(0.175, 0.885, 0.320, 1.275),
        transform 1s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

/* Hero "In View" State */
.hero-title.in-view,
.hero-title-2.in-view,
.hero-desc.in-view,
.btn-1.in-view,
.btn-2.in-view,
.hero-socials.in-view {
    opacity: 1;
    transform: translateY(0);
}

.hero-image.in-view {
    opacity: 1;
    transform: scale(1);
}

/* 2. Scroll Elements (Titles, Text, Cards) */
.section-title,
.gallery-title,
.gallery-subtitle,
.about-text,
.resume-div p,
.timeline-item,
.skill-tag,
.value-card,
.project-card,
.gallery-item,
.form-group,
.submit-btn,
.blog-detail-header,
.blog-detail-image,
.blog-detail-content>*,
.blog-detail-footer {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Add delays using the variable set by JS for staggers */
.skill-tag,
.value-card,
.project-card,
.gallery-item,
.timeline-item,
.form-group {
    transition-delay: var(--delay, 0s);
}

/* Active State */
.in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Specific Tweak for Timeline to slide from side? No, pure fade up is cleaner usually, 
   but let's do a subtle side slide for timeline items if desired. 
   For now, sticking to fadeUp for consistency. */

/* Button Hover Effects (CSS based, no JS) */
.btn-1,
.btn-2,
.submit-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.8s, transform 0.8s;
    /* mixture of animation + hover transition */
}

.btn-1:hover,
.btn-2:hover,
.submit-btn:hover {
    transform: scale(1.05) translateY(0) !important;
    /* Override in-view transform for hover */
}