/*
 * PCBA Partner — production motion system
 * Calm, content-first motion inspired by Apple's interaction rhythm.
 */
:root {
    --motion-ease-control: cubic-bezier(0.32, 0.72, 0, 1);
    --motion-ease-panel: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-control: 200ms;
    --motion-panel: 280ms;
    --motion-enter: 480ms;
}

/* Decorative light stays atmospheric without continuously moving. */
html body .ambient-bg .blob,
html body .blob {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
}

/* Remove persistent attention-seeking loops. */
html body .cursor-glow {
    display: none !important;
}

html body .img-placeholder::before,
html body .hero-badge::before {
    animation: none !important;
}

html.page-home body .hero-img-main img {
    animation: none !important;
    scale: 1 !important;
    will-change: auto !important;
}

@keyframes pcbaHeroCardEnter {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

html.page-home body .hero-visual .floating-card,
html.page-home body #hero .floating-card {
    animation: pcbaHeroCardEnter var(--motion-enter) var(--motion-ease-enter) both !important;
    animation-delay: 0ms !important;
    translate: 0 0 !important;
    scale: 1 !important;
    will-change: auto !important;
    transition: transform var(--motion-control) var(--motion-ease-control),
        opacity var(--motion-control) ease,
        background-color var(--motion-control) ease,
        border-color var(--motion-control) ease,
        box-shadow var(--motion-control) ease !important;
}

html.page-home body .hero-visual .floating-card:nth-child(2),
html.page-home body #hero .floating-card:nth-child(2) {
    animation-delay: 40ms !important;
}

html.page-home body .hero-visual .floating-card:nth-child(3),
html.page-home body #hero .floating-card:nth-child(3) {
    animation-delay: 80ms !important;
}

/* Section entrances: short travel, no blur, and no long cascading delay. */
html.page-home body .fade-up.fade-up,
html:not(.page-home) body .fade-up.fade-up {
    opacity: 0;
    filter: none !important;
    transform: translate3d(0, 10px, 0);
    transition: opacity var(--motion-enter) var(--motion-ease-enter),
        transform var(--motion-enter) var(--motion-ease-enter) !important;
    will-change: opacity, transform;
}

html.page-home body .fade-up.fade-up.visible,
html.page-home body .fade-up.fade-up.is-visible,
html:not(.page-home) body .fade-up.fade-up.visible,
html:not(.page-home) body .fade-up.fade-up.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

/* Tilt, large ripples, and continuous cursor tracking are intentionally removed. */
html body .tilt-card {
    --rx: 0deg !important;
    --ry: 0deg !important;
    transform: translate3d(0, var(--ty, 0px), 0) !important;
    transform-style: flat !important;
    will-change: auto !important;
}

html body .ripple-host .ripple,
html body .ripple {
    display: none !important;
    animation: none !important;
}

html body .magnetic {
    transition: transform var(--motion-control) var(--motion-ease-control),
        color var(--motion-control) ease,
        background-color var(--motion-control) ease,
        border-color var(--motion-control) ease,
        box-shadow var(--motion-control) ease !important;
}

/* Interactive controls respond quickly and only animate paint-safe properties. */
html body .btn-primary,
html body .btn-secondary,
html body .btn-outline,
html body .btn-ghost,
html body .nav-cta,
html body .filter-btn,
html body .industry-nav a,
html body .footer-social a,
html body .mobile-toggle,
html body .lang-switcher__toggle,
html body .lang-switcher__option,
html body .faq-toggle,
html body .back-to-top,
html body .whatsapp-float,
html body .values-carousel__nav,
html body .values-carousel__dot,
html body button,
html body input[type="submit"] {
    transition-property: transform, opacity, color, background-color, border-color, box-shadow !important;
    transition-duration: var(--motion-control) !important;
    transition-timing-function: var(--motion-ease-control) !important;
}

/* Cards retain material depth, but blur itself never animates. */
html.page-home body :is(
    .service-card,
    .industry-card,
    .quality-card,
    .case-card,
    .blog-card,
    .value-card,
    .lead-card,
    .factory-card,
    .evidence-slot,
    .stat-card,
    .about-cta,
    .cap-item,
    .tech-item,
    .process-step,
    .process-detail,
    .contact-route,
    .contact-form,
    .promise-box,
    .glass-panel,
    .glass-panel-light,
    .floating-card
),
html:not(.page-home) body[class] :is(
    .service-card,
    .industry-card,
    .quality-card,
    .case-card,
    .blog-card,
    .value-card,
    .lead-card,
    .factory-card,
    .evidence-slot,
    .stat-card,
    .about-cta,
    .cap-item,
    .tech-item,
    .process-step,
    .process-detail,
    .contact-route,
    .contact-form,
    .promise-box,
    .glass-panel,
    .glass-panel-light,
    .floating-card
) {
    transition-property: transform, opacity, background-color, border-color, box-shadow !important;
    transition-duration: 240ms !important;
    transition-timing-function: var(--motion-ease-control) !important;
}

/* The entry transition takes precedence while an observed card is arriving. */
html.page-home body .fade-up.fade-up:not(.visible):not(.is-visible),
html:not(.page-home) body .fade-up.fade-up:not(.visible):not(.is-visible) {
    transition: opacity var(--motion-enter) var(--motion-ease-enter),
        transform var(--motion-enter) var(--motion-ease-enter) !important;
}

html body .navbar,
html body .hs-topbar {
    transition-property: transform, opacity, background-color, border-color, box-shadow, padding !important;
    transition-duration: 240ms !important;
    transition-timing-function: var(--motion-ease-panel) !important;
}

html body main img,
html body .service-card-img img,
html body .case-image img,
html body .blog-img img,
html.page-home body .industry-card-bg,
html.page-home body .story-video,
html:not(.page-home) body[class] .story-video {
    transition: transform 420ms var(--motion-ease-enter), opacity 220ms ease !important;
}

/* Preserve panel/collapse functionality with restrained timing. */
html body #navLinks.nav-links,
html body .hs-nav.nav-links,
html body .lang-switcher__menu,
html body .ai-quote-panel {
    transition-property: transform, opacity, visibility, background-color, border-color, box-shadow !important;
    transition-duration: var(--motion-panel) !important;
    transition-timing-function: var(--motion-ease-panel) !important;
}

@media (max-width: 768px) {
    html.page-home body .fade-up.fade-up,
    html:not(.page-home) body .fade-up.fade-up {
        transform: none;
    }

    html.page-home body .hero-visual .floating-card,
    html.page-home body #hero .floating-card {
        animation-duration: 420ms !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    html body *,
    html body *::before,
    html body *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
    }

    html.page-home body .fade-up.fade-up,
    html.page-home body .fade-up.fade-up.visible,
    html.page-home body .fade-up.fade-up.is-visible,
    html:not(.page-home) body .fade-up.fade-up,
    html:not(.page-home) body .fade-up.fade-up.visible,
    html:not(.page-home) body .fade-up.fade-up.is-visible {
        opacity: 1 !important;
        transform: none !important;
    }
}
/* visual-polish-20260801 */
html:not(.motion-ready) body .fade-up,
html:not(.motion-ready) body [data-motion-reveal] { opacity: 1 !important; filter: none !important; transform: none !important; }