/* ===== Codli – Animations ===== */

/* ---------- Scroll reveal (classes are added by js/animations.js) ---------- */
.reveal {
    opacity: 0;
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
.reveal.fade-up    { transform: translateY(40px); }
.reveal.fade-left  { transform: translateX(-50px); }
.reveal.fade-right { transform: translateX(50px); }
.reveal.zoom-in    { transform: scale(.9); }
.reveal.in-view {
    opacity: 1;
    transform: none;
}

/* ---------- Hero slider text animation ---------- */
.hero-slider .carousel-item.active .hero-content h1,
.hero-slider .carousel-item.active .hero-content p,
.hero-slider .carousel-item.active .hero-content .btn {
    opacity: 0;
    animation: heroUp .9s cubic-bezier(.22, .61, .36, 1) forwards;
}
.hero-slider .carousel-item.active .hero-content h1  { animation-delay: .25s; }
.hero-slider .carousel-item.active .hero-content p   { animation-delay: .55s; }
.hero-slider .carousel-item.active .hero-content .btn { animation-delay: .85s; }

@keyframes heroUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Inner page header ---------- */
.page-header-anim {
    opacity: 0;
    animation: heroUp .9s ease .2s forwards;
}

/* ---------- Hover effects ---------- */
.service-item,
.team-item,
.testimonial-item,
.process-step,
.counter-item,
.project-delivered-card,
.tech-item,
.clients-logo-item,
.faq-item {
    transition: transform .35s ease, box-shadow .35s ease;
}
.service-item:hover,
.process-step:hover,
.counter-item:hover,
.project-delivered-card:hover,
.tech-item:hover,
.clients-logo-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
}
.team-item:hover,
.testimonial-item:hover {
    box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
}
.team-item img,
.portfolio-item img,
.project-image img {
    transition: transform .6s ease;
}
.team-item:hover img,
.portfolio-item:hover img,
.project-image:hover img {
    transform: scale(1.06);
}
.btn {
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.btn:hover {
    transform: translateY(-3px);
}
.step-number {
    transition: transform .4s ease;
}
.process-step:hover .step-number {
    transform: rotate(360deg) scale(1.1);
}
.navbar .nav-link {
    transition: color .25s ease;
}

/* ---------- Floating back-to-top ---------- */
.back-to-top {
    animation: floatY 2.4s ease-in-out infinite;
}
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ---------- Respect reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal, .page-header-anim,
    .hero-slider .carousel-item.active .hero-content h1,
    .hero-slider .carousel-item.active .hero-content p,
    .hero-slider .carousel-item.active .hero-content .btn {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    .back-to-top { animation: none !important; }
}