/* Chinese localization layer over the downloaded published Framer output. */
:root {
  --cn-serif: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --cn-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  --cn-script: "Kaiti SC", "STKaiti", KaiTi, cursive;
  --cn-heading-scale: 0.88;
  --cn-body-scale: 0.90;
  --cn-note-scale: 0.92;
}

html,
body {
  font-family: var(--cn-sans) !important;
}

.framer-text,
h1,
h2,
h3,
button,
input {
  font-family: var(--cn-sans) !important;
}

[data-framer-name="Hero Section"] h1,
[data-framer-name="Hero Trigger"] h1,
[data-framer-name="Careers Title"] h2,
[data-framer-name="Scenarios Title"] h2,
[data-framer-name="Portfolio Section"] h2,
[data-framer-name="Price Section"] h2,
[data-framer-name="Footer Home"] h2 {
  font-family: var(--cn-serif) !important;
}

/* CJK glyphs occupy more visual area than the Latin glyphs used by the
   original design. The scale is applied only to rendered nodes changed by
   clone-patch.js, leaving technology names and the original motion geometry
   intact. */
[data-cn-kind="body"] {
  line-height: 1.55 !important;
}

[data-cn-demo-button="true"] {
  font-size: 12px !important;
}

@media (min-width: 1200px) {
  .framer-text {
    word-break: keep-all;
  }
}

@media (max-width: 809px) {
  :root {
    --cn-heading-scale: 0.90;
    --cn-body-scale: 0.92;
    --cn-note-scale: 0.94;
  }

  .framer-text {
    word-break: break-word;
  }
}

/* The published loader depends on Framer's hosted loading lifecycle. The
   downloaded runtime has no host lifecycle, so keep its reveal motion but
   finish it locally instead of leaving the green cover above the page. */
[data-framer-name="Desktop Loader"],
[data-framer-name="Mobile Loader"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Reveal the first headline locally. The published appear controller is not
   available in the downloaded runtime, but the original copy should still
   enter on load rather than remain at its SSR initial opacity. */
[data-framer-name="Still looking for job"] {
  animation: cn-hero-copy-in 850ms 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cn-hero-copy-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-framer-name="Still looking for job"] {
    animation: none;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  [data-framer-name="Job"] {
    animation: none;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

[data-framer-name="Job"] {
  animation: cn-job-in 950ms 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Replace the original English wordmark path with editable Chinese copy while
   retaining the same loose, handwritten visual treatment. */
[data-framer-name="Job"] > div {
  opacity: 0 !important;
}

[data-framer-name="Job"]::after {
  color: rgb(56, 162, 81);
  content: "编辑完成，一键上线";
  display: block;
  font-family: var(--cn-script);
  font-size: clamp(24px, 3.3vw, 48px);
  font-weight: 600;
  left: 50%;
  line-height: 1.08;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  white-space: nowrap;
  width: max-content;
}

@keyframes cn-job-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-framer-name="Job"] {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }
}

[data-framer-name="Job"] {
  overflow: visible !important;
}

@media (max-width: 809px) {
  [data-framer-name="Job"]::after {
    font-size: clamp(18px, 5vw, 32px);
  }
}

/* Micro-interactions for the fixed action rail and content surfaces. */
:root {
  --cn-motion-fast: 180ms;
  --cn-motion-standard: 320ms;
  --cn-motion-slow: 520ms;
  --cn-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-framer-name="NavWrap"] {
  transition: transform var(--cn-motion-standard) var(--cn-motion-ease),
    background-color var(--cn-motion-standard) var(--cn-motion-ease);
}

[data-framer-name="NavWrap"]:hover {
  background-color: rgba(0, 0, 0, 0.38);
  transform: translateY(-3px);
}

[data-framer-name="LOGO"] {
  transform-origin: 50% 50%;
  transition: transform var(--cn-motion-standard) var(--cn-motion-ease),
    filter var(--cn-motion-standard) var(--cn-motion-ease);
}

[data-framer-name="LOGO"]:hover {
  filter: brightness(1.04);
  transform: rotate(-4deg) scale(1.06);
}

[data-framer-name="LOGO"]:active {
  transform: rotate(-2deg) scale(0.96);
}

[data-framer-name="Join Beta"] {
  position: relative;
  transition: transform var(--cn-motion-standard) var(--cn-motion-ease),
    filter var(--cn-motion-standard) var(--cn-motion-ease);
}

[data-framer-name="Join Beta"]::after {
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.16) 50%, transparent 75%);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-125%) skewX(-14deg);
  transition: opacity var(--cn-motion-fast) ease, transform 620ms var(--cn-motion-ease);
}

[data-framer-name="Join Beta"]:hover,
[data-framer-name="Join Beta"]:focus-within {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

[data-framer-name="Join Beta"]:hover::after,
[data-framer-name="Join Beta"]:focus-within::after {
  opacity: 1;
  transform: translateX(125%) skewX(-14deg);
}

[data-framer-name="Join Beta"]:active {
  filter: brightness(0.96);
  transform: translateY(0) scale(0.985);
}

[data-framer-name="Hamburger"] {
  transform-origin: 50% 50%;
  transition: transform var(--cn-motion-standard) var(--cn-motion-ease),
    filter var(--cn-motion-standard) var(--cn-motion-ease);
}

[data-framer-name="Hamburger"]:hover {
  filter: brightness(0.97);
  transform: rotate(3deg) scale(1.04);
}

[data-framer-name="Hamburger"]:active {
  transform: rotate(0deg) scale(0.94);
}

[data-framer-name="Hamburger"] [data-framer-name="doradsn"] {
  transition: transform var(--cn-motion-fast) var(--cn-motion-ease);
}

[data-framer-name="Hamburger"]:hover [data-framer-name="doradsn"] {
  transform: scaleX(0.72) !important;
}

/* The footer note belonged to the reference recruitment story and is not part
   of 即刻上线. Keep the footer layout and remove only that unrelated note. */
[data-framer-name="Footer Email"] [data-framer-name="Note 1"] {
  display: none !important;
}

[data-framer-name^="Scenario Card"] [data-framer-name="Chip"] {
  transform-origin: 50% 50%;
  transition: transform var(--cn-motion-fast) var(--cn-motion-ease),
    filter var(--cn-motion-fast) var(--cn-motion-ease);
}

[data-framer-name^="Scenario Card"] [data-framer-name="Chip"]:hover {
  filter: brightness(1.04);
  transform: translateY(-3px) scale(1.035);
}

[data-framer-name="Footer Email"] a {
  transition: transform var(--cn-motion-fast) var(--cn-motion-ease),
    opacity var(--cn-motion-fast) ease;
}

[data-framer-name="Footer Email"] a:hover,
[data-framer-name="Footer Email"] a:focus-visible {
  opacity: 0.72;
  transform: translateY(-2px);
}

[data-framer-name="NavWrap"] :focus-visible,
[data-framer-name="Footer Email"] :focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  [data-framer-name="NavWrap"],
  [data-framer-name="LOGO"],
  [data-framer-name="Join Beta"],
  [data-framer-name="Hamburger"],
  [data-framer-name="Hamburger"] [data-framer-name="doradsn"],
  [data-framer-name^="Scenario Card"] [data-framer-name="Chip"],
  [data-framer-name="Footer Email"] a {
    animation: none !important;
    transition: none !important;
  }
}