/* ==========================================================================
   QINGRUN MACHINERY — motion layer
   Keyframes are copied verbatim from the template's motion library
   (faisys bizShared / animate.css family) so the motion language matches
   the reference design 1:1.
   The engine (assets/js/animate.js) tags blocks at runtime, so no page
   markup has to change and the site still renders if JS is unavailable.
   ========================================================================== */

/* ---------- 1. Keyframes (verbatim from the template) ---------- */
@keyframes fadeIn { 0% { opacity: 0 } to { opacity: 1 } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0) } to { opacity: 1; transform: none } }
@keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -100%, 0) } to { opacity: 1; transform: none } }
@keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(50%, 0, 0) } to { opacity: 1; transform: none } }
@keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(-100%, 0, 0) } to { opacity: 1; transform: none } }
@keyframes zoomIn { 0% { opacity: 0; transform: scale3d(.3, .3, .3) } 50% { opacity: 1 } }
@keyframes zoomInUp {
  0% { opacity: 0; transform: scaleX(1) translateZ(0) }
  1% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 500%, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19) }
  60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60%, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1) }
  to { opacity: 1; transform: none; animation-timing-function: ease }
}
@keyframes moveInUp { 0% { transform: translateY(100%); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes moveInDown { 0% { transform: translateY(-100%); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes moveInLeft { 0% { transform: translateX(150%); opacity: 0 } to { transform: translateX(0); opacity: 1 } }
@keyframes moveInRight { 0% { transform: translateX(-150%); opacity: 0 } to { transform: translateX(0); opacity: 1 } }
@keyframes cutInUp { 0% { transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0) } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) } }
@keyframes cutInDown { 0% { transform: translateY(-100%); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%) } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) } }
@keyframes cutInLeft { 0% { transform: translateX(100%); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%) } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) } }
@keyframes cutInRight { 0% { transform: translateX(-100%); clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%) } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) } }
@keyframes eraseUp { 0% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%) } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) } }
@keyframes eraseDown { 0% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0) } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) } }
@keyframes eraseLeft { 0% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%) } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) } }
@keyframes eraseRight { 0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%) } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) } }
@keyframes rollIn { 0% { opacity: 0; transform: translate3d(-100%, 0, 0) rotate(-120deg) } to { opacity: 1; transform: none } }
@keyframes rotateIn { 0% { transform-origin: center; transform: rotateY(90deg); opacity: 0 } to { transform-origin: center; transform: none; opacity: 1 } }
@keyframes flipInX { 0% { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; animation-timing-function: ease-in } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1 } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg) } to { transform: perspective(400px) } }
@keyframes rubberBand { 0% { transform: scale3d(1, 1, 1) } 30% { transform: scale3d(1.25, .75, 1) } 40% { transform: scale3d(.75, 1.25, 1) } 50% { transform: scale3d(1.15, .85, 1) } 65% { transform: scale3d(.95, 1.05, 1) } 75% { transform: scale3d(1.05, .95, 1) } to { transform: scale3d(1, 1, 1) } }
@keyframes bounce { 0%, 20%, 53%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); transform: translate3d(0, 0, 0) } 40%, 43% { animation-timing-function: cubic-bezier(.755, .05, .855, .06); transform: translate3d(0, -30px, 0) } 70% { animation-timing-function: cubic-bezier(.755, .05, .855, .06); transform: translate3d(0, -15px, 0) } 90% { transform: translate3d(0, -4px, 0) } }
@keyframes rotating { from { transform: rotate(0) } to { transform: rotate(360deg) } }
@keyframes translationUpDown { 0%, to { transform: translateY(0) } 50% { transform: translateY(-14px) } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55) } 70% { box-shadow: 0 0 0 16px rgba(245, 158, 11, 0) } to { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0) } }

/* hero / banner motion */
@keyframes heroZoom { from { transform: scale(1.14) } to { transform: scale(1) } }
@keyframes heroFadeUp { from { opacity: 0; transform: translate3d(0, 34px, 0) } to { opacity: 1; transform: none } }
@keyframes maskSweep { from { transform: translateX(-120%) skewX(-18deg) } to { transform: translateX(220%) skewX(-18deg) } }
@keyframes scanLine { 0% { opacity: 0; transform: translateY(-100%) } 35% { opacity: .9 } to { opacity: 0; transform: translateY(1400%) } }

