/* ==========================================================================
   launch-polish.css — TranscEngram / 忆生科技 final visual pass
   Loads LAST (after visual-mode.css → ui-polish.css, then cinematic-*.css).
   CSS only. No brand recolor, no typeface swap, no IA/content changes.
   Radii follow the cinematic language: controls 4px, media 8px.
   Shared typography, media frames and responsive refinements.
   ========================================================================== */

/* ---------- 1. Launch tokens (inherit existing tokens when present) ---------- */
:root {
  --lp-teal: var(--teal, var(--vi-brand));
  --lp-action: var(--ui-action, var(--vi-n92));
  --lp-ink: var(--ui-ink, var(--vi-n23));
  --lp-r-control: var(--cin-radius, 4px);
  --lp-r-media: var(--ui-radius-media, 8px);
  --lp-line: rgb(118 118 118 / 0.28);
  --lp-line-strong: rgb(118 118 118 / 0.42);
  --lp-line-dark: rgb(255 255 255 / 0.09);
  --lp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lp-dur: 180ms;
  --lp-header-offset: 88px;
}

/* ---------- 2. Anchor offset (no overflow clip: dropdowns must stay visible) ---------- */
:is(section[id], main[id], main [id]) {
  scroll-margin-top: var(--lp-header-offset, 88px);
}

/* ---------- 3. Typography rhythm (no font or color changes) ---------- */
body main :is(h1, h2, h3) {
  text-wrap: balance;
}
body main :is(p, li, figcaption) {
  text-wrap: pretty;
}
/* Tighter tracking for Latin display type only; CJK stays as is.
   Home / product display type already tracks tighter; this is a mild cap. */
:lang(en) body main :is(h1, h2) {
  letter-spacing: -0.02em;
}
:lang(en) body main h3 {
  letter-spacing: -0.01em;
}
:lang(en) .home-vision .home-photo-hero h1 {
  letter-spacing: -0.04em; /* keep the existing display tracking */
}
body main figcaption {
  margin-top: 10px;
  line-height: 1.55;
}

/* ---------- 4. Media frames: 1px hairline + unified 8px radius ---------- */
main video,
main figure > video,
main .rd-product video,
main .tele-task-film video,
main .tele-stage-film video,
main .tele-refined video,
main .ego-case .motion,
main .ego-inline-sample video,
main .ego-interface video,
main .qa-screen video,
main .tn-film.motion > video,
main .scene-comparison :is(img, video),
main .scene-input img,
main .facility-photo img {
  border-radius: var(--lp-r-media);
  outline: 1px solid var(--lp-line);
  outline-offset: -1px;
}
/* Full-bleed lobby / office hero: no frame, no radius */
.home-photo-hero img,
.home-photo-hero video,
.about-office img,
.about-office video {
  border-radius: 0;
  outline: 0;
}
/* Team portraits: keep their existing mask; no extra frame */
main .portrait,
main .portrait img,
.about-story .portrait img {
  outline: 0;
}
main video:fullscreen {
  border-radius: 0 !important;
  outline: 0;
}

/* ---------- 5. Buttons / CTAs: one radius, quiet motion ---------- */
body .btn {
  border-radius: var(--lp-r-control);
  transition:
    background-color var(--lp-dur) var(--lp-ease),
    border-color var(--lp-dur) var(--lp-ease),
    color var(--lp-dur) var(--lp-ease),
    box-shadow var(--lp-dur) var(--lp-ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body .btn:hover {
    transform: translateY(-1px);
  }
  body .btn:active {
    transform: translateY(0);
  }
}

/* ---------- 6. Focus: teal ring, keyboard only (do not alter border-radius) ---------- */
body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--lp-action);
  outline-offset: 3px;
}
body :is(.on-dark, .scene-viewer, .te-footer, .home-photo-hero)
  :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--lp-teal);
}

/* ---------- 7. Header / nav refinement ---------- */
body .site-header .nav-burger,
body .site-header .lang-switch button,
body .site-header .btn {
  border-radius: var(--lp-r-control);
  transition:
    color var(--lp-dur) var(--lp-ease),
    background-color var(--lp-dur) var(--lp-ease),
    border-color var(--lp-dur) var(--lp-ease);
}
body .site-header .lang-switch button:hover {
  color: var(--lp-ink);
}
body .site-header .nav-links > li > a {
  text-underline-offset: 9px;
}

/* ---------- 8. Tabs (world-model scene choices; Ego in-page nav) ---------- */
.scene-choice,
.scene-chapters button,
.ego-page-nav a {
  transition:
    color var(--lp-dur) var(--lp-ease),
    border-color var(--lp-dur) var(--lp-ease),
    background-color var(--lp-dur) var(--lp-ease);
}
.scene-choice img {
  border-radius: var(--lp-r-control);
  outline: 1px solid var(--lp-line);
  outline-offset: -1px;
}
.scene-choice[aria-pressed="true"] {
  border-color: var(--lp-action);
  box-shadow: 0 0 0 1px var(--lp-action);
}
.scene-choice[aria-pressed="true"] img {
  outline-color: var(--lp-teal);
}

