/*
 * Pair with English IBM Plex Mono / Druk:
 * Noto Sans SC — geometric Heiti; Medium for UI, Black for Druk-weight display.
 */
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cjk/noto-sans-sc-500.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/cjk/noto-sans-sc-700.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/cjk/noto-sans-sc-900.woff2") format("woff2");
}

/* Header logo: same 36px as homepage (SVG intrinsic size is 518×96) */
header .header .header-logo img {
  display: block;
  height: 36px !important;
  transform: none !important;
  width: auto;
}

.transition-component .wrapper .logo {
  height: auto;
  width: min(480px, 42vw);
}

/*
 * Preloader start circle: keep it on the viewport midline.
 * Original row-centering drifts when left/right copy widths differ (esp. CN).
 */
.home-preloader .center .done {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%;
}

.home-preloader .center .done > .text-1,
.home-preloader .center .done > .text-2 {
  flex: 1 1 0;
  min-width: 0;
}

.home-preloader .center .done > .text-1 {
  text-align: right;
}

.home-preloader .center .done > .text-2 {
  text-align: left;
}

.home-preloader .center .done > .send {
  flex: 0 0 auto;
}

/* InfiAI Labs — EN/中 switch UI, same black pill as .volume */

.infiai-lang-switch {
  align-items: center;
  background: #000;
  border: none;
  border-radius: 50px;
  box-sizing: border-box;
  color: #b6b6b6;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  gap: 6px;
  height: 36px;
  justify-content: center;
  letter-spacing: 0.36px;
  line-height: 1;
  min-width: 88px;
  outline: none;
  overflow: hidden;
  padding: 0 14px;
  pointer-events: auto;
  position: relative;
  text-transform: none;
  transform: translateZ(0);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  z-index: 4;
}

.infiai-lang-switch .infiai-lang-label {
  color: #b6b6b6;
}

.infiai-lang-switch .infiai-lang-label.is-active {
  color: #fff;
}

.infiai-lang-switch .infiai-lang-sep {
  color: #666;
}

/* Preloader: row with sound + language, centered */
.home-preloader .bottom > div:has(> .volume) {
  align-items: center;
  display: flex !important;
  gap: 10px;
  justify-content: center;
  margin: 0 auto 15px;
  text-align: center;
  width: fit-content;
}

.home-preloader .bottom > div:has(> .volume) > .volume {
  margin: 0 !important;
}

/* Main scene: above bottom-left sound pill (sibling of Vue row, not inside it) */
.social-links-global-parent > .infiai-lang-switch.infiai-social-lang {
  bottom: calc(36px + 8px);
  left: 20px;
  position: absolute;
}

/*
 * AR jelly button (bottom-right).
 * Resting state MUST be a 36px black disc + jelly icon only.
 * .active (set after preload) must NOT expand the customize panel;
 * only real :hover may open it. Otherwise patternCus* reads as a
 * broken striped capsule at the end of the hold progress bar.
 *
 * Also match .volume:has(.jel-icon) — Vue can mis-patch ar-mode → volume
 * if foreign nodes were injected into .social-links-global.
 */
.social-links-global .ar-mode:not(:hover),
.social-links-global .ar-mode.active:not(:hover),
.social-links-global > .volume:has(.jel-icon):not(:hover),
.social-links-global > .volume.active:has(.jel-icon):not(:hover) {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  border-radius: 50% !important;
  background: #000 !important;
  right: 20px !important;
  bottom: 0 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-size: auto !important;
  mask-size: auto !important;
  -webkit-mask-position: 0 0 !important;
  mask-position: 0 0 !important;
  transition: none !important;
}

