*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --paper: #f5f4f1;
  --ink: #000;
  --muted: #9b9997;
  /* One scale factor drives every frame, its shared navigation, and every
     design coordinate.  Using the exact source canvas ratios avoids the
     small cumulative rounding drift that showed up at unusual viewport
     sizes. */
  --unit: min(calc(100vw / 1836), calc(100vh / 925));
  --canvas-width: calc(1836 * var(--unit));
  --canvas-height: calc(925 * var(--unit));
  --canvas-offset-x: calc((100vw - var(--canvas-width)) / 2);
  --canvas-offset-y: calc((100vh - var(--canvas-height)) / 2);
  /* One project-owned typography stack for every page. The first face covers
     the decorative Latin glyphs; the bundled Alibaba face supplies the CJK
     glyphs instead of letting each browser choose a different system font. */
  --display-font: "TheNightWatch", "Alibaba PuHui Ti", "Times New Roman", "Songti SC", serif;
}

@font-face {
  font-family: "TheNightWatch";
  src: url("./assets/fonts/TheNightWatch.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alibaba PuHui Ti";
  src: url("./assets/fonts/AlibabaPuHuiTi-2-55-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html,
body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  background: var(--paper);
}

body {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--display-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
a {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

img {
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

[hidden] {
  display: none !important;
}

.about-page {
  display: grid;
  width: 100vw;
  height: 100vh;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
}

.about-frame {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--paper);
  contain: layout paint;
  isolation: isolate;
}

.site-header {
  position: absolute;
  z-index: 10;
  top: calc(17 * var(--unit));
  left: 0;
  width: 100%;
  pointer-events: none;
  /* The logo follows the centered design width, but its top edge is anchored
     to the browser viewport rather than to the letterboxed canvas. */
  translate: var(--canvas-offset-x) 0;
}

.brand-logo {
  display: block;
  width: calc(145.523 * var(--unit));
  height: calc(48.212 * var(--unit));
  margin-left: calc(837 * var(--unit));
  pointer-events: auto;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-visual {
  position: absolute;
  z-index: 2;
  top: calc(134 * var(--unit));
  left: calc(1185 * var(--unit));
  width: calc(601 * var(--unit));
  height: calc(657 * var(--unit));
  overflow: visible;
  transform-origin: 50% 50%;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  translate: var(--canvas-offset-x) var(--canvas-offset-y);
}

.about-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

.about-copy-window {
  position: absolute;
  z-index: 3;
  top: calc(140 * var(--unit));
  left: calc(57 * var(--unit));
  width: calc(614 * var(--unit));
  height: calc(925 * var(--unit));
  overflow: visible;
  pointer-events: none;
  translate: var(--canvas-offset-x) var(--canvas-offset-y);
}

.about-copy-track {
  position: relative;
  width: 100%;
  height: calc(2600 * var(--unit));
  --copy-progress: 0;
  --copy-drift: 0px;
  --copy-scroll: 0;
  transform: translate3d(0, calc(-1 * var(--copy-scroll) * var(--unit)), 0);
  will-change: transform;
}

.about-copy {
  position: absolute;
  margin: 0;
  color: var(--muted);
  font-family: var(--display-font);
  font-size: calc(20 * var(--unit));
  font-weight: 400;
  letter-spacing: calc(1.6 * var(--unit));
  line-height: 1.47;
  text-wrap: pretty;
  transform: translate3d(0, calc(-50% + var(--copy-drift)), 0);
  will-change: transform, opacity;
}

.about-copy-en {
  top: calc(105 * var(--unit));
  left: 0;
  width: calc(614 * var(--unit));
  color: var(--ink);
  font-size: 0;
  letter-spacing: calc(1.6 * var(--unit));
  line-height: 0;
  white-space: pre-wrap;
  text-transform: none;
}

.about-copy-en > span:not(.drop-cap) {
  font-size: calc(20 * var(--unit));
  line-height: 1.0038;
}

.about-copy-en.is-typewriting > span {
  opacity: 0;
  animation: about-typewriter-char 22ms linear var(--type-delay) forwards;
}

.drop-cap {
  color: var(--ink);
  font-size: calc(32 * var(--unit));
  line-height: 1.0038;
}

.about-copy-cn-intro {
  top: calc(667 * var(--unit));
  left: calc(163 * var(--unit));
  width: calc(387 * var(--unit));
  color: var(--ink);
  z-index: 3;
  background: var(--paper);
  white-space: pre;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
}

.about-copy-cn-intro.is-revealing {
  animation: about-copy-intro-reveal 1.5s linear forwards;
}

.about-small-image {
  position: absolute;
  z-index: 2;
  top: calc(533 * var(--unit));
  left: 0;
  width: calc(146 * var(--unit));
  height: calc(188 * var(--unit));
  margin: 0;
  overflow: hidden;
  transform: translate3d(0, calc(var(--copy-drift) * -0.55), 0);
  will-change: transform;
}

.about-small-image img {
  position: absolute;
  top: 0;
  left: -13.01%;
  height: 100%;
  width: 128.77%;
  object-fit: fill;
  animation: small-image-breathe 7.5s ease-in-out infinite alternate-reverse;
  will-change: transform;
}

.about-copy-long {
  z-index: 1;
  top: calc(1181 * var(--unit));
  left: 0;
  width: calc(571 * var(--unit));
  white-space: normal;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
}

.about-copy-long.is-revealing {
  animation: about-copy-below-reveal 1.5s linear forwards;
}

.about-copy-long p {
  margin: 0;
  white-space: pre-wrap;
  color: transparent;
  background: linear-gradient(
    180deg,
    #000 0,
    #000 70%,
    #4c4b4a 78%,
    var(--muted) 86%,
    var(--muted) 100%
  );
  background-size: 100% calc(925 * var(--unit));
  background-position: 0 var(--copy-gradient-y, 0px);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

.about-copy-long p + p {
  margin-top: calc(23.5 * var(--unit));
}

.bottom-nav {
  position: absolute;
  z-index: 20;
  inset: 0;
  pointer-events: none;
}

/* The navigation is a single viewport-level layer. Keeping one instance
   outside the page frames prevents it from disappearing while a page changes. */
.global-navigation-frame {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: block;
  pointer-events: none;
}

/* Shared top-right compliance block from the source artwork. It lives in the
   same fixed canvas as the logo, so every page keeps one aligned coordinate
   system while the whole composition scales with the browser. */
.global-compliance {
  position: absolute;
  z-index: 110;
  top: calc(17 * var(--unit));
  right: calc(var(--canvas-offset-x) + 51 * var(--unit));
  width: calc(306 * var(--unit));
  color: var(--ink);
  font-family: var(--display-font);
  font-size: calc(14 * var(--unit));
  font-weight: 400;
  line-height: 1.23955;
  text-align: right;
  white-space: nowrap;
  pointer-events: auto;
}

.global-copyright,
.global-compliance-link {
  display: flex;
  justify-content: flex-end;
}

.global-copyright {
  flex-direction: column;
}

.global-compliance-link {
  align-items: center;
  min-height: calc(22 * var(--unit));
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.global-compliance-link:hover,
.global-compliance-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: calc(2 * var(--unit));
  outline: none;
}

.global-security-link {
  gap: calc(1 * var(--unit));
}

.global-security-icon {
  flex: 0 0 auto;
  width: calc(15 * var(--unit));
  height: calc(16 * var(--unit));
  object-fit: contain;
}

.global-navigation-frame .global-bottom-nav {
  position: absolute;
  inset: auto;
  left: var(--canvas-offset-x);
  bottom: 0;
  width: calc(1836 * var(--unit));
  height: calc(925 * var(--unit));
  pointer-events: none;
  animation: nav-component-float 8.4s ease-in-out -2.6s infinite;
  will-change: translate;
}

.global-navigation-frame .nav-item {
  pointer-events: auto;
}

/* Text and pointer deliberately share one motion owner. Their relationship
   must never change while the component floats at the viewport bottom. */
.global-navigation-frame .nav-pointer.is-spinning-clockwise {
  animation: nav-pointer-spin-clockwise var(--nav-pointer-spin-duration, 900ms) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.global-navigation-frame .nav-pointer.is-spinning-counterclockwise {
  animation: nav-pointer-spin-counterclockwise var(--nav-pointer-spin-duration, 900ms) cubic-bezier(0.16, 1, 0.3, 1) both;
}

.global-navigation-frame .nav-item.is-clicking {
  animation: nav-click-pulse 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.contact-submit.is-clicking,
.product-category.is-clicking {
  animation: click-pulse 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Page-local copies remain in the source frames for traceability, but the
   live navigation is the fixed shared copy above. */
.about-page > .about-frame > .bottom-nav,
.contact-page > .contact-frame > .bottom-nav,
.news-page > .news-frame > .bottom-nav,
.team-page > .team-frame > .bottom-nav,
.product-page > .product-frame > .bottom-nav {
  display: none;
}

.bottom-nav.is-animating {
  pointer-events: none;
}

.bottom-nav.is-animating .nav-item {
  pointer-events: none;
}

.global-navigation-frame .bottom-nav.is-animating .nav-item {
  transition: color 280ms ease, top 620ms cubic-bezier(0.16, 1, 0.3, 1), left 620ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms ease;
}

.nav-item {
  position: absolute;
  z-index: 2;
  top: calc(var(--nav-top) * var(--unit));
  left: calc(var(--nav-left) * var(--unit));
  color: var(--muted);
  font-size: calc(34 * var(--unit));
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  transition: color 280ms ease, top 620ms cubic-bezier(0.16, 1, 0.3, 1), left 620ms cubic-bezier(0.16, 1, 0.3, 1), transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms ease;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: auto;
  will-change: top, left;
}

.nav-item:hover,
.nav-item:focus-visible,
.nav-item.is-active {
  color: var(--ink);
  transform: translate3d(-50%, calc(-50% - 4 * var(--unit)), 0);
  outline: none;
}

.nav-contact {
  --nav-top: 906.5;
  --nav-left: 724.5;
}

.nav-news {
  --nav-top: 850.5;
  --nav-left: 794.5;
}

.nav-team {
  --nav-top: 819.5;
  --nav-left: 927;
}

.nav-about {
  --nav-top: 850.5;
  --nav-left: 1073;
}

.nav-product {
  --nav-top: 906.5;
  --nav-left: 1116;
}

.nav-pointer {
  position: absolute;
  z-index: 1;
  top: calc(865 * var(--unit));
  left: calc(893 * var(--unit));
  width: calc(135 * var(--unit));
  height: calc(53 * var(--unit));
  transform-origin: calc(3 * var(--unit)) calc(50 * var(--unit));
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease;
  pointer-events: none;
  will-change: transform, translate;
}

@keyframes nav-pointer-spin-clockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes nav-pointer-spin-counterclockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes visual-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  12.5% { transform: translate3d(calc(9 * var(--unit)), calc(4 * var(--unit)), 0) rotate(0.13deg); }
  25% { transform: translate3d(calc(20 * var(--unit)), calc(8 * var(--unit)), 0) rotate(0.3deg); }
  37.5% { transform: translate3d(calc(31 * var(--unit)), calc(2 * var(--unit)), 0) rotate(0.46deg); }
  50% { transform: translate3d(calc(36 * var(--unit)), calc(-12 * var(--unit)), 0) rotate(0.5deg); }
  62.5% { transform: translate3d(calc(22 * var(--unit)), calc(-5 * var(--unit)), 0) rotate(0.26deg); }
  75% { transform: translate3d(calc(9 * var(--unit)), calc(14 * var(--unit)), 0) rotate(-0.25deg); }
  87.5% { transform: translate3d(calc(2 * var(--unit)), calc(6 * var(--unit)), 0) rotate(-0.12deg); }
}

@keyframes about-visual-enter {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  48% {
    opacity: 0.72;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  76% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes about-visual-image-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes small-image-breathe {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(calc(4 * var(--unit)), calc(-5 * var(--unit)), 0) rotate(-1deg); }
}

.page-enter {
  position: absolute;
  z-index: 8;
  inset: 0;
  background: var(--paper);
  pointer-events: none;
  animation: page-reveal 850ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.about-frame.is-transitioning .page-enter {
  visibility: visible;
  animation: page-reveal 850ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.about-frame.is-transitioning,
.contact-frame.is-transitioning,
.news-frame.is-transitioning,
.team-frame.is-transitioning,
.product-frame.is-transitioning {
  animation: page-frame-arrive 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.about-visual.is-entering {
  animation: about-visual-enter 5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.about-visual.is-floating {
  opacity: 1;
  animation: visual-breathe 12s linear infinite;
}

.about-visual img.is-revealing {
  animation: about-visual-image-reveal 850ms ease-out both;
}

/* Contact page — source frame 365:534, kept in the shared 1836×925 coordinate
   system so the logo, navigation, typography, and form scale together. */
.contact-page {
  display: grid;
  width: 100vw;
  height: 100vh;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
}

.contact-frame {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--paper);
  contain: layout paint;
  isolation: isolate;
}

.contact-content {
  position: absolute;
  z-index: 2;
  inset: auto;
  left: var(--canvas-offset-x);
  top: var(--canvas-offset-y);
  width: var(--canvas-width);
  height: var(--canvas-height);
  color: var(--muted);
  font-family: var(--display-font);
  font-weight: 400;
  opacity: 0;
}

/* Meech213 /book entrance: the page content arrives as one quiet fade,
   while the fixed shared navigation remains present throughout the route
   change. */
.contact-content.is-entering {
  animation: contact-page-content-reveal 400ms ease-out both;
}

.contact-content.is-visible {
  opacity: 1;
}

.contact-details {
  position: absolute;
  z-index: 3;
  top: calc(194 * var(--unit));
  left: calc(657 * var(--unit));
  width: calc(522 * var(--unit));
  height: calc(252 * var(--unit));
  color: var(--ink);
  font-size: calc(22 * var(--unit));
  line-height: 0.97;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.contact-details.is-entering {
  animation: none;
}

.contact-copy-rise {
  display: inline-block;
  opacity: 1;
  clip-path: none;
  transform: none;
}

.contact-copy-rise-block {
  display: block;
}

.contact-center-line {
  display: inline-block;
  transform: none;
}

/* The center copy is revealed as real horizontal blinds. The source text
   keeps the layout dimensions, while eight clipped copies open from bottom
   to top one slat at a time. */
.contact-blind-host {
  position: relative;
  color: transparent;
  opacity: 1;
  clip-path: none;
  transform: none;
}

.contact-blind-layers {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  overflow: hidden;
  color: var(--ink);
  pointer-events: none;
}

.contact-blind-slice {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--ink);
  clip-path: inset(var(--blind-top) 0 var(--blind-bottom) 0);
  opacity: 0;
  transform: translate3d(0, calc(13 * var(--unit)), 0);
}

.contact-details.is-entering .contact-blind-slice {
  animation: contact-center-blinds-in 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--blind-delay) both;
}

.contact-details p {
  margin: 0 0 calc(21.34 * var(--unit));
}

.contact-orbit {
  position: absolute;
  color: var(--ink);
  font-size: calc(16 * var(--unit));
  line-height: 1.0038;
  letter-spacing: calc(1.28 * var(--unit));
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.contact-orbit-ring {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.contact-orbit-ring.is-entering .contact-orbit {
  --orbit-entry-rotate: -18deg;
}

.contact-orbit-ring.is-entering .contact-orbit:nth-child(2) { --orbit-entry-rotate: 21deg; }
.contact-orbit-ring.is-entering .contact-orbit:nth-child(3) { --orbit-entry-rotate: -24deg; }
.contact-orbit-ring.is-entering .contact-orbit:nth-child(4) { --orbit-entry-rotate: 24deg; }
.contact-orbit-ring.is-entering .contact-orbit:nth-child(5) { --orbit-entry-rotate: -20deg; }
.contact-orbit-ring.is-entering .contact-orbit:nth-child(6) { --orbit-entry-rotate: 18deg; }

.contact-orbit-ring.is-entering .contact-orbit > .contact-orbit-entry {
  display: inline-block;
  transform-origin: 50% 50%;
  will-change: opacity, transform;
  animation: contact-orbit-label-entrance 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.contact-orbit-float {
  display: inline-block;
  transform: translate3d(0, 0, 0) rotate(0deg);
  will-change: transform;
}

.contact-orbit-ring.is-entering .contact-orbit:nth-child(1) .contact-orbit-float {
  animation: contact-orbit-float-one 6.8s ease-in-out 900ms infinite both;
}

.contact-orbit-ring.is-entering .contact-orbit:nth-child(2) .contact-orbit-float {
  animation: contact-orbit-float-two 7.4s ease-in-out 900ms infinite both;
}

.contact-orbit-ring.is-entering .contact-orbit:nth-child(3) .contact-orbit-float {
  animation: contact-orbit-float-three 6.1s ease-in-out 900ms infinite both;
}

.contact-orbit-ring.is-entering .contact-orbit:nth-child(4) .contact-orbit-float {
  animation: contact-orbit-float-four 8.2s ease-in-out 900ms infinite both;
}

.contact-orbit-ring.is-entering .contact-orbit:nth-child(5) .contact-orbit-float {
  animation: contact-orbit-float-five 6.5s ease-in-out 900ms infinite both;
}

.contact-orbit-ring.is-entering .contact-orbit:nth-child(6) .contact-orbit-float {
  animation: contact-orbit-float-six 7.8s ease-in-out 900ms infinite both;
}

.contact-orbit-pluralistic { left: calc(468 * var(--unit)); top: calc(192 * var(--unit)); transform: translate(-50%, -50%) rotate(-45deg); }
.contact-orbit-profession { left: calc(397 * var(--unit)); top: calc(462 * var(--unit)); transform: translate(-50%, -50%) rotate(-90deg); }
.contact-orbit-full-chain { left: calc(468 * var(--unit)); top: calc(736 * var(--unit)); transform: translate(-50%, -50%) rotate(45deg); }
.contact-orbit-exquisite { left: calc(1370 * var(--unit)); top: calc(192 * var(--unit)); transform: translate(-50%, -50%) rotate(45deg); }
.contact-orbit-international { left: calc(1446 * var(--unit)); top: calc(462 * var(--unit)); transform: translate(-50%, -50%) rotate(90deg); }
.contact-orbit-innovation { left: calc(1362 * var(--unit)); top: calc(736 * var(--unit)); transform: translate(-50%, -50%) rotate(-45deg); }

.contact-form {
  position: absolute;
  inset: 0;
  z-index: 4;
  color: var(--muted);
}

.contact-field {
  position: absolute;
  display: block;
  width: calc(326 * var(--unit));
  height: calc(37 * var(--unit));
  border-bottom: 1px solid rgba(155, 153, 151, 0.58);
}

.contact-field-title { left: calc(572 * var(--unit)); top: calc(510 * var(--unit)); }
.contact-field-name { left: calc(938 * var(--unit)); top: calc(510 * var(--unit)); }
.contact-field-contact { left: calc(572 * var(--unit)); top: calc(565 * var(--unit)); }

.contact-field-message {
  left: calc(572 * var(--unit));
  top: calc(620 * var(--unit));
  width: calc(692 * var(--unit));
  height: calc(74 * var(--unit));
}

.contact-field input,
.contact-field textarea {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: calc(20 * var(--unit));
  font-weight: 400;
  line-height: 1.0038;
  letter-spacing: calc(1.6 * var(--unit));
  text-align: left;
}

.contact-field textarea {
  padding-top: calc(10 * var(--unit));
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.contact-field:focus-within {
  border-bottom-color: var(--ink);
}

.contact-submit {
  position: absolute;
  top: calc(706 * var(--unit));
  left: calc(1201 * var(--unit));
  width: calc(49 * var(--unit));
  height: calc(39 * var(--unit));
  color: var(--ink);
  font-size: calc(20 * var(--unit));
  line-height: 1.0038;
  letter-spacing: calc(1.6 * var(--unit));
  text-align: center;
  white-space: nowrap;
}

.contact-submit:focus-visible,
.contact-submit:hover {
  outline: none;
  transform: translateY(calc(-2 * var(--unit)));
}

.contact-success {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: calc(772 * var(--unit));
  padding: calc(8 * var(--unit)) calc(14 * var(--unit));
  color: var(--ink);
  font-size: calc(18 * var(--unit));
  line-height: 1;
  background: rgba(245, 244, 241, 0.92);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(6 * var(--unit)));
  transition: opacity 220ms ease, transform 220ms ease;
}

.contact-success.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.contact-page .bottom-nav { z-index: 20; }

.contact-frame.is-transitioning .page-enter {
  visibility: visible;
  animation: page-reveal 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.about-frame.is-pressed .about-visual {
  filter: saturate(0.92);
}

.about-frame.is-loaded .about-visual {
  transform: translate3d(0, 0, 0);
}

/* News carousel — the five source shapes are kept in one 1836×925 coordinate
   system so future rectangular images can be clipped into the same geometry. */
.news-page {
  display: grid;
  width: 100vw;
  height: 100vh;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
}

.news-frame {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--paper);
  contain: layout paint;
  isolation: isolate;
}

.news-carousel {
  position: absolute;
  z-index: 1;
  left: var(--canvas-offset-x);
  top: var(--canvas-offset-y);
  width: var(--canvas-width);
  height: var(--canvas-height);
  /* Match TEAM's responsive scene boundary: the source composition scales as
     one canvas, while cards whose source vertices extend beyond that canvas
     may use the browser's remaining horizontal space. The viewport remains
     the final clipping boundary, so resizing never turns an outer card into
     a thin slice merely because it crossed the Figma frame edge. */
  overflow: visible;
}

.news-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: visible;
  cursor: grab;
  touch-action: none;
  user-select: none;
  outline: none;
}

.news-stage:focus-visible {
  outline: none;
}

.news-stage.is-dragging {
  cursor: grabbing;
}

.news-card {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  --news-shadow-x: 0;
  --news-shadow-y: 0;
  --news-shadow-blur: 0;
  --news-shadow-alpha: 0;
  filter: drop-shadow(
    calc(var(--news-shadow-x) * var(--unit))
    calc(var(--news-shadow-y) * var(--unit))
    calc(var(--news-shadow-blur) * var(--unit))
    rgba(0, 0, 0, var(--news-shadow-alpha))
  );
  will-change: clip-path, opacity, transform, translate, filter;
}

.news-card.is-entering {
  animation: news-card-lift-in 1800ms cubic-bezier(0.16, 1, 0.3, 1) var(--news-entry-delay, 0ms) both;
}

.news-card.is-entering .news-card-surface {
  animation: news-card-fade-in 1800ms cubic-bezier(0.16, 1, 0.3, 1) var(--news-entry-delay, 0ms) both;
}

.news-card.is-floating {
  animation: news-card-float 12s linear infinite;
}

.news-card-surface {
  position: absolute;
  inset: 0;
  /* The polygon is allowed to extend beyond the 1836×925 source frame.
     Its clip-path remains the card mask; the browser viewport, rather than
     this source-sized element, is the final responsive crop. */
  overflow: visible;
  background: rgba(217, 217, 217, 0.5);
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  will-change: clip-path, opacity;
}

/* Add the image inside .news-card-surface when the final news assets arrive.
   The surface remains the clipping mask; the image itself can stay rectangular. */
.news-card-surface > img,
.news-card-surface > picture,
.news-card-surface > video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: left, top, width, height, transform;
}

.news-copy {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  color: var(--ink);
  font-family: var(--display-font);
  transform: translateY(calc(10 * var(--unit)));
  transition: opacity 260ms ease;
}

.news-copy-preparing {
  visibility: hidden;
}

.news-copy.is-changing {
  opacity: 0;
}

.news-copy-title,
.news-copy-date,
.news-copy-description {
  position: absolute;
  margin: 0;
  font-weight: 400;
  transform: translateY(-50%);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.news-copy-title {
  top: calc(605 * var(--unit));
  left: calc(832 * var(--unit));
  width: calc(172 * var(--unit));
  font-size: calc(20 * var(--unit));
  line-height: 1.0038;
  letter-spacing: calc(1.6 * var(--unit));
  white-space: nowrap;
}

.news-copy-date {
  top: calc(633 * var(--unit));
  left: calc(854 * var(--unit));
  width: calc(130 * var(--unit));
  font-size: calc(16 * var(--unit));
  line-height: 1.0038;
  letter-spacing: calc(1.28 * var(--unit));
  white-space: nowrap;
}

.news-copy-description {
  top: calc(686 * var(--unit));
  left: calc(776 * var(--unit));
  width: calc(283 * var(--unit));
  color: var(--muted);
  font-size: calc(16 * var(--unit));
  line-height: 1.0038;
  letter-spacing: calc(1.28 * var(--unit));
  white-space: pre-wrap;
}

.news-copy-title > span,
.news-copy-date > span {
  opacity: 1;
}

.news-copy-title.is-typing > span,
.news-copy-date.is-typing > span {
  opacity: 0;
  animation: about-typewriter-char 22ms linear var(--news-type-delay) forwards;
}

.news-copy-description.is-revealing {
  animation: team-copy-gray-reveal 1.5s linear forwards;
}

.news-page .bottom-nav {
  z-index: 20;
}

.news-frame.is-transitioning .page-enter {
  visibility: visible;
  animation: page-reveal 850ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Team page — the three visible containers follow the same bent, diagonal
   path as the source artwork. Two extra cards stay outside the viewport so
   the loop can recycle without exposing an empty slot. */
.team-page {
  display: grid;
  width: 100vw;
  height: 100vh;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
}

.team-frame {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--paper);
  contain: layout paint;
  isolation: isolate;
}

.team-copy {
  position: absolute;
  z-index: 3;
  inset: auto;
  left: var(--canvas-offset-x);
  top: var(--canvas-offset-y);
  width: var(--canvas-width);
  height: var(--canvas-height);
  color: var(--muted);
  font-family: var(--display-font);
  font-size: calc(20 * var(--unit));
  font-weight: 400;
  letter-spacing: normal;
  line-height: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.team-copy.is-changing {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.team-copy-preparing {
  visibility: hidden;
}

.team-copy h1,
.team-copy h2,
.team-copy p {
  position: absolute;
  margin: 0;
  font-weight: 400;
}

.team-copy h1 {
  top: calc(169.5 * var(--unit));
  left: calc(354 * var(--unit));
  color: var(--ink);
  font-size: calc(34 * var(--unit));
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.team-copy h2 {
  top: calc(206 * var(--unit));
  left: calc(354 * var(--unit));
  color: var(--ink);
  font-size: calc(24 * var(--unit));
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.team-copy-award {
  top: calc(263 * var(--unit));
  left: calc(354 * var(--unit));
  width: calc(385 * var(--unit));
  line-height: calc(32 * var(--unit));
  text-align: center;
  transform: translate(-50%, -50%);
}

.team-copy-bio {
  top: calc(var(--team-bio-top, 293) * var(--unit));
  left: calc(var(--team-bio-left, 161) * var(--unit));
  width: calc(var(--team-bio-width, 385) * var(--unit));
  max-width: none;
  overflow: visible;
  line-height: calc(32 * var(--unit));
  white-space: pre;
}

/* Sarah's biography is one continuous paragraph. Let the browser perform
   the CJK line breaking so punctuation and book-title marks follow the text
   instead of being stranded by manually inserted line breaks. */
.team-copy-bio.is-flowing {
  white-space: pre-wrap;
  line-break: strict;
  overflow-wrap: normal;
}

.team-copy h1 > span,
.team-copy h2 > span {
  opacity: 1;
}

.team-copy h1.is-typing > span,
.team-copy h2.is-typing > span {
  opacity: 0;
  animation: about-typewriter-char 22ms linear var(--team-type-delay) forwards;
}

.team-copy-award.is-revealing,
.team-copy-bio.is-revealing {
  animation: team-copy-gray-reveal 1.5s linear forwards;
}

.team-carousel,
.team-stage {
  position: absolute;
}

.team-carousel {
  z-index: 1;
  left: var(--canvas-offset-x);
  top: var(--canvas-offset-y);
  width: var(--canvas-width);
  height: var(--canvas-height);
}

.team-stage {
  inset: 0;
  overflow: visible;
  perspective: 900px;
  perspective-origin: 50% 50%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  outline: none;
}

.team-stage.is-dragging {
  cursor: grabbing;
}

.team-stage:focus-visible {
  outline: none;
}

.team-card {
  position: absolute;
  z-index: 1;
  left: calc(var(--team-left) * var(--unit));
  top: calc(var(--team-top) * var(--unit));
  width: calc(var(--team-width) * var(--unit));
  height: calc(var(--team-height) * var(--unit));
  pointer-events: none;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: left, top, width, height, opacity, transform, translate, rotate;
}

.team-card.is-priority {
  animation: team-priority-float 12s linear infinite;
}

.team-card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.team-card-body {
  position: absolute;
  z-index: 1;
  left: 4.74%;
  top: 4.73%;
  width: 90.45%;
  height: 90.45%;
  overflow: hidden;
  background: #d9d9d9;
  clip-path: polygon(16.46% 0, 100% 11.26%, 72.47% 100%, 0 91.18%);
}

.team-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.team-page .bottom-nav {
  z-index: 20;
}

/* Product carousel — the six source silhouettes are kept as polygon masks;
   five product pages loop through them with the same vertex interpolation as
   the News carousel. */
.product-page {
  display: grid;
  width: 100vw;
  height: 100vh;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
}

.product-frame {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--paper);
  contain: layout paint;
  isolation: isolate;
}

.product-carousel,
.product-stage {
  position: absolute;
}

.product-carousel {
  left: var(--canvas-offset-x);
  top: calc(var(--canvas-offset-y) - 20 * var(--unit));
  width: var(--canvas-width);
  height: var(--canvas-height);
  overflow: visible;
}

.product-stage {
  inset: 0;
  z-index: 1;
  overflow: visible;
  cursor: grab;
  touch-action: none;
  user-select: none;
  outline: none;
}

.product-stage:focus-visible {
  outline: none;
}

.product-stage.is-dragging {
  cursor: grabbing;
}

.product-stage.is-entering {
  cursor: default;
  pointer-events: none;
}

.product-stage.is-preparing {
  cursor: default;
  pointer-events: none;
}

.product-stage.is-preparing .product-card-surface {
  visibility: hidden;
}

.product-card {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  --product-shadow-x: 0;
  --product-shadow-y: 0;
  --product-shadow-blur: 0;
  --product-shadow-alpha: 0;
  filter: drop-shadow(
    calc(var(--product-shadow-x) * var(--unit))
    calc(var(--product-shadow-y) * var(--unit))
    calc(var(--product-shadow-blur) * var(--unit))
    rgba(0, 0, 0, var(--product-shadow-alpha))
  );
  will-change: clip-path, opacity, filter;
}

.product-card-surface {
  position: absolute;
  inset: 0;
  /* PRODUCT follows the same responsive overflow model as TEAM and NEWS:
     extra viewport width/height reveals more of the source composition. */
  overflow: visible;
  background: #d9d9d9;
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: clip-path, transform;
}

.product-stage.is-entering .product-card-surface {
  /* The flip is driven by the same requestAnimationFrame loop as the
     carousel. Keeping CSS from taking over avoids the final compositor
     handoff jump when the entrance ends. */
  animation: none;
  will-change: transform;
}

.product-stage.is-entering .product-card[data-product-position="-3"] { --product-entry-delay: 520ms; }
.product-stage.is-entering .product-card[data-product-position="-2"] { --product-entry-delay: 160ms; }
.product-stage.is-entering .product-card[data-product-position="-1"] { --product-entry-delay: 0ms; }
.product-stage.is-entering .product-card[data-product-position="0"] { --product-entry-delay: 80ms; }
.product-stage.is-entering .product-card[data-product-position="1"] { --product-entry-delay: 160ms; }
.product-stage.is-entering .product-card[data-product-position="2"] { --product-entry-delay: 240ms; }
.product-stage.is-entering .product-card[data-product-position="3"] { --product-entry-delay: 320ms; }
.product-stage.is-entering .product-card[data-product-position="4"] { --product-entry-delay: 520ms; }

/* -3 and 4 are recycling buffers. They stay ready outside the viewport so
   the loop never exposes a gap, but do not take part in the visible entrance
   flip; animating those hidden buffers is what caused edge flashes. */
.product-stage.is-entering .product-card[data-product-position="-3"] .product-card-surface,
.product-stage.is-entering .product-card[data-product-position="4"] .product-card-surface {
  animation: none;
}

.product-card-image {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity 260ms ease-out;
  will-change: left, top, width, height, opacity;
}

/* The main-project information panel lives in the same 1836x925 coordinate
   system as the source carousel. It sits over the centered card and therefore
   scales with the page instead of drifting when the viewport changes. */
.product-feature-popup {
  position: fixed;
  /* The popup is portaled into the viewport-level navigation frame so the
     product labels and shared bottom navigation cannot paint through it. */
  z-index: 130;
  left: var(--product-feature-left, calc(var(--canvas-offset-x) + 616 * var(--unit)));
  top: var(--product-feature-top, calc(var(--canvas-offset-y) + 201 * var(--unit)));
  width: calc(318 * var(--unit));
  height: calc(489 * var(--unit));
  padding: calc(29 * var(--unit)) calc(34 * var(--unit)) calc(24 * var(--unit));
  overflow: hidden;
  border-radius: 0 calc(31 * var(--unit)) calc(31 * var(--unit)) 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.44), rgba(220, 221, 219, 0.34) 48%, rgba(247, 247, 244, 0.5));
  border: calc(1 * var(--unit)) solid rgba(255, 255, 255, 0.55);
  box-shadow: inset calc(1 * var(--unit)) 0 rgba(255, 255, 255, 0.5), inset 0 calc(1 * var(--unit)) rgba(255, 255, 255, 0.38), 0 calc(14 * var(--unit)) calc(28 * var(--unit)) rgba(60, 60, 60, 0.035);
  -webkit-backdrop-filter: blur(calc(17 * var(--unit))) saturate(1.24);
  backdrop-filter: blur(calc(17 * var(--unit))) saturate(1.24);
  color: var(--ink);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, calc(-12 * var(--unit)), 0);
  transition: left 90ms linear, top 90ms linear, visibility 0s linear 260ms;
  pointer-events: none;
  will-change: opacity, transform;
  isolation: isolate;
}

.product-feature-popup::before {
  position: absolute;
  z-index: 0;
  content: "";
  inset: 0;
  background: linear-gradient(102deg, rgba(255, 255, 255, 0.26), transparent 38%, rgba(255, 255, 255, 0.32));
  opacity: 0.9;
  pointer-events: none;
}

.product-feature-popup::after {
  position: absolute;
  z-index: 0;
  content: "";
  left: calc(-74 * var(--unit));
  top: calc(70 * var(--unit));
  width: calc(420 * var(--unit));
  height: calc(78 * var(--unit));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  filter: blur(calc(18 * var(--unit)));
  transform: rotate(-18deg);
  pointer-events: none;
}

.product-feature-popup.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition: left 90ms linear, top 90ms linear, visibility 0s linear 0s;
}

.product-feature-popup.is-changing {
  animation: product-feature-popup-drop-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.product-feature-popup.is-closing {
  visibility: visible;
  opacity: 0;
  transform: translate3d(0, calc(-8 * var(--unit)), 0);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

.product-feature-popup-title,
.product-feature-popup-description {
  margin: 0;
  font-family: var(--display-font);
  font-weight: 400;
}

.product-feature-popup-title {
  position: absolute;
  z-index: 1;
  top: calc(29 * var(--unit));
  right: calc(34 * var(--unit));
  max-width: calc(100% - 68 * var(--unit));
  font-size: calc(24 * var(--unit));
  line-height: calc(32 * var(--unit));
  text-align: right;
  white-space: nowrap;
}

.product-feature-popup-description {
  position: absolute;
  z-index: 1;
  left: calc(34 * var(--unit));
  right: calc(34 * var(--unit));
  bottom: calc(24 * var(--unit));
  font-size: calc(16 * var(--unit));
  line-height: calc(32 * var(--unit));
  text-align: left;
  text-indent: 2em;
  word-break: break-word;
}

.product-feature-popup[data-feature-item-id="seal-the-heavens"] .product-feature-popup-description {
  left: calc(22 * var(--unit));
  right: calc(22 * var(--unit));
}

@keyframes product-feature-popup-drop-in {
  0% { transform: translate3d(0, calc(-18 * var(--unit)), 0); }
  72% { transform: translate3d(0, calc(2 * var(--unit)), 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.product-progress {
  position: absolute;
  z-index: 8;
  /* Keep the slider in the same viewport-anchored lower band as the small
     category labels. The source x-coordinate is 167, not the canvas edge. */
  top: auto;
  bottom: calc(133 * var(--unit));
  left: calc(var(--canvas-offset-x) + 167 * var(--unit));
  width: calc(397 * var(--unit));
  height: calc(5 * var(--unit));
  pointer-events: none;
}

.product-progress-track {
  position: relative;
  width: 100%;
  height: 100%;
  background: #d7d7d7;
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
}

.product-progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--product-progress-thumb-units, 47.694) * var(--unit));
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--muted);
  pointer-events: auto;
  cursor: ew-resize;
  transform: translate3d(calc(var(--product-progress-left-units, 0) * var(--unit)), 0, 0);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), width 260ms ease;
  will-change: transform, width;
}

.product-progress.is-dragging .product-progress-thumb,
.product-progress.is-looping .product-progress-thumb {
  transition: none;
}

.product-progress:focus-visible {
  outline: calc(1 * var(--unit)) solid var(--muted);
  outline-offset: calc(5 * var(--unit));
}

.product-categories {
  position: absolute;
  z-index: 7;
  left: var(--canvas-offset-x);
  bottom: calc(138 * var(--unit));
  width: var(--canvas-width);
  height: auto;
  pointer-events: none;
  font-family: var(--display-font);
}

.product-category {
  position: absolute;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 0;
  height: calc(20 * var(--unit));
  color: var(--muted);
  font-size: calc(18 * var(--unit));
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: color 220ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.product-category:nth-child(1) { left: calc(1104 * var(--unit)); }
.product-category:nth-child(2) { left: calc(1181 * var(--unit)); }
.product-category:nth-child(3) { left: calc(1254 * var(--unit)); }
.product-category:nth-child(4) { left: calc(1330.5 * var(--unit)); }
.product-category:nth-child(5) { left: calc(1432.5 * var(--unit)); }
.product-category:nth-child(6) { left: calc(1539 * var(--unit)); }
.product-category:nth-child(7) { left: calc(1606 * var(--unit)); }
.product-category:nth-child(8) { left: calc(1679.5 * var(--unit)); }
.product-category:nth-child(9) { left: calc(1753 * var(--unit)); }

.product-category:hover,
.product-category:focus-visible,
.product-category.is-active {
  color: var(--ink);
  transform: translate(-50%, -50%);
  outline: none;
}

/* Keep the category label anchored to its source point while the shared
   click pulse scales it. The old generic pulse replaced the centering
   translate and made the small right-side labels jump on click. */
.product-category.is-clicking {
  animation: product-category-click-pulse 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.product-category.is-active.is-clicking {
  animation-name: product-category-active-click-pulse;
}

.product-category-visual small {
  font-size: calc(15 * var(--unit));
  line-height: 1;
  vertical-align: baseline;
  position: relative;
  top: calc(0.4 * var(--unit));
}

.product-page .bottom-nav {
  z-index: 20;
}

@keyframes page-frame-arrive {
  0% {
    opacity: 0.84;
  }
  100% {
    opacity: 1;
  }
}

@keyframes page-reveal {
  0% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes contact-page-content-reveal {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes contact-orbit-label-entrance {
  0% {
    opacity: 0;
    transform: rotate(var(--orbit-entry-rotate));
  }
  48% {
    opacity: 1;
    transform: rotate(calc(var(--orbit-entry-rotate) * -0.12));
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

@keyframes contact-center-copy-rise {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(calc(24 * var(--unit)));
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes contact-center-line-flip {
  0% {
    opacity: 0;
    transform: perspective(700px) rotateX(-90deg) translateY(calc(-8 * var(--unit)));
  }
  100% {
    opacity: 1;
    transform: perspective(700px) rotateX(0deg) translateY(0);
  }
}

@keyframes contact-center-blinds-in {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(13 * var(--unit)), 0);
  }
  68% {
    opacity: 1;
    transform: translate3d(0, calc(-1.5 * var(--unit)), 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes contact-orbit-float-one {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  32% { transform: translate3d(calc(4 * var(--unit)), calc(-5 * var(--unit)), 0) rotate(-0.45deg); }
  68% { transform: translate3d(calc(-3 * var(--unit)), calc(3 * var(--unit)), 0) rotate(0.34deg); }
}

@keyframes contact-orbit-float-two {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  28% { transform: translate3d(calc(-5 * var(--unit)), calc(3 * var(--unit)), 0) rotate(0.38deg); }
  73% { transform: translate3d(calc(3 * var(--unit)), calc(-4 * var(--unit)), 0) rotate(-0.3deg); }
}

@keyframes contact-orbit-float-three {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  36% { transform: translate3d(calc(3 * var(--unit)), calc(4 * var(--unit)), 0) rotate(0.28deg); }
  71% { transform: translate3d(calc(-4 * var(--unit)), calc(-3 * var(--unit)), 0) rotate(-0.36deg); }
}

@keyframes contact-orbit-float-four {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  30% { transform: translate3d(calc(-4 * var(--unit)), calc(-4 * var(--unit)), 0) rotate(-0.3deg); }
  69% { transform: translate3d(calc(5 * var(--unit)), calc(3 * var(--unit)), 0) rotate(0.42deg); }
}

@keyframes contact-orbit-float-five {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  34% { transform: translate3d(calc(4 * var(--unit)), calc(3 * var(--unit)), 0) rotate(0.35deg); }
  76% { transform: translate3d(calc(-3 * var(--unit)), calc(-5 * var(--unit)), 0) rotate(-0.4deg); }
}

@keyframes contact-orbit-float-six {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  27% { transform: translate3d(calc(-3 * var(--unit)), calc(-5 * var(--unit)), 0) rotate(-0.42deg); }
  65% { transform: translate3d(calc(5 * var(--unit)), calc(3 * var(--unit)), 0) rotate(0.32deg); }
}

@keyframes news-card-lift-in {
  0% { translate: 0 calc(18 * var(--unit)); }
  100% { translate: 0 0; }
}

@keyframes news-card-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes news-card-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  12.5% { translate: calc(9 * var(--unit)) calc(4 * var(--unit)); rotate: 0.13deg; }
  25% { translate: calc(20 * var(--unit)) calc(8 * var(--unit)); rotate: 0.3deg; }
  37.5% { translate: calc(31 * var(--unit)) calc(2 * var(--unit)); rotate: 0.46deg; }
  50% { translate: calc(36 * var(--unit)) calc(-12 * var(--unit)); rotate: 0.5deg; }
  62.5% { translate: calc(22 * var(--unit)) calc(-5 * var(--unit)); rotate: 0.26deg; }
  75% { translate: calc(9 * var(--unit)) calc(14 * var(--unit)); rotate: -0.25deg; }
  87.5% { translate: calc(2 * var(--unit)) calc(6 * var(--unit)); rotate: -0.12deg; }
}

@keyframes about-typewriter-char {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes about-copy-intro-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes about-copy-below-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes team-copy-gray-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes team-priority-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  12.5% { translate: calc(9 * var(--unit)) calc(4 * var(--unit)); rotate: 0.13deg; }
  25% { translate: calc(20 * var(--unit)) calc(8 * var(--unit)); rotate: 0.3deg; }
  37.5% { translate: calc(31 * var(--unit)) calc(2 * var(--unit)); rotate: 0.46deg; }
  50% { translate: calc(36 * var(--unit)) calc(-12 * var(--unit)); rotate: 0.5deg; }
  62.5% { translate: calc(22 * var(--unit)) calc(-5 * var(--unit)); rotate: 0.26deg; }
  75% { translate: calc(9 * var(--unit)) calc(14 * var(--unit)); rotate: -0.25deg; }
  87.5% { translate: calc(2 * var(--unit)) calc(6 * var(--unit)); rotate: -0.12deg; }
}

@keyframes nav-float-one {
  0%, 100% { translate: 0 0; }
  42% { translate: calc(-2 * var(--unit)) calc(-4 * var(--unit)); }
  73% { translate: calc(1.3 * var(--unit)) calc(2 * var(--unit)); }
}

@keyframes nav-float-two {
  0%, 100% { translate: 0 0; }
  36% { translate: calc(2 * var(--unit)) calc(2.6 * var(--unit)); }
  71% { translate: calc(-1.3 * var(--unit)) calc(-3.2 * var(--unit)); }
}

@keyframes nav-float-three {
  0%, 100% { translate: 0 0; }
  48% { translate: calc(-1.3 * var(--unit)) calc(-2.6 * var(--unit)); }
  78% { translate: calc(2 * var(--unit)) calc(3.2 * var(--unit)); }
}

@keyframes nav-float-four {
  0%, 100% { translate: 0 0; }
  31% { translate: calc(1.3 * var(--unit)) calc(-3.2 * var(--unit)); }
  67% { translate: calc(-2 * var(--unit)) calc(2.6 * var(--unit)); }
}

@keyframes nav-float-five {
  0%, 100% { translate: 0 0; }
  39% { translate: calc(-1.3 * var(--unit)) calc(3.2 * var(--unit)); }
  76% { translate: calc(2 * var(--unit)) calc(-2.6 * var(--unit)); }
}

@keyframes nav-component-float {
  0%, 100% { translate: 0 0; }
  34% { translate: calc(-2 * var(--unit)) calc(-3 * var(--unit)); }
  69% { translate: calc(2 * var(--unit)) calc(3 * var(--unit)); }
}

@keyframes nav-click-pulse {
  0% { scale: 1; }
  42% { scale: 0.91; }
  100% { scale: 1; }
}

@keyframes click-pulse {
  0% { transform: scale(1); }
  42% { transform: scale(0.91); }
  100% { transform: scale(1); }
}

@keyframes product-card-flip-in {
  0% {
    transform: perspective(1500px) rotateY(-72deg) rotateX(1.1deg);
  }
  58% {
    transform: perspective(1500px) rotateY(-12deg) rotateX(0.2deg);
  }
  100% {
    /* Match the resting style exactly.  Leaving perspective() in the last
       frame creates a tiny matrix/Z difference when the entrance class is
       removed, which reads as a one-frame jump. */
    transform: none;
  }
}

@keyframes product-category-click-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  42% {
    transform: translate(-50%, -50%) scale(0.91);
  }
}

@keyframes product-category-active-click-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  42% {
    transform: translate(-50%, -50%) scale(0.91);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-enter { animation: none; opacity: 0; visibility: hidden; }
  .about-visual,
  .about-visual img,
  .about-small-image img,
  .news-card-surface,
  .product-card-surface,
  .team-card,
  .news-copy,
  .nav-item,
  .nav-pointer { transition: none; }
  .about-visual,
  .about-visual.is-entering,
  .about-visual.is-floating,
  .about-visual img,
  .about-small-image img { animation: none; }
  .about-visual { opacity: 1; transform: none; }
  .contact-content,
  .contact-content.is-entering,
  .contact-content.is-visible { animation: none; opacity: 1; }
  .contact-orbit-ring,
  .contact-orbit-ring.is-entering,
  .contact-orbit-ring.is-entering .contact-orbit,
  .contact-orbit-ring.is-entering .contact-orbit > .contact-orbit-entry,
  .contact-orbit-ring.is-entering .contact-orbit .contact-orbit-float,
  .contact-details.is-entering,
  .contact-center-line.is-entering,
  .contact-details.is-entering .contact-copy-rise,
  .contact-details.is-entering .contact-blind-slice { animation: none; opacity: 1; transform: none; clip-path: none; }
  .product-stage.is-entering .product-card-surface,
  .product-category.is-clicking { animation: none; opacity: 1; transform: none; }
  .product-feature-popup,
  .product-feature-popup.is-changing,
  .product-feature-popup.is-closing { animation: none; transition: none; }
  .product-feature-popup.is-visible { opacity: 1; visibility: visible; transform: none; }
  .about-copy { transform: translateY(-50%); }
  .about-copy-en.is-typewriting > span,
  .about-copy-long,
  .about-copy-cn-intro,
  .about-copy-cn-intro.is-revealing,
  .about-copy-long.is-revealing { animation: none; opacity: 1; clip-path: none; }
  .about-small-image { transform: none; }
  .global-navigation-frame .global-bottom-nav { animation: none; }
  .global-navigation-frame .nav-item,
  .global-navigation-frame .nav-pointer { animation: none; }
  .news-copy-preparing { visibility: visible; }
  .news-copy-title.is-typing > span,
  .news-copy-date.is-typing > span,
  .news-copy-description.is-revealing { animation: none; opacity: 1; clip-path: none; }
  .news-card.is-entering,
  .news-card.is-entering .news-card-surface { animation: none; }
  .news-card.is-floating { animation: none; }
}