/**
 * Talserv — premium micro-interactions & motion
 * Uses transform/opacity only. Respects prefers-reduced-motion.
 */

html {
    scroll-behavior: smooth;
}

/* ---------- Prefers reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .ts-preloader,
    .ts-scroll-progress,
    .ts-back-to-top {
        display: none !important;
    }

    .ts-reveal,
    main,
    #heroSection,
    .page-hero,
    .ts-hero-animate .hero-title-line,
    .ts-hero-animate .hero-description,
    .ts-hero-animate .hero-cta,
    .ts-hero-animate .hero-image-frame,
    .ts-hero-animate .hero-floating-card,
    #siteNavbar .navbar-brand,
    #siteNavbar .navbar-nav .nav-item,
    #siteNavbar .navbar-auth {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* Soft page fade — applied to main content containers, not body (keeps preloader visible) */
main,
#heroSection,
.page-hero {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
    will-change: opacity, transform;
}

body.ts-page-ready main,
body.ts-page-ready #heroSection,
body.ts-page-ready .page-hero {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ---------- Preloader ---------- */
.ts-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: opacity 400ms ease-out, visibility 400ms ease-out;
}

.ts-preloader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ts-preloader img {
    height: 85px;
    width: auto;
    max-width: min(320px, 80vw);
    object-fit: contain;
    animation: tsPreloadPulse 800ms ease-in-out infinite alternate;
}

@media (max-width: 575.98px) {
    .ts-preloader img {
        height: 64px;
    }
}

@keyframes tsPreloadPulse {
    from {
        opacity: 0.55;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---------- Scroll progress ---------- */
.ts-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    z-index: 10000;
    background: linear-gradient(90deg, var(--primary-color), #ff5a5f);
    transform-origin: left center;
    pointer-events: none;
    will-change: width;
}

/* ---------- Back to top ---------- */
.ts-back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    border: none;
    background: var(--primary-color);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(215, 25, 32, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 12px, 0);
    transition: opacity 350ms ease-out, transform 350ms ease-out, visibility 350ms ease-out, background-color 250ms ease;
    cursor: pointer;
}

.ts-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}

.ts-back-to-top:hover {
    background: var(--primary-hover);
    transform: translate3d(0, -2px, 0) scale(1.03);
}

/* ---------- Navbar entrance ---------- */
#siteNavbar .navbar-brand {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}

#siteNavbar .navbar-nav .nav-item {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
    transition: opacity 450ms ease-out, transform 450ms ease-out;
}

#siteNavbar .navbar-auth {
    opacity: 0;
    transform: translate3d(16px, 0, 0);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}

body.ts-page-ready #siteNavbar .navbar-brand {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.ts-page-ready #siteNavbar .navbar-nav .nav-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.ts-page-ready #siteNavbar .navbar-nav .nav-item:nth-child(1) { transition-delay: 80ms; }
body.ts-page-ready #siteNavbar .navbar-nav .nav-item:nth-child(2) { transition-delay: 140ms; }
body.ts-page-ready #siteNavbar .navbar-nav .nav-item:nth-child(3) { transition-delay: 200ms; }
body.ts-page-ready #siteNavbar .navbar-nav .nav-item:nth-child(4) { transition-delay: 260ms; }
body.ts-page-ready #siteNavbar .navbar-nav .nav-item:nth-child(5) { transition-delay: 320ms; }
body.ts-page-ready #siteNavbar .navbar-nav .nav-item:nth-child(6) { transition-delay: 380ms; }

body.ts-page-ready #siteNavbar .navbar-auth {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 440ms;
}

#siteNavbar .nav-link {
    position: relative;
    transition: color 280ms ease;
}

#siteNavbar .nav-link::after {
    content: '';
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.15rem;
    height: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 300ms ease-out;
}

#siteNavbar .nav-link:hover::after,
#siteNavbar .nav-link.active::after {
    transform: scaleX(1);
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #siteNavbar .nav-link::after {
        left: 0.65rem;
        right: 0.65rem;
    }
}

@media (max-width: 991.98px) {
    #siteNavbar .nav-link::after {
        left: 0.5rem;
        right: 0.5rem;
    }
}

/* ---------- Global buttons ---------- */
.btn {
    transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease, transform 280ms ease, box-shadow 280ms ease;
    will-change: transform;
}

.btn:hover {
    transform: scale(1.03);
}

.btn i.fa-arrow-right,
.service-link i {
    transition: transform 280ms ease;
    display: inline-block;
}

.btn:hover i.fa-arrow-right,
.service-card:hover .service-link i {
    transform: translateX(4px);
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
}

.form-control:focus,
.form-select:focus {
    transform: translateY(-1px);
}

.form-label {
    transition: color 250ms ease;
}

