:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-soft: cubic-bezier(.4, 0, .2, 1);
  --motion-hover: 170ms;
  --motion-scroll: 760ms;
  --motion-scroll-slow: 980ms;
  --motion-distance: 30px;
  --motion-stagger: 78ms;
  --motion-shadow: 0 18px 40px rgba(8, 39, 73, .12);
}

html,
body { overflow-x: clip; }

/* Shared two-way scroll choreography. JS supplies the state and direction. */
[data-motion-v2] {
  --motion-delay: 0ms;
  --motion-enter-y: var(--motion-distance);
  --motion-enter-x: 0px;
  opacity: 0;
  transform: translate3d(var(--motion-enter-x), var(--motion-enter-y), 0);
  transition:
    opacity var(--motion-scroll) var(--motion-ease),
    transform var(--motion-scroll) var(--motion-ease);
  transition-delay: var(--motion-delay);
  will-change: opacity, transform;
}

[data-motion-v2][data-motion-enter="up"] { --motion-enter-y: calc(var(--motion-distance) * -1); }
[data-motion-v2][data-motion-enter="left"] { --motion-enter-x: calc(var(--motion-distance) * -1); --motion-enter-y: 0px; }
[data-motion-v2][data-motion-enter="right"] { --motion-enter-x: var(--motion-distance); --motion-enter-y: 0px; }
[data-motion-v2].is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Hierarchy: headings lead, supporting copy follows, actions settle last. */
[data-motion-v2="hero-title"],
[data-motion-v2="heading"] { --motion-enter-y: 22px; transition-duration: var(--motion-scroll-slow); }
[data-motion-v2="hero-title"] { --motion-enter-x: -34px; --motion-enter-y: 0px; }
[data-motion-v2="hero-copy"],
[data-motion-v2="copy"] { --motion-delay: 105ms; transition-duration: 700ms; }
[data-motion-v2="hero-action"],
[data-motion-v2="action"] { --motion-delay: 190ms; transition-duration: 620ms; }
[data-motion-v2="kicker"] { --motion-delay: 30ms; transition-duration: 560ms; }
[data-motion-v2="card"] { transition-duration: 700ms; }
[data-motion-v2="panel"] { transition-duration: 840ms; }

/* Hero gets the strongest entrance, with a restrained image depth shift. */
.motion-hero { isolation: isolate; }
.motion-hero > :is(img, picture, .hero-media) img,
.motion-hero > img,
.motion-hero__bg {
  transform: translate3d(0, var(--motion-bg-y, 0px), 0) scale(1.045);
  transition: transform 1.45s var(--motion-ease);
  will-change: transform;
}
[data-motion-parallax="background"] {
  transform: translate3d(0, var(--motion-bg-y, 0px), 0) scale(1.035);
  transition: transform 1.45s var(--motion-ease);
  will-change: transform;
}
.motion-hero .motion-hero-content,
.motion-hero > :is(.hero-content, .profile-hero__content, .activity-hero__content, .cap-project-hero__content) {
  transform: translate3d(0, var(--motion-fg-y, 0px), 0);
  transition: transform 900ms var(--motion-ease);
  will-change: transform;
}
.motion-signature {
  position: relative;
  isolation: isolate;
}
.motion-signature::after {
  position: absolute;
  bottom: -.18em;
  left: 0;
  width: min(170px, 42%);
  height: 3px;
  content: "";
  background: linear-gradient(90deg, #d8a33b, rgba(216,163,59,0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--motion-ease) 280ms;
}
.motion-signature.is-motion-visible::after { transform: scaleX(1); }

/* Fast, quiet hover feedback; always faster than scroll entrances. */
:is(.button, .primary-btn, .header-cta, .cta-button, .profile-cta-button, .cap-button, .activity-button, .form-submit, .request-form button, .guarantee-cta a, .footer-contact-button) {
  transform: translate3d(0, 0, 0);
  transition:
    color var(--motion-hover) var(--motion-ease-soft),
    background-color var(--motion-hover) var(--motion-ease-soft),
    border-color var(--motion-hover) var(--motion-ease-soft),
    box-shadow var(--motion-hover) var(--motion-ease-soft),
    transform var(--motion-hover) var(--motion-ease);
}
:is(.button, .primary-btn, .header-cta, .cta-button, .profile-cta-button, .cap-button, .activity-button, .form-submit, .request-form button, .guarantee-cta a, .footer-contact-button):active {
  transform: translate3d(0, 0, 0) !important;
}
:is(.button, .primary-btn, .header-cta, .cta-button, .profile-cta-button, .cap-button, .activity-button) > :is(span, svg) {
  transition: transform var(--motion-hover) var(--motion-ease);
}

:is(.project-card, .news-card, .certificate-card, .value-card, .mission-card, .capability-card, .equipment-item, .equipment-card, .portfolio-card, .history-card, .service, .strength, .quality-item, .finance-card, .equipment-profile-card, .project-profile-card, .article-related-card, .profile-benefit, .engineer-card, .worker-card, .headcount-card) {
  transform: translate3d(0, 0, 0);
  transition: transform var(--motion-hover) var(--motion-ease), box-shadow var(--motion-hover) var(--motion-ease-soft), border-color var(--motion-hover) var(--motion-ease-soft);
}
:is(.project-card, .news-card, .certificate-card, .value-card, .mission-card, .capability-card, .equipment-item, .equipment-card, .portfolio-card, .history-card, .service, .strength, .quality-item, .finance-card, .equipment-profile-card, .project-profile-card, .article-related-card, .profile-benefit, .engineer-card, .worker-card, .headcount-card) img {
  transition: transform var(--motion-hover) var(--motion-ease), opacity var(--motion-hover) var(--motion-ease-soft);
}

@media (hover: hover) and (pointer: fine) {
  :is(.button, .primary-btn, .header-cta, .cta-button, .profile-cta-button, .cap-button, .activity-button, .form-submit, .request-form button, .guarantee-cta a, .footer-contact-button):hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 10px 24px rgba(6, 43, 92, .14);
  }
  :is(.button, .primary-btn, .header-cta, .cta-button, .profile-cta-button, .cap-button, .activity-button):hover > :is(span, svg) { transform: translate3d(4px, 0, 0); }
  :is(.project-card, .news-card, .certificate-card, .value-card, .mission-card, .capability-card, .equipment-item, .equipment-card, .portfolio-card, .history-card, .service, .strength, .quality-item, .finance-card, .equipment-profile-card, .project-profile-card, .article-related-card, .profile-benefit, .engineer-card, .worker-card, .headcount-card):hover {
    transform: translate3d(0, -4px, 0) !important;
    box-shadow: var(--motion-shadow);
  }
  :is(.project-card, .news-card, .history-card, .article-related-card, .equipment-card, .portfolio-card):hover img { transform: scale(1.025); }
}