/* ---------- 9. Tables (TeleOp control/spec table) ---------- */
main table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
main table th,
main table td {
  border-color: var(--lp-line);
  vertical-align: top;
}

/* ---------- 10. Forms (contact, publication filters) ---------- */
.contact-page .contact-form :is(input:not([type="checkbox"]), select, textarea),
.pub-field :is(input, select) {
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-r-control);
  transition:
    border-color var(--lp-dur) var(--lp-ease),
    box-shadow var(--lp-dur) var(--lp-ease);
}
.contact-page .contact-form :is(input:not([type="checkbox"]), select, textarea):hover,
.pub-field :is(input, select):hover {
  border-color: rgb(118 118 118 / 0.6);
}
.contact-page .contact-form :is(input:not([type="checkbox"]), select, textarea):focus-visible,
.pub-field :is(input, select):focus-visible {
  outline: none;
  border-color: var(--lp-action);
  box-shadow: 0 0 0 3px rgb(40 231 197 / 0.28);
}
.contact-form {
  border-color: var(--lp-line);
}

/* ---------- 11. Cards: aligned bottoms, quiet hover ---------- */
.rd-products {
  align-items: stretch;
}
.rd-product,
.tele-product-option {
  display: flex;
  flex-direction: column;
}
.rd-product .rd-link,
.tele-product-option > :last-child {
  margin-top: auto;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rd-product video,
  .rd-product img {
    transition: filter 240ms var(--lp-ease);
  }
  .rd-product:hover video,
  .rd-product:hover img {
    filter: brightness(1.06);
  }
  .rd-link,
  .tele-text-link,
  .footer-navigation a,
  .footer-socials a {
    transition: color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease);
  }
}

/* ---------- 12. Footer ---------- */
.te-footer.footer-v14 {
  border-top: 1px solid var(--vi-n51);
}
.footer-v14 .footer-socials a {
  min-height: 36px;
  min-width: 36px;
  border-radius: var(--lp-r-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-v14 .footer-navigation a:hover,
.footer-v14 .footer-socials a:hover,
.footer-v14 .footer-legal a:hover {
  color: var(--lp-teal);
}

/* ---------- 13. ≤900px: touch targets (no display changes) ---------- */
@media (max-width: 900px) {
  body .site-header .nav-burger {
    min-height: 44px;
    min-width: 44px;
  }
  body .site-header .lang-switch button {
    min-height: 44px;
    padding-inline: 8px;
  }
  body .site-header .btn {
    min-height: 44px;
  }
  body .btn {
    min-height: 44px;
  }
  .footer-v14 .footer-socials a {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ---------- 14. ≤480px: 390 polish ---------- */
@media (max-width: 480px) {
  :root {
    --lp-header-offset: 72px;
  }
  /* 16px inputs stop iOS zoom-on-focus */
  .contact-page .contact-form :is(input:not([type="checkbox"]), select, textarea),
  .pub-field :is(input, select) {
    font-size: 16px;
    min-height: 44px;
  }
  .contact-page .contact-form textarea {
    min-height: 120px;
  }
  .contact-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .contact-actions .btn {
    min-height: 44px;
  }
  /* Home hero: tighten type and photo padding so the secondary CTA
     can reach the first screen. Copy is not cut or hidden. */
  .home-vision .home-photo-hero h1,
  :lang(zh) .home-vision .home-photo-hero h1 {
    line-height: 1.14;
  }
  .home-vision .home-photo-hero .company-lead {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 14px;
  }
  .home-vision .home-photo-hero .about-actions {
    margin-top: 18px;
    gap: 10px 18px;
  }
  :lang(en) .home-vision .home-photo-hero .company-intro-layout {
    padding-top: clamp(300px, 70vw, 360px);
  }
  main video,
  main figure > video {
    border-radius: 6px;
  }
  .home-photo-hero img,
  .home-photo-hero video,
  .about-office img {
    border-radius: 0;
  }
}

/* ---------- 15. Reveal: scroll-driven, progressive, motion-safe ---------- */
@keyframes lp-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Figures and product cards fade in as they enter; items already
       on screen at load sit past the entry range and render fully. */
    main .rd-product,
    main .tele-product-option,
    main .tele-task-film,
    main .ego-case,
    main .qa-screen,
    main .scene-viewer {
      animation: lp-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
  }
}

/* ---------- 16. Reduced motion: switch off all polish motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rd-product,
  .tele-product-option,
  .tele-task-film,
  .ego-case,
  .qa-screen,
  .scene-viewer {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body .btn:hover,
  body .btn:active {
    transform: none;
  }
}

/* Collection-facility capacity is separate from the partner-site totals. */
.network-facility-stat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--lp-line);
}
.network-facility-stat strong {
  font-size: clamp(34px, 3.3vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.network-facility-stat strong span {font-size: .5em;letter-spacing: 0;}
.network-facility-stat > span {font-size: 14px;color: var(--muted, var(--vi-n92));}