/*
 * Chongguang v82: restrained interaction layer.
 * This file intentionally avoids changing layout or CMS-controlled colors.
 */

:root {
  --cg-motion-duration: 560ms;
  --cg-motion-ease: cubic-bezier(.2, .72, .2, 1);
  --cg-active-gold: #b4934f;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

body.cg-motion-enabled .cg-reveal {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity var(--cg-motion-duration) var(--cg-motion-ease),
    translate var(--cg-motion-duration) var(--cg-motion-ease);
  will-change: opacity, translate;
}

body.cg-motion-enabled .cg-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

body.cg-motion-enabled .cg-reveal[data-cg-delay="1"] {
  transition-delay: 80ms;
}

body.cg-motion-enabled .cg-reveal[data-cg-delay="2"] {
  transition-delay: 150ms;
}

.cg-parallax-layer {
  translate: 0 var(--cg-parallax-shift, 0);
  will-change: translate;
}

.main-nav a,
.nav-contact {
  position: relative;
  transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.main-nav a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 16px;
  height: 1px;
  background: var(--cg-active-gold);
  opacity: 0;
  scale: 0 1;
  translate: -50% 0;
  transform-origin: center;
  transition: opacity 220ms ease, scale 220ms ease;
}

.main-nav a.is-active {
  color: var(--cg-active-gold);
}

.main-nav a.is-active::before {
  opacity: .9;
  scale: 1 1;
}

.nav-contact.is-active {
  color: var(--cg-active-gold);
  border-color: rgba(180, 147, 79, .7);
}

.home-work-card,
.ai-app-card,
.profile-abilities article,
.credibility-group,
.method-system-panel,
.method-steps li,
.cooperation-grid article {
  transition:
    border-color 260ms ease,
    background-color 260ms ease,
    translate 260ms ease;
}

.home-work-visual,
.ai-app-visual,
.managed-work-cover,
.cms-media-frame {
  position: relative;
  overflow: hidden;
}

.home-work-visual img,
.ai-app-visual img,
.managed-work-cover img,
.cms-media-frame img {
  transition: scale 520ms var(--cg-motion-ease), filter 320ms ease;
}

.managed-work-play,
.ai-app-open,
.main-jump-link,
.hero-jump-link {
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    translate 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-work-card:hover,
  .ai-app-card:hover,
  .profile-abilities article:hover,
  .credibility-group:hover,
  .method-system-panel:hover,
  .method-steps li:hover,
  .cooperation-grid article:hover {
    border-color: rgba(180, 147, 79, .48);
    translate: 0 -2px;
  }

  .home-work-card:hover .home-work-visual img,
  .ai-app-card:hover .ai-app-visual img,
  .managed-work-card:hover .managed-work-cover img {
    scale: 1.012;
    filter: contrast(1.015) saturate(1.025);
  }

  .home-work-visual[role="button"]:hover .managed-work-play,
  .managed-work-cover[role="button"]:hover .managed-work-play {
    translate: 0 -2px;
  }

  .ai-app-open:hover,
  .main-jump-link:hover,
  .hero-jump-link:hover {
    translate: 0 -1px;
  }
}

:focus-visible {
  outline: 1px solid var(--cg-active-gold);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 58px;
  }

  body.cg-motion-enabled .cg-reveal {
    translate: 0 12px;
  }

  .main-nav a::before {
    display: none;
  }
}

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

  body.cg-motion-enabled .cg-reveal,
  body.cg-motion-enabled .cg-reveal.is-visible,
  .cg-parallax-layer,
  .home-work-card,
  .ai-app-card,
  .profile-abilities article,
  .credibility-group,
  .method-system-panel,
  .method-steps li,
  .cooperation-grid article,
  .home-work-visual img,
  .ai-app-visual img,
  .managed-work-cover img,
  .cms-media-frame img {
    opacity: 1;
    translate: none;
    scale: 1;
    transition: none;
  }
}