.social-links-global .ar-mode:not(:hover) .options-menu,
.social-links-global .ar-mode:not(:hover) .selected-menu,
.social-links-global .ar-mode.active:not(:hover) .options-menu,
.social-links-global .ar-mode.active:not(:hover) .selected-menu,
.social-links-global .ar-mode:not(:hover) .pattern,
.social-links-global .ar-mode.active:not(:hover) .pattern,
.social-links-global .ar-mode:not(:hover) .top,
.social-links-global .ar-mode.active:not(:hover) .top,
.social-links-global .ar-mode:not(:hover) .bottom,
.social-links-global .ar-mode.active:not(:hover) .bottom,
.social-links-global .ar-mode:not(:hover) .item,
.social-links-global .ar-mode.active:not(:hover) .item,
.social-links-global .ar-mode:not(:hover) .slider-block,
.social-links-global .ar-mode.active:not(:hover) .slider-block,
.social-links-global > .volume:has(.jel-icon):not(:hover) .options-menu,
.social-links-global > .volume:has(.jel-icon):not(:hover) .selected-menu,
.social-links-global > .volume:has(.jel-icon):not(:hover) .pattern,
.social-links-global > .volume:has(.jel-icon):not(:hover) .top,
.social-links-global > .volume:has(.jel-icon):not(:hover) .bottom,
.social-links-global > .volume:has(.jel-icon):not(:hover) .item,
.social-links-global > .volume:has(.jel-icon):not(:hover) .slider-block,
.social-links-global > .volume:has(.jel-icon):not(:hover) .status,
.social-links-global > .volume:has(.jel-icon):not(:hover) .menu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.social-links-global .ar-mode:not(:hover) .jel-icon,
.social-links-global .ar-mode.active:not(:hover) .jel-icon,
.social-links-global > .volume:has(.jel-icon):not(:hover) .jel-icon {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  margin: 0 !important;
  width: 20px !important;
  z-index: 5 !important;
}

@media (max-width: 991px) {
  .social-links-global .ar-mode:not(:hover),
  .social-links-global .ar-mode.active:not(:hover),
  .social-links-global > .volume:has(.jel-icon):not(:hover),
  .social-links-global > .volume.active:has(.jel-icon):not(:hover) {
    right: 8px !important;
  }
}

@media (max-width: 991px) {
  .infiai-lang-switch {
    min-width: 80px;
    padding: 0 12px;
  }

  .home-preloader .bottom > div:has(> .volume) {
    gap: 8px;
  }

  .social-links-global-parent > .infiai-lang-switch.infiai-social-lang {
    left: 8px;
  }
}

/* Preloader bottom tagline: Chinese uses Noto Sans SC to match IBM Plex Mono */
html[lang="zh-CN"] .home-preloader .bottom > p,
html[data-infiai-lang="zh"] .home-preloader .bottom > p {
  font-family: "Noto Sans SC", "IBM Plex Mono", sans-serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.35;
  text-transform: none;
}

/*
 * DrukMedium has no CJK glyphs — system fallback looks larger & thinner.
 * Use Noto Sans SC Black, slightly smaller size, tighter tracking.
 */
html[lang="zh-CN"] .click-and-hold .wrapper .text,
html[data-infiai-lang="zh"] .click-and-hold .wrapper .text {
  font-family: "Noto Sans SC", "DrukMedium", sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: none;
}

@media (max-width: 991px) {
  html[lang="zh-CN"] .click-and-hold .wrapper .text,
  html[data-infiai-lang="zh"] .click-and-hold .wrapper .text {
    font-size: 22px;
  }
}

html[lang="zh-CN"] .scene-texts .wrapper .left-text p,
html[lang="zh-CN"] .scene-texts .wrapper .right-text p,
html[data-infiai-lang="zh"] .scene-texts .wrapper .left-text p,
html[data-infiai-lang="zh"] .scene-texts .wrapper .right-text p {
  font-family: "Noto Sans SC", "DrukMedium", sans-serif;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: none;
}

@media (max-width: 991px) {
  html[lang="zh-CN"] .scene-texts .wrapper .left-text p,
  html[lang="zh-CN"] .scene-texts .wrapper .right-text p,
  html[data-infiai-lang="zh"] .scene-texts .wrapper .left-text p,
  html[data-infiai-lang="zh"] .scene-texts .wrapper .right-text p {
    font-size: 22px;
  }
}

html[lang="zh-CN"] .scene-texts .wrapper .bottom-texts .bottom-text,
html[data-infiai-lang="zh"] .scene-texts .wrapper .bottom-texts .bottom-text {
  font-family: "Noto Sans SC", "DrukMedium", sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: none;
}