.form-control:focus + .form-label,
.form-floating:focus-within .form-label,
.mb-3:focus-within .form-label {
    color: var(--primary-color);
}

/* ---------- Reveal on scroll ---------- */
.ts-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 650ms ease-out, transform 650ms ease-out, filter 650ms ease-out;
    will-change: opacity, transform;
}

.ts-reveal.ts-fade {
    transform: translate3d(0, 0, 0);
    filter: blur(4px);
}

.ts-reveal.ts-zoom-in {
    transform: scale(0.94);
}

.ts-reveal.ts-fade-up {
    transform: translate3d(0, 28px, 0);
}

.ts-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
}

.ts-stagger > .ts-reveal-child {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 550ms ease-out, transform 550ms ease-out;
}

.ts-stagger.is-visible > .ts-reveal-child {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.ts-stagger.is-visible > .ts-reveal-child:nth-child(1) { transition-delay: 40ms; }
.ts-stagger.is-visible > .ts-reveal-child:nth-child(2) { transition-delay: 100ms; }
.ts-stagger.is-visible > .ts-reveal-child:nth-child(3) { transition-delay: 160ms; }
.ts-stagger.is-visible > .ts-reveal-child:nth-child(4) { transition-delay: 220ms; }
.ts-stagger.is-visible > .ts-reveal-child:nth-child(5) { transition-delay: 280ms; }
.ts-stagger.is-visible > .ts-reveal-child:nth-child(6) { transition-delay: 340ms; }
.ts-stagger.is-visible > .ts-reveal-child:nth-child(7) { transition-delay: 400ms; }
.ts-stagger.is-visible > .ts-reveal-child:nth-child(8) { transition-delay: 460ms; }

/* ---------- Hero ---------- */
#heroSection .hero-title-line,
#heroSection .hero-description,
#heroSection .hero-cta,
#heroSection .hero-image-frame {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

#heroSection .hero-image-frame {
    transform: translate3d(0, 18px, 0) scale(1.04);
}

body.ts-page-ready #heroSection.ts-hero-animate .hero-title-line {
    opacity: 1;
    transform: none;
}

body.ts-page-ready #heroSection.ts-hero-animate .hero-title-line:nth-child(1) { transition-delay: 200ms; }
body.ts-page-ready #heroSection.ts-hero-animate .hero-title-line:nth-child(2) { transition-delay: 280ms; }
body.ts-page-ready #heroSection.ts-hero-animate .hero-title-line:nth-child(3) { transition-delay: 360ms; }

body.ts-page-ready #heroSection.ts-hero-animate .hero-description {
    opacity: 1;
    transform: none;
    transition-delay: 440ms;
}

body.ts-page-ready #heroSection.ts-hero-animate .hero-cta {
    opacity: 1;
    transform: none;
    transition-delay: 520ms;
}

body.ts-page-ready #heroSection.ts-hero-animate .hero-image-frame {
    opacity: 1;
    transform: scale(1);
    transition-delay: 200ms;
}

/* Floating cards: sized + animated only in components/hero-floating-cards.css */

#heroSection .hero-image {
    animation: tsHeroFloat 7s ease-in-out infinite;
    will-change: transform;
}

@keyframes tsHeroFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -4px, 0) scale(1.015); }
}

.hero-title-line {
    display: block;
}

/* ---------- Service cards ---------- */
#featuredServices .service-card,
#servicesOfferings .service-card {
    transition: transform 350ms ease, box-shadow 350ms ease, border-color 350ms ease;
}

#featuredServices .service-card:hover,
#servicesOfferings .service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(17, 24, 39, 0.1);
}

#featuredServices .service-icon,
#servicesOfferings .service-icon {
    transition: transform 350ms ease, background-color 350ms ease, color 350ms ease, box-shadow 350ms ease;
}

#featuredServices .service-card:hover .service-icon,
#servicesOfferings .service-card:hover .service-icon {
    transform: scale(1.1);
}

/* ---------- Job cards ---------- */
#featuredJobs .job-card,
#jobsPage .job-card {
    transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}

#featuredJobs .job-card:hover,
#jobsPage .job-card:hover {
    transform: translateY(-6px);
    border-color: rgba(215, 25, 32, 0.35);
}

#featuredJobs .btn-apply,
#jobsPage .job-actions .btn-primary {
    transition: transform 280ms ease, background-color 280ms ease, box-shadow 280ms ease;
}

#featuredJobs .job-card:hover .btn-apply,
#jobsPage .job-card:hover .job-actions .btn-primary {
    transform: scale(1.03);
}

#featuredJobs .btn-save i,
#jobsPage .btn-save i {
    transition: transform 320ms ease;
    display: inline-block;
}