/* ---------- 2. Engine base ---------- */
.anm { opacity: 0; will-change: transform, opacity; }
.anm.anm-on { opacity: 1; will-change: auto; }
.anm-anim { animation-duration: var(--anm-dur, .8s); animation-delay: var(--anm-delay, 0ms); animation-fill-mode: both; animation-timing-function: cubic-bezier(.22, .68, .32, 1); }
.anm-anim.mFadeIn { animation-name: fadeIn }
.anm-anim.mFadeInUp { animation-name: fadeInUp }
.anm-anim.mFadeInLeft { animation-name: fadeInLeft }
.anm-anim.mFadeInRight { animation-name: fadeInRight }
.anm-anim.mMoveInUp { animation-name: moveInUp }
.anm-anim.mCutInUp { animation-name: cutInUp }
.anm-anim.mCutInLeft { animation-name: cutInLeft }
.anm-anim.mZoomIn { animation-name: zoomIn }
.anm-anim.mZoomInUp { animation-name: zoomInUp }
.anm-anim.mEraseUp { animation-name: eraseUp }
.anm-anim.mEraseLeft { animation-name: eraseLeft }
.anm-anim.mRollIn { animation-name: rollIn }
.anm-anim.mRotateIn { animation-name: rotateIn }
.anm-anim.mFlipInX { animation-name: flipInX }
.anm-anim.mTranslation { animation-name: translationUpDown; animation-duration: 3.4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out }

/* a shorter, softer variant used for body copy so long paragraphs stay readable */
.anm-anim.mRise { animation-name: anmRise }
@keyframes anmRise { from { opacity: 0; transform: translate3d(0, 26px, 0) } to { opacity: 1; transform: none } }
.anm-anim.mRiseSm { animation-name: anmRiseSm }
@keyframes anmRiseSm { from { opacity: 0; transform: translate3d(0, 14px, 0) } to { opacity: 1; transform: none } }
.anm-anim.mZoomSoft { animation-name: anmZoomSoft }
@keyframes anmZoomSoft { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } }

/* ---------- 3. Section titles ---------- */
.section-title.anm-anim, .section-subtitle.anm-anim, .kicker.anm-anim { --anm-dur: .7s; }

/* ---------- 4. Cards: hover lift identical in feel to the template ---------- */
.card, .product-card, .category-card, .service-card, .solution-card,
.info-card, .contact-card, .support-item, .step-item, .why-item {
  transition: transform .38s cubic-bezier(.22, .68, .32, 1), box-shadow .38s ease, border-color .38s ease;
}
.product-card .thumb img, .category-card img, .card img {
  transition: transform .6s cubic-bezier(.22, .68, .32, 1);
}
.product-card:hover .thumb img, .category-card:hover img, .card:hover img { transform: scale(1.07); }
.thumb { overflow: hidden; }

/* shine sweep on primary buttons */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ""; position: absolute; inset-block: -40%; inset-inline-start: 0; width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: translateX(-160%) skewX(-18deg); pointer-events: none;
}
.btn-primary:hover::after { animation: maskSweep .85s ease; }

/* ---------- 5. Hero ---------- */
.carousel-slide { isolation: isolate; background-color: var(--blue-deep); }
/* the photo lives on ::after so it can drift (ken-burns) without touching copy */
.carousel-slide::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; opacity: 0;
}
.carousel-slide.active::after { opacity: 1; animation: heroZoom 9s ease-out both; }
.carousel-slide.active::before { animation: fadeIn .5s ease both; }
.carousel-slide.active > * { animation: heroFadeUp .9s cubic-bezier(.22, .68, .32, 1) both; }
.carousel-slide.active > *:nth-child(1) { animation-delay: .10s }
.carousel-slide.active > *:nth-child(2) { animation-delay: .22s }
.carousel-slide.active > *:nth-child(3) { animation-delay: .34s }
.carousel-slide.active > *:nth-child(4) { animation-delay: .46s }
.carousel-slide.active > *:nth-child(5) { animation-delay: .58s }