@media (max-width: 991px) {
  html[lang="zh-CN"] .scene-texts .wrapper .bottom-texts .bottom-text,
  html[data-infiai-lang="zh"] .scene-texts .wrapper .bottom-texts .bottom-text {
    font-size: 22px;
  }
}

/* Footer Chinese headline — smaller than Latin Druk 49px */
html[lang="zh-CN"] .home-footer .wrapper h4,
html[data-infiai-lang="zh"] .home-footer .wrapper h4 {
  font-family: "Noto Sans SC", "DrukMedium", sans-serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: none;
}

@media (max-width: 767px) {
  html[lang="zh-CN"] .home-footer .wrapper h4,
  html[data-infiai-lang="zh"] .home-footer .wrapper h4 {
    font-size: 20px;
  }
}

/*
 * /contact hero: Latin Druk ~90px / 500 is oversized & thin for CJK.
 * Smaller Black display keeps weight while freeing space for the form.
 */
html[lang="zh-CN"] .contact-hero h1,
html[lang="zh-CN"] .contact-hero h2,
html[data-infiai-lang="zh"] .contact-hero h1,
html[data-infiai-lang="zh"] .contact-hero h2 {
  font-family: "Noto Sans SC", "DrukMedium", sans-serif;
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-transform: none;
}

@media (max-width: 991px) {
  html[lang="zh-CN"] .contact-hero h1,
  html[lang="zh-CN"] .contact-hero h2,
  html[data-infiai-lang="zh"] .contact-hero h1,
  html[data-infiai-lang="zh"] .contact-hero h2 {
    font-size: 34px;
  }
}

@media (max-width: 767px) {
  html[lang="zh-CN"] .contact-hero h1,
  html[lang="zh-CN"] .contact-hero h2,
  html[data-infiai-lang="zh"] .contact-hero h1,
  html[data-infiai-lang="zh"] .contact-hero h2 {
    font-size: 24px;
  }
}

/* Homepage footer: only email, centered — keep original Druk metrics */
.home-footer .wrapper .socials {
  justify-content: center;
}

.home-footer .wrapper .socials a {
  flex: 0 1 auto;
}

html[lang="zh-CN"] .about-page .about-hero h1,
html[data-infiai-lang="zh"] .about-page .about-hero h1,
html[lang="zh-CN"] .about-page .about-section-head h3,
html[data-infiai-lang="zh"] .about-page .about-section-head h3,
html[lang="zh-CN"] .about-page .about-card h4,
html[data-infiai-lang="zh"] .about-page .about-card h4,
html[lang="zh-CN"] .about-page .about-mode h4,
html[data-infiai-lang="zh"] .about-page .about-mode h4,
html[lang="zh-CN"] .about-page .about-cta a,
html[data-infiai-lang="zh"] .about-page .about-cta a {
  font-family: "Noto Sans SC", "DrukMedium", sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: none;
}

html[lang="zh-CN"] .about-page .about-hero h1,
html[data-infiai-lang="zh"] .about-page .about-hero h1 {
  font-size: 72px;
  line-height: 1;
}

html[lang="zh-CN"] .about-page p,
html[lang="zh-CN"] .about-page td,
html[lang="zh-CN"] .about-page th,
html[lang="zh-CN"] .about-page .about-stat-label,
html[lang="zh-CN"] .about-page .about-pain h4,
html[data-infiai-lang="zh"] .about-page p,
html[data-infiai-lang="zh"] .about-page td,
html[data-infiai-lang="zh"] .about-page th,
html[data-infiai-lang="zh"] .about-page .about-stat-label,
html[data-infiai-lang="zh"] .about-page .about-pain h4 {
  font-family: "Noto Sans SC", "IBM Plex Mono", sans-serif;
  letter-spacing: 0.04em;
}

