/* ============================================================================
   PROJECT ANIMATIONS — Canopus.lk
   Modern, subtle transitions & reveal effects
   ============================================================================ */


/* ------------------------------
   FADE + SLIDE UP ANIMATION
------------------------------ */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(22px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    opacity: 0;
    animation: fadeUp 0.8s ease-out forwards;
}


/* ------------------------------
   FADE IN (SIMPLE)
------------------------------ */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.9s ease forwards;
}


/* ------------------------------
   SLIDE-IN FROM LEFT
------------------------------ */
@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translateX(-25px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-left {
    opacity: 0;
    animation: slideLeft 0.9s ease-out forwards;
}


/* ------------------------------
   SLIDE-IN FROM RIGHT
------------------------------ */
@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translateX(25px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-right {
    opacity: 0;
    animation: slideRight 0.9s ease-out forwards;
}


/* ------------------------------
   HERO IMAGE ZOOM FADE
------------------------------ */
@keyframes heroZoomFade {
    0% {
        opacity: 0;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-animate {
    animation: heroZoomFade 1.2s ease-out forwards;
}


/* ------------------------------
   CARD HOVER ELEVATION
------------------------------ */
.card-hover,
.info-card,
.meta-box {
    transition: transform 0.25s ease, box-shadow 0.3s ease;
}

.card-hover:hover,
.info-card:hover,
.meta-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.14);
}


/* ------------------------------
   DELAYED REVEAL SEQUENCES
------------------------------ */
.reveal-delay-1 { animation-delay: 0.2s; }
.reveal-delay-2 { animation-delay: 0.35s; }
.reveal-delay-3 { animation-delay: 0.5s; }
.reveal-delay-4 { animation-delay: 0.65s; }


/* ------------------------------
   LINK HOVER FADE / SLIDE
------------------------------ */
@keyframes linkUnderline {
    0% { width: 0; opacity: 0; }
    100% { width: 100%; opacity: 1; }
}

.link-animate {
    position: relative;
}

.link-animate:hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 2px;
    width: 0;
    background: #198754;
    animation: linkUnderline 0.35s ease-out forwards;
}