#featuredJobs .job-card:hover .btn-save i,
#jobsPage .job-card:hover .btn-save i {
    transform: rotate(-12deg) scale(1.08);
}

/* ---------- About images (Why TalServ illustration intentionally excluded — no float/shadow) ---------- */
#aboutUsSection .about-image,
#aboutPage .intro-image {
    transition: transform 500ms ease, box-shadow 500ms ease;
    will-change: transform;
    animation: tsSlowFloat 8s ease-in-out infinite;
}

#aboutUsSection .about-image:hover,
#aboutPage .intro-image:hover {
    transform: scale(1.03);
    box-shadow: 0 24px 48px rgba(17, 24, 39, 0.12);
}

/* Kill any inherited motion on Why TalServ illustration */
#whyChooseUs .why-image,
#whyChooseUs .why-image:hover {
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
    will-change: auto;
}

@keyframes tsSlowFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -5px, 0); }
}

/* ---------- Icons ---------- */
.stat-icon,
.info-icon,
.mv-icon,
.process-step-icon,
.office-icon,
.feature-icon,
.about-feature-icon {
    transition: transform 320ms ease, background-color 320ms ease, color 320ms ease;
}

.stat-box:hover .stat-icon,
.info-card:hover .info-icon,
.mv-card:hover .mv-icon,
.process-step:hover .process-step-icon,
.office-card:hover .office-icon,
.about-feature-row:hover .about-feature-icon {
    transform: rotate(8deg) scale(1.1);
}

/* ---------- Industries We Serve — staggered fade-up (once) ---------- */
#featuredCompanies .industries-grid.ts-stagger > .ts-reveal-child {
    transition: opacity 700ms ease-out, transform 700ms ease-out;
}

#featuredCompanies .industries-grid.ts-stagger.is-visible > .ts-reveal-child:nth-child(1) { transition-delay: 0ms; }
#featuredCompanies .industries-grid.ts-stagger.is-visible > .ts-reveal-child:nth-child(2) { transition-delay: 90ms; }
#featuredCompanies .industries-grid.ts-stagger.is-visible > .ts-reveal-child:nth-child(3) { transition-delay: 180ms; }
#featuredCompanies .industries-grid.ts-stagger.is-visible > .ts-reveal-child:nth-child(4) { transition-delay: 270ms; }
#featuredCompanies .industries-grid.ts-stagger.is-visible > .ts-reveal-child:nth-child(5) { transition-delay: 360ms; }
#featuredCompanies .industries-grid.ts-stagger.is-visible > .ts-reveal-child:nth-child(6) { transition-delay: 450ms; }
#featuredCompanies .industries-grid.ts-stagger.is-visible > .ts-reveal-child:nth-child(7) { transition-delay: 540ms; }
#featuredCompanies .industries-grid.ts-stagger.is-visible > .ts-reveal-child:nth-child(8) { transition-delay: 630ms; }

/* ---------- Testimonials ---------- */
#testimonialsSection .testimonial-card {
    transition: transform 350ms ease, box-shadow 350ms ease;
}

#testimonialsSection .testimonial-card:hover {
    transform: translateY(-6px);
}

#testimonialsSection .testimonial-photo {
    transition: transform 400ms ease;
}

#testimonialsSection .testimonial-card:hover .testimonial-photo {
    transform: scale(1.06);
}

#testimonialsSection .testimonial-quote-icon {
    transition: transform 400ms ease, opacity 400ms ease;
}

#testimonialsSection .testimonial-card:hover .testimonial-quote-icon {
    transform: translateY(-3px) scale(1.08);
    opacity: 0.45;
}

/* ---------- Footer ---------- */
#siteFooter {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 650ms ease-out, transform 650ms ease-out;
}

#siteFooter.is-visible {
    opacity: 1;
    transform: none;
}

#siteFooter .social-link {
    transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease, transform 280ms ease;
}

#siteFooter .social-link:hover {
    transform: translateY(-3px) scale(1.08) rotate(6deg);
}

/* ---------- Page heroes (inner pages) ---------- */
.page-hero {
    overflow: hidden;
}

.page-hero h1,
.page-hero .lead {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

body.ts-page-ready .page-hero h1 {
    opacity: 1;
    transform: none;
    transition-delay: 120ms;
}

body.ts-page-ready .page-hero .lead {
    opacity: 1;
    transform: none;
    transition-delay: 240ms;
}

/* ---------- Contact / why cards ---------- */
#contactPage .contact-card,
#contactPage .office-card,
#jobsPage .info-card,
#aboutPage .mv-card,
#aboutPage .process-step {
    transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}

#contactPage .contact-card:hover,
#jobsPage .info-card:hover,
#aboutPage .mv-card:hover,
#aboutPage .process-step:hover {
    transform: translateY(-6px);
}