@media (max-width: 991px) {
  html[lang="zh-CN"] .about-page .about-hero h1,
  html[data-infiai-lang="zh"] .about-page .about-hero h1 {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  html[lang="zh-CN"] .about-page .about-hero h1,
  html[data-infiai-lang="zh"] .about-page .about-hero h1 {
    font-size: 28px;
  }
}

/*
 * /work hero: original Druk 220px / 48px is Latin-tuned.
 * CJK fallback fills the viewport and paints over the fixed 3D cases.
 * Retune like /about so cards stay visible behind a compact hero.
 */
html[lang="zh-CN"] .works-hero,
html[data-infiai-lang="zh"] .works-hero {
  pointer-events: none;
}

html[lang="zh-CN"] .works-hero h1,
html[data-infiai-lang="zh"] .works-hero h1 {
  font-family: "Noto Sans SC", "DrukMedium", sans-serif;
  font-size: 96px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.05;
  padding-top: 88px;
  text-transform: none;
}

html[lang="zh-CN"] .works-hero .blur-parent,
html[data-infiai-lang="zh"] .works-hero .blur-parent {
  background: hsla(0, 0%, 100%, 0.28);
  padding: 22px 28px;
  transform: translateY(8px);
  width: min(920px, calc(100% - 74px));
}

html[lang="zh-CN"] .works-hero .blur-parent .back,
html[data-infiai-lang="zh"] .works-hero .blur-parent .back {
  background: linear-gradient(
    180deg,
    hsla(0, 0%, 100%, 0.18) 39%,
    hsla(0, 0%, 100%, 0.55)
  );
}

/* Match homepage click-and-hold CN display: Noto Black, not Druk Medium */
html[lang="zh-CN"] .works-hero .blur-parent h2,
html[data-infiai-lang="zh"] .works-hero .blur-parent h2 {
  font-family: "Noto Sans SC", "DrukMedium", sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.35;
  max-width: 780px;
  text-transform: none;
}

@media (max-width: 991px) {
  html[lang="zh-CN"] .works-hero h1,
  html[data-infiai-lang="zh"] .works-hero h1 {
    font-size: 56px;
    padding-top: 96px;
  }

  html[lang="zh-CN"] .works-hero .blur-parent,
  html[data-infiai-lang="zh"] .works-hero .blur-parent {
    padding: 14px 18px;
    transform: translateY(4px);
    width: calc(100% - 40px);
  }

  html[lang="zh-CN"] .works-hero .blur-parent h2,
  html[data-infiai-lang="zh"] .works-hero .blur-parent h2 {
    font-size: 15px;
    line-height: 1.35;
  }
}

@media (max-width: 767px) {
  html[lang="zh-CN"] .works-hero h1,
  html[data-infiai-lang="zh"] .works-hero h1 {
    font-size: 40px;
    padding-top: 84px;
  }

  html[lang="zh-CN"] .works-hero .blur-parent,
  html[data-infiai-lang="zh"] .works-hero .blur-parent {
    border-radius: 25px;
    padding: 10px 12px;
    transform: none;
    width: calc(100% - 16px);
  }

  html[lang="zh-CN"] .works-hero .blur-parent h2,
  html[data-infiai-lang="zh"] .works-hero .blur-parent h2 {
    font-size: 13px;
  }
}


/* Case detail titles: short names, always one line */
html[lang="zh-CN"] .case-info .wrapper .left h1,
html[data-infiai-lang="zh"] .case-info .wrapper .left h1 {
  font-family: "Noto Sans SC", "DrukMedium", sans-serif;
  font-size: 72px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

@media (max-width: 991px) {
  html[lang="zh-CN"] .case-info .wrapper .left h1,
  html[data-infiai-lang="zh"] .case-info .wrapper .left h1 {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  html[lang="zh-CN"] .case-info .wrapper .left h1,
  html[data-infiai-lang="zh"] .case-info .wrapper .left h1 {
    font-size: 28px;
  }
}

/*
 * bottom-text-2: two lines via <br>.
 * Nuxt CSS loads AFTER this file and reasserts display:flex / width:420px,
 * so !important is required. Block + text-align centers unequal lines;
 * left:50% + translateX(-50%) centers the block on the page.
 */
.scene-texts .wrapper .bottom-texts p.bottom-text.bottom-text-2 {
  display: block !important;
  justify-content: center !important;
  left: 50% !important;
  max-width: 90vw !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
  white-space: normal !important;
  width: max-content !important;
}

html[lang="zh-CN"] .scene-texts .wrapper .bottom-texts .bottom-text-2,
html[data-infiai-lang="zh"] .scene-texts .wrapper .bottom-texts .bottom-text-2 {
  font-size: 24px;
  line-height: 1.25;
}