:root {
  color-scheme: dark;
  --ink: #07181b;
  --paper: #f2eee3;
  --muted: #c7c5bc;
  --gold: #d4ab63;
  --gold-strong: #e0bd79;
  --focus: #f1cf8d;
  --radius: 4px;
  --contact-x: 50%;
  --contact-y: 50%;
  --actor-contact-shift: 0vw;
  --actor-contact-drop: 16vh;
  --actor-entry: 72vw;
  --robot-align-shift: -2.6vw;
  --robot-align-drop: 4.8vh;
  --robot-scale: 0.78;
  --logo-shift: 0vw;
  --workspace-transition-x: 46%;
  --workspace-transition-y: 64%;
  --preview-duration: 2200ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
}

* { box-sizing: border-box; }

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

body {
  min-width: 320px;
  overflow: hidden;
  color: var(--paper);
  font-family: "Microsoft YaHei UI", "Noto Sans SC", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }

button { white-space: nowrap; }

button:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 30;
  padding: 0.7rem 1rem;
  color: var(--ink);
  background: var(--paper);
  transform: translateY(-120%);
  transition: transform 160ms ease-out;
}

.skip-link:focus { transform: translateY(0); }

.experience,
.opening {
  position: relative;
  min-height: 100dvh;
}

.opening {
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
}

.scene,
.scene-layer,
.actor,
.scene-shade {
  position: absolute;
  inset: 0;
}

.scene-layer {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.scene-background {
  background-image: url("assets/huangguoshu-oil-background-v1.webp");
  z-index: 0;
}

.actor {
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.actor-robot {
  transform: translate3d(calc(-1 * var(--actor-entry) + var(--actor-contact-shift) + var(--robot-align-shift)), calc(3vh + var(--actor-contact-drop) + var(--robot-align-drop)), 0) rotate(-2deg) scale(var(--robot-scale));
  transform-origin: 12% 72%;
}

.actor-justice {
  transform: translate3d(calc(var(--actor-entry) + var(--actor-contact-shift)), var(--actor-contact-drop), 0) rotate(1.5deg);
  transform-origin: 92% 64%;
}

.scene-shade {
  z-index: 2;
  background: rgb(4 15 17 / 0.2);
  pointer-events: none;
}

.water-mist {
  display: none;
}

.touch-flash {
  position: absolute;
  z-index: 5;
  left: var(--contact-x);
  top: var(--contact-y);
  width: clamp(4rem, 8vw, 9rem);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
  pointer-events: none;
}

.touch-flash::before,
.touch-flash span {
  content: "";
  position: absolute;
  inset: 25%;
  border: 1px solid rgb(224 189 121 / 0.7);
  border-radius: 50%;
}

.touch-flash span {
  inset: 42%;
  border: 0;
  background: var(--gold-strong);
}

.symbol-stage {
  position: absolute;
  z-index: 7;
  left: var(--contact-x);
  top: var(--contact-y);
  width: clamp(7rem, 12vw, 10.5rem);
  aspect-ratio: 1;
  transform: translate(-50%, -14%);
  pointer-events: none;
}

.justice-symbol {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--gold-strong);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 8px rgb(7 24 27 / 0.58));
}

.logo-visual {
  opacity: 0;
  stroke-width: 5;
  transform-box: fill-box;
  transform-origin: center;
}

.logo-main,
.logo-bar {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}

.encounter-message {
  position: absolute;
  left: 50%;
  top: 0.35rem;
  width: max-content;
  max-width: min(70vw, 24rem);
  margin: 0;
  color: var(--gold-strong);
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-size: clamp(0.82rem, 1.08vw, 0.96rem);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(-50%, 0.45rem, 0);
  transform-origin: center;
  text-shadow: 0 2px 16px rgb(4 15 17 / 0.82);
  pointer-events: none;
}

.brand-lockup {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 56%;
  width: min(90vw, 42rem);
  text-align: center;
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  pointer-events: auto;
}

.brand-copy {
  position: relative;
  top: -18vh;
  pointer-events: none;
}

.brand-role,
.brand-lockup h1,
.brand-promise {
  opacity: 0;
  transform: translate3d(0, 0.55rem, 0);
  transition: opacity 220ms var(--ease-in), transform 220ms var(--ease-in);
}

body.intro-previewing .brand-role,
body.intro-previewing .brand-lockup h1,
body.intro-previewing .brand-promise {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 420ms var(--ease-out) 1850ms, transform 420ms var(--ease-out) 1850ms;
}

body.intro-frozen .brand-role,
body.intro-frozen .brand-lockup h1,
body.intro-frozen .brand-promise {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: none;
}