/* Start only after both identical rows exist, keeping the loop width stable. */
.partner-track {
  animation: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.partner-track.is-marquee-ready { animation: partner-marquee 32s linear infinite; }
@keyframes partner-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.portfolio-tabs a { transition: color var(--motion-hover) var(--motion-ease-soft), background-color var(--motion-hover) var(--motion-ease-soft), transform var(--motion-hover) var(--motion-ease); }
.portfolio-tabs[data-motion-direction="forward"] a.active { animation: motion-tab-forward 320ms var(--motion-ease); }
.portfolio-tabs[data-motion-direction="backward"] a.active { animation: motion-tab-backward 320ms var(--motion-ease); }
@keyframes motion-tab-forward { from { opacity: .35; transform: translate3d(10px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes motion-tab-backward { from { opacity: .35; transform: translate3d(-10px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

details > summary { transition: color var(--motion-hover) var(--motion-ease-soft), background-color var(--motion-hover) var(--motion-ease-soft); }
details > :not(summary) { transform-origin: top; }

/* Mobile has shorter travel, fewer simultaneous beats and no heavy parallax. */
@media (max-width: 880px) {
  :root { --motion-distance: 18px; --motion-scroll: 620ms; --motion-scroll-slow: 780ms; --motion-stagger: 54ms; }
  [data-motion-v2="hero-title"] { --motion-enter-x: 0px; --motion-enter-y: 20px; }
  [data-motion-v2="card"][data-motion-enter="left"],
  [data-motion-v2="card"][data-motion-enter="right"],
  [data-motion-v2="panel"][data-motion-enter="left"],
  [data-motion-v2="panel"][data-motion-enter="right"] { --motion-enter-x: 0px; --motion-enter-y: var(--motion-distance); }
  .motion-hero > :is(img, picture, .hero-media) img,
  .motion-hero > img { transform: translate3d(0, 0, 0) scale(1.025); transition-duration: 1s; }
  .motion-hero .motion-hero-content,
  .motion-hero > :is(.hero-content, .profile-hero__content, .activity-hero__content, .cap-project-hero__content) { transform: none; }
  .site-nav { transition: transform 420ms var(--motion-ease) !important; }
  .site-nav a { opacity: 0; transform: translate3d(14px, 0, 0); transition: opacity 260ms var(--motion-ease-soft), transform 360ms var(--motion-ease) !important; }
  .site-nav.is-open a { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: calc((var(--motion-nav-index, 0) + 1) * 42ms) !important; }
}

@media (max-width: 600px) {
  :root { --motion-distance: 14px; --motion-scroll: 540ms; --motion-scroll-slow: 680ms; }
  .motion-signature::after { width: 110px; height: 2px; }
  .partner-track.is-marquee-ready { animation-duration: 24s; }
}

/* Explicit static preview for QA and screenshots; normal users keep full motion. */
html.motion-static-preview *,
html.motion-static-preview *::before,
html.motion-static-preview *::after {
  animation-play-state: paused !important;
  transition-duration: .01ms !important;
}
html.motion-static-preview [data-motion-v2] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) and (not all) {
  html, body { scroll-behavior: auto !important; }
}