/* page hero (inner pages) */
.prod-hero > .container > *, .solution-hero > .container > *,
.page-hero > .container > *, .cta-section > .container > * { animation: heroFadeUp .85s cubic-bezier(.22, .68, .32, 1) both; }
.prod-hero > .container > *:nth-child(2), .solution-hero > .container > *:nth-child(2),
.page-hero > .container > *:nth-child(2), .cta-section > .container > *:nth-child(2) { animation-delay: .12s }
.prod-hero > .container > *:nth-child(3), .solution-hero > .container > *:nth-child(3),
.page-hero > .container > *:nth-child(3), .cta-section > .container > *:nth-child(3) { animation-delay: .24s }
.prod-hero > .container > *:nth-child(4), .solution-hero > .container > *:nth-child(4),
.page-hero > .container > *:nth-child(4), .cta-section > .container > *:nth-child(4) { animation-delay: .36s }

/* ---------- 6. Header states ---------- */
.header { transition: box-shadow .35s ease, background-color .35s ease, padding .35s ease; }
.header.is-stuck { box-shadow: 0 10px 30px rgba(10, 21, 45, .12); background: rgba(255, 255, 255, .96); backdrop-filter: saturate(150%) blur(10px); }
.header.is-stuck .header-inner { padding-block: 6px; }
.header .logo { transition: transform .35s ease, letter-spacing .35s ease; }
.header.is-stuck .logo { letter-spacing: .01em; }
.header-inner { transition: padding .35s ease; }

/* ---------- 7. Reading progress + back-to-top ---------- */
.scroll-progress {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--accent));
  z-index: 9999; transition: width .12s linear; pointer-events: none;
}
.to-top {
  position: fixed; inset-block-end: 156px; inset-inline-end: 25px; width: 46px; height: 46px;
  border: 0; border-radius: 50%; background: var(--brand-500); color: #fff; cursor: pointer;
  display: grid; place-items: center; z-index: 900;
  box-shadow: 0 10px 26px -10px rgba(27, 75, 216, .7);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .25s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand-600); transform: translateY(-3px); }
[dir="rtl"] .to-top { inset-inline-end: 25px; inset-inline-start: auto; }

/* ---------- 8. Partner / logo marquee ---------- */
.marquee-viewport { overflow: hidden; position: relative; }
.marquee-viewport::before, .marquee-viewport::after {
  content: ""; position: absolute; inset-block: 0; width: 90px; z-index: 2; pointer-events: none;
}
.marquee-viewport::before { inset-inline-start: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.marquee-viewport::after { inset-inline-end: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.marquee-track { display: flex; gap: 22px; width: max-content; animation: marqueeRun 34s linear infinite; }
.marquee-viewport:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeRun { from { transform: translateX(0) } to { transform: translateX(-50%) } }
[dir="rtl"] .marquee-track { animation-name: marqueeRunRtl; }
@keyframes marqueeRunRtl { from { transform: translateX(0) } to { transform: translateX(50%) } }

/* ---------- 9. Counters ---------- */
.count-num { font-variant-numeric: tabular-nums; display: inline-block; }
.stat-item .count-num, .stat-num { transition: none; }

/* ---------- 10. Images ---------- */
img.img-lazy { opacity: 0; transition: opacity .7s ease, transform .7s ease; }
img.img-lazy.img-in { opacity: 1; }

/* ---------- 11. Product/detail pages ---------- */
.prod-content > .prod-img.anm-anim { --anm-dur: .95s; }
.lang-section.active.anm-anim { --anm-dur: .6s; }
.table-wrap.anm-anim { --anm-dur: .65s; }

/* ---------- 12. FAQ ---------- */
.faq-item { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.faq-a { transition: max-height .42s cubic-bezier(.22, .68, .32, 1), opacity .32s ease, padding .32s ease; }

/* ---------- 13. Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .anm { opacity: 1 !important; }
  .anm-anim, .carousel-slide.active::after, .carousel-slide.active::before,
  .carousel-slide.active > *, .prod-hero > .container > *, .hero > .container > *,
  .solution-hero > .container > *, .marquee-track, .btn-primary:hover::after {
    animation: none !important;
  }
  .carousel-slide::after { opacity: 1; transform: none; }
}

/* ---------- 14. Mobile tuning ---------- */
@media (max-width: 900px) {
  .carousel-slide.active::after { animation-duration: 7s; }
  .anm-anim { --anm-dur: .6s; }
  .to-top { inset-block-end: 18px; inset-inline-end: 16px; width: 42px; height: 42px; }
  .marquee-track { animation-duration: 26s; }
}