.brand-role {
  margin: 0 0 0.65rem;
  color: var(--gold-strong);
  font-size: clamp(0.78rem, 1.1vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.16em;
}

.brand-lockup h1 {
  margin: 0;
  color: var(--paper);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.08;
  text-shadow: 0 4px 28px rgb(4 15 17 / 0.74);
}

.brand-promise {
  margin: 0.9rem auto 1.6rem;
  color: var(--paper);
  font-size: clamp(0.98rem, 1.6vw, 1.18rem);
  line-height: 1.6;
  text-shadow: 0 2px 16px rgb(4 15 17 / 0.82);
}

.primary-button {
  min-height: 3.1rem;
  padding: 0.75rem 1.55rem;
  border: 1px solid var(--gold-strong);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--gold-strong);
  box-shadow: 0 12px 32px rgb(4 15 17 / 0.34);
  cursor: pointer;
  font-weight: 700;
  transition: background-color 160ms ease-out, transform 160ms ease-out, box-shadow 160ms ease-out;
}

.primary-button:hover {
  background: #edcf96;
  box-shadow: 0 14px 36px rgb(4 15 17 / 0.48);
}

.primary-button:active { transform: translateY(1px); }

.primary-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

body.intro-motion-active .symbol-stage,
body.intro-motion-active .touch-flash,
body.intro-motion-active .logo-visual,
body.intro-motion-active .encounter-message {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.workspace-transition {
  position: fixed;
  z-index: 40;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.workspace-transition__pulse,
.workspace-transition__disc {
  position: absolute;
  left: var(--workspace-transition-x);
  top: var(--workspace-transition-y);
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0) scale(0.001);
  will-change: transform, opacity;
}

.workspace-transition__pulse {
  z-index: 2;
  width: clamp(4.5rem, 8vw, 7rem);
  aspect-ratio: 1;
  border: 1px solid rgb(224 189 121 / 0.9);
  box-shadow: 0 0 0 1px rgb(224 189 121 / 0.16), 0 0 42px rgb(224 189 121 / 0.62);
  opacity: 0;
}

.workspace-transition__disc {
  z-index: 1;
  width: 170vmax;
  aspect-ratio: 1;
  background: radial-gradient(circle at center, #18373a 0%, #0b2326 22%, #07181b 54%, #041012 100%);
}

.workspace-transition__seal {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  color: var(--gold-strong);
  opacity: 0;
  transform: translate3d(-50%, -42%, 0) scale(0.9);
  will-change: transform, opacity;
}

.workspace-transition__seal svg {
  width: 3.5rem;
  height: 3.5rem;
}

.workspace-transition__seal span {
  color: var(--paper);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

body.workspace-leaving .workspace-transition { visibility: visible; }

body.workspace-leaving .workspace-transition__pulse {
  animation: workspace-pulse 300ms var(--ease-out) both;
}

body.workspace-leaving .workspace-transition__disc {
  animation: workspace-cover 500ms var(--ease-in) 120ms both;
}

body.workspace-leaving .workspace-transition__seal {
  animation: workspace-seal-in 260ms var(--ease-out) 350ms both;
}

body.workspace-leaving .brand-copy,
body.workspace-leaving .primary-button {
  opacity: 0;
  transition: opacity 180ms var(--ease-in);
}

body.workspace-leaving .scene {
  transform: scale(1.012);
  transition: transform 620ms var(--ease-out);
}

@keyframes workspace-pulse {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.18); }
  45% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(0.78); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.5); }
}

@keyframes workspace-cover {
  0% { transform: translate3d(-50%, -50%, 0) scale(0.001); }
  100% { transform: translate3d(-50%, -50%, 0) scale(1); }
}

@keyframes workspace-seal-in {
  0% { opacity: 0; transform: translate3d(-50%, -38%, 0) scale(0.88); }
  100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
}

@media (max-width: 767px) {
  :root {
    --contact-x: 50%;
    --actor-contact-shift: 0vw;
    --actor-contact-drop: 8vh;
    --actor-entry: 120vw;
    --robot-align-shift: -7vw;
    --robot-align-drop: -0.4vh;
    --logo-shift: 0vw;
    --workspace-transition-x: 41%;
    --workspace-transition-y: 57%;
  }

  .scene-layer { background-position: 48% center; }

  .actor {
    left: -45%;
    width: 190%;
    object-fit: contain;
    object-position: center;
  }

  .brand-lockup {
    top: 62%;
    width: calc(100% - 2rem);
  }

  .brand-copy { top: 0; }

  .symbol-stage { width: 7.5rem; }

  .brand-lockup h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .brand-promise { max-width: 18rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .water-mist { transform: none; }
}

body.motion-reduced *,
body.motion-reduced *::before,
body.motion-reduced *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

body.motion-reduced .water-mist { transform: none; }

@media (forced-colors: active) {
  .scene { display: none; }
  .opening { background: Canvas; }
  .brand-lockup { color: CanvasText; }
}