@import url('./fonts.css');

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: transparent;
  color: #444;
  font-family: var(--font-ui);
  overflow: hidden;
  scrollbar-width: none;
}
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
.layers-component { position: relative; width: 100%; min-width: 0; }
.viewport { position: relative; overflow: hidden; contain: paint; }
.canvas-shell { position: relative; width: 100%; aspect-ratio: var(--layers-camera-ratio, 2600 / 2150); }
.layers-component svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.layers-component svg path,
.layers-component svg polygon { stroke-linejoin: round; stroke-linecap: round; }
.rail { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rail button {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(var(--label-dx, 0px), var(--label-dy, 0px), 0) translate(14px, -50%);
  will-change: transform;
  border: 0;
  padding: 8px 0;
  background: transparent;
  color: #666;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  touch-action: pan-x pan-y;
  user-select: none;
  transition: color .16s ease;
}
.rail button[data-active='true'] { color: #292d29; }
.rail button[data-highlighted='true'] .layer-title { color: #1f1f1f; }
.rail button:focus-visible { outline: 2px solid #777; outline-offset: 4px; }
.layers-component:not([data-ready='true']) .rail button {
  left: var(--label-x);
  top: var(--label-y);
  transform: translate(14px, -50%);
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 481px) and (max-width: 600px) {
  .rail button { font-size: 14px; transform: translate3d(var(--label-dx, 0px), var(--label-dy, 0px), 0) translate(10px, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .rail button { transition: none; }
}

/* Captions fade below each title after the platform begins opening. */
.rail .layer-title{display:block}
.rail .layer-description{
  position:absolute;
  left:0;
  top:calc(100% - 2px);
  display:block;
  width:var(--description-width, calc(31.5vw - 18px));
  color:#777;
  /* 四层注释统一字号，按可用宽度自然换行。 */
  font-size:12px;
  font-weight:400;
  line-height:1.65;
  white-space:normal;
  overflow:visible;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.layer-description-copy{display:block;min-height:0;overflow-wrap:break-word}
/* 合并原先写死的两行，让较长的注释自然排成三行或更多行。 */
.layer-description-line{display:inline;white-space:normal}
.layers-component:not([data-stacking='true']) .rail button[data-active='true'] .layer-description{
  opacity:1;
  pointer-events:auto;
}
@media(prefers-reduced-motion:reduce){.rail .layer-description{transition:none}}

/* Hover activates one scene; expanding all layers runs their details together. */
.motion-walk { animation: capture-walk 6s ease-in-out infinite; }
.motion-leg { transform-box: fill-box; transform-origin: 50% 0%; animation: capture-stride 1.5s ease-in-out infinite; }
.motion-capture-arm { transform-box: fill-box; transform-origin: 50% 0%; animation: capture-action 3.8s ease-in-out infinite; }
.motion-rigid { animation: physics-rigid 4.8s ease-in-out infinite; }
.motion-cloth { transform-box: fill-box; transform-origin: 50% 80%; animation: physics-cloth 5.5s ease-in-out infinite; }
.motion-particle { animation: physics-particle 3.2s linear infinite; }
.motion-robot-arm { transform-box: fill-box; transform-origin: 20% 75%; animation: robot-work 5.8s ease-in-out infinite; }
.motion-scanner { animation: evaluation-scan 5s ease-in-out infinite; }
.motion-trial { animation: evaluation-trial 6s ease-in-out infinite; }
.motion-result { stroke-dasharray: 60; animation: evaluation-result 5s ease-in-out infinite; }
.motion-data-flow { animation: feedback-flow 6s linear infinite; }
.motion-service-robot { animation: service-travel 7s ease-in-out infinite; }
.hero-arm-tip { animation: hero-arm-work 6s ease-in-out infinite; }
.hero-logistics-parcel { animation: hero-logistics-feed 10.8s linear infinite; }
.layers-component .scene-motion { animation-play-state: paused; }
.layers-component [data-layer][data-motion='true'] .scene-motion { animation-play-state: running; }
.layers-component[data-scene-paused='true'] [data-layer] .scene-motion { animation-play-state: paused; }
@keyframes capture-walk {
  0%, 100% { transform: translate(-12px, -6px); }
  50% { transform: translate(12px, 6px); }
}
@keyframes capture-stride {
  0%, 100% { transform: rotate(calc(-5deg * var(--leg-direction))); }
  50% { transform: rotate(calc(5deg * var(--leg-direction))); }
}
@keyframes capture-action {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(10deg); }
}
@keyframes physics-rigid {
  0%, 70%, 100% { transform: translate(0, 0); }
  30% { transform: translate(0, -18px); }
  48% { transform: translate(0, 1px); }
}
@keyframes physics-cloth {
  0%, 100% { transform: skewX(-6deg) translateY(0); }
  50% { transform: skewX(6deg) translateY(-5px); }
}
@keyframes physics-particle {
  0% { transform: translateY(-26px); opacity: 0; }
  18% { opacity: 1; }
  75% { transform: translateY(5px); opacity: 1; }
  100% { transform: translateY(5px); opacity: 0; }
}
@keyframes robot-work {
  0%, 100% { transform: rotate(0); }
  45%, 60% { transform: rotate(-10deg); }
}
@keyframes hero-arm-work {
  0%, 100% { transform: rotate(0); }
  40%, 60% { transform: rotate(-9deg); }
}
@keyframes hero-logistics-feed {
  0% { transform: translate(0, 0); opacity: 0; }
  7%, 91% { opacity: 1; }
  100% { transform: translate(169px, 97.5px); opacity: 0; }
}
@keyframes evaluation-scan {
  0%, 100% { transform: translate(-14px, -7px); }
  50% { transform: translate(14px, 7px); }
}
@keyframes evaluation-trial {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(28px, 14px); }
  50% { transform: translate(14px, 22px); }
  75% { transform: translate(-14px, 8px); }
}
@keyframes evaluation-result {
  0%, 100% { stroke-dashoffset: 36; }
  55% { stroke-dashoffset: 0; }
}
@keyframes feedback-flow { to { stroke-dashoffset: -52; } }
@keyframes service-travel {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(7px, 3.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .layers-component .scene-motion { animation: none; }
}

/* Staggered pick-and-place motion makes the evaluation trials readable. */
.evaluation-arm .hero-arm-tip {
  animation-name: evaluation-arm-task;
  animation-duration: 3.6s;
  animation-delay: var(--task-delay, 0s);
  transform-box: view-box;
}
@keyframes evaluation-arm-task {
  0%, 100% { transform: rotate(0); }
  25%, 38% { transform: rotate(-34deg); }
  62%, 75% { transform: rotate(24deg); }
}

/* All four isometric scenes, including people and medical signs, are achromatic. */
.layers-component svg { filter: none; }

.brand-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.brand-open {
  position: absolute;
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.brand-open:focus-visible { outline: 3px solid #4123f5; outline-offset: 8px; }
.brand-particles[hidden], .brand-open[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .layers-component:not([data-ready='true']) svg,
  .layers-component:not([data-ready='true']) .rail { visibility: hidden; }
  .layers-component:not([data-ready='true']) .canvas-shell::before,
  .layers-component[data-brand-phase='preparing']:not([data-brand-ready='true']) .canvas-shell::before {
    content: ''; position: absolute; z-index: 1; pointer-events: none;
    left: var(--brand-mark-left, 23.889%); top: var(--brand-mark-top, 25.609%);
    width: var(--brand-mark-width, 36.837%); height: var(--brand-mark-height, 46.177%);
    background: url('../images/brand/guanglun-symbol.svg') center / 100% 100% no-repeat;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-layers-compact='true'] .layers-component:not([data-ready='true']) .canvas-shell { width: min(100%, 680px, var(--layers-fit-width, 680px)); aspect-ratio: 1700 / 1800; margin-inline: auto; }
  html[data-layers-compact='true'] .layers-component:not([data-ready='true']) .canvas-shell::before,
  html[data-layers-compact='true'] .layers-component[data-brand-phase='preparing']:not([data-brand-ready='true']) .canvas-shell::before {
    left: var(--brand-mark-left, 2.518%); top: var(--brand-mark-top, 17.918%);
    width: var(--brand-mark-width, 60.847%); height: var(--brand-mark-height, 59.582%);
  }
}
.layers-component[data-brand-phase='unfold'] [data-layer] { opacity: var(--brand-layer-alpha, 0) !important; translate: 0 var(--brand-layer-drop, 0px); }
.rail button[data-highlighted='true'] .layer-title { color: #4123f5; }
.rail .layer-description { color: #525b70; }
.rail button:focus-visible { outline-color: #4123f5; }

/* Invisible target padding extends to the right without moving visible labels. */
.rail button::after {
  content: ''; position: absolute;
  left: -14px; right: -80px; top: -12px; bottom: -12px;
  pointer-events: auto;
}

.layer-product-name { font-family: Sora, sans-serif; font-weight: inherit; color: #262626; white-space: nowrap; }

/* Keep mobile labels attached to the artwork; expansion reveals every caption. */
.layers-component[data-compact='true'] .canvas-shell {
  width: min(100%, 680px, var(--layers-fit-width, 680px));
  aspect-ratio: 1700 / var(--compact-camera-height, 2200);
  margin-inline: auto;
}
.layers-component[data-compact='true'] .rail button {
  padding: 5px 0;
  font-size: 12px;
  text-align: left;
  transform: translate3d(var(--label-dx, 0px), var(--label-dy, 0px), 0) translate(10px, -50%);
}
.layers-component[data-compact='true'] .rail button::after {
  left: -8px;
  right: -20px;
  top: -4px;
  bottom: -4px;
}
.layers-component[data-compact='true'] .rail .layer-description {
  font-size: 10px;
  line-height: 1.45;
  transition: none;
  pointer-events: none;
}
.layers-component[data-compact='true'] .rail button .layer-description { visibility: hidden; opacity: 0; }
.layers-component[data-compact='true'][data-mode='hover']:not([data-stacking='true']) .rail button[data-compact-current='true'] .layer-description {
  visibility: visible;
  opacity: 1;
}
.layers-component[data-compact='true'][data-mode='all']:not([data-stacking='true']) .rail button .layer-description {
  visibility: visible;
  opacity: 1;
}
/* Hide captions at the start of collapse, before the platforms move together. */
.layers-component[data-mode='closed'] .rail .layer-description {
  visibility: hidden;
  opacity: 0;
  transition: none;
  pointer-events: none;
}