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

:root {
  --ink: #8a382d;
  --paper: #fbfaf7;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #191919;
}

body {
  font-family: "Huiwen-mincho", serif;
  color: var(--ink);
  overflow: hidden;
}

.site {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 12px;
}

.stage-shell {
  position: relative;
  width: min(1728px, calc(100vw - 24px));
  aspect-ratio: 1728 / 1117;
  overflow: hidden;
}

.stage {
  position: absolute;
  width: 1728px;
  height: 1117px;
  left: 0;
  top: 0;
  transform-origin: top left;
  background: var(--paper);
  overflow: hidden;
  isolation: isolate;
}

.home-map {
  position: absolute;
  z-index: 0;
  left: 0;
  top: -242px;
  width: 1729px;
  height: 2560px;
  object-fit: fill;
}

.home-nav {
  position: absolute;
  z-index: 10;
  left: 774px;
  top: 33px;
  width: 904px;
  height: 89px;
  display: flex;
  gap: 32px;
  white-space: nowrap;
  font-size: 36px;
  line-height: 1;
  animation: navIn 0.9s 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 首页“长沙”主标题：缩小并向左收，确保完整落在 1728px 画布内。 */
.hero-title {
  position: absolute;
  z-index: 9;
  left: 1120px;
  top: 168px;
  width: 588px;
  max-width: 588px;
  overflow: visible;
}

.hero-cn {
  display: block;
  width: max-content;
  max-width: 100%;
  font-size: 200px;
  line-height: 250px;
  height: 250px;
  white-space: nowrap;
  letter-spacing: -0.03em;
  animation: heroCN 1.2s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-en {
  display: block;
  margin-left: 44px;
  width: max-content;
  font-size: 96px;
  line-height: 210px;
  height: 210px;
  white-space: nowrap;
  opacity: 0.5;
  letter-spacing: -0.02em;
  animation: heroEN 1.15s 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-sub {
  display: block;
  margin-left: -1079px;
  width: 714px;
  font-size: 64px;
  line-height: 1;
  white-space: nowrap;
  animation: heroSub 1s 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-footer {
  position: absolute;
  z-index: 8;
  left: 17px;
  top: 1038px;
  width: 1728px;
  height: 79px;
  font-size: 64px;
  line-height: 1;
  color: rgba(138, 56, 45, 0.5);
  animation: footerIn 0.9s 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-hitmap {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 1728px;
  height: 1117px;
  pointer-events: none;
}

.home-hitmap a {
  pointer-events: none;
}

.home-hitmap .hit-path {
  pointer-events: stroke;
  cursor: pointer;
}

.hit-path {
  fill: none;
  stroke: transparent;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.hit-box {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
  cursor: pointer;
}

.line-stage {
  background: var(--paper);
}

.line-map {
  position: absolute;
  z-index: 0;
  object-fit: fill;
  pointer-events: none;
}

.line1-map {
  left: 0;
  top: 0;
  width: 1742.534px;
  height: 1126.399px;
  opacity: 0.6;
}

.main-map {
  opacity: 0.3;
}

.line-vector {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 1728px;
  height: 1117px;
  pointer-events: none;
  overflow: visible;
}

.main-route {
  fill: none;
  stroke: #a91f24;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-nav {
  position: absolute;
  z-index: 8;
  left: 748px;
  top: 49px;
  width: 1016px;
  height: 72px;
  object-fit: fill;
  animation: navIn 0.9s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.nav-home-hit {
  position: absolute;
  z-index: 12;
  left: 748px;
  top: 49px;
  width: 80px;
  height: 72px;
  cursor: pointer;
}

.line1-assets {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.line1-assets.show {
  display: block;
}

.line1-stations {
  position: absolute;
  left: 1239px;
  top: 305px;
  width: 320px;
  height: 275px;
  object-fit: fill;
  animation: rasterIn 1s 0.65s both;
}

.line1-overlay {
  position: absolute;
  left: 206px;
  top: 33px;
  width: 1537px;
  height: 1093px;
  object-fit: fill;
  animation: rasterIn 1.2s 0.75s both;
}

.route-text-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.route-label {
  position: absolute;
  font-family: "Huiwen-mincho", serif;
  font-weight: 400;
  line-height: 1;
  white-space: normal;
  word-break: normal;
  overflow: visible;
  animation: routeTextIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.small-label {
  line-height: 1.1;
}

.line-footer {
  position: absolute;
  z-index: 7;
  left: 206px;
  top: 1041px;
  width: 1522px;
  height: 111px;
  font-size: 55px;
  line-height: 1;
  color: rgba(138, 56, 45, 0.5);
  animation: footerIn 0.9s 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes navIn {
  from {
    opacity: 0;
    transform: translateY(-22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroCN {
  from {
    opacity: 0;
    transform: translateY(65px) scale(0.92);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes heroEN {
  from {
    opacity: 0;
    transform: translateY(45px) translateX(35px);
    filter: blur(6px);
  }

  to {
    opacity: 0.5;
    transform: none;
    filter: none;
  }
}

@keyframes heroSub {
  from {
    opacity: 0;
    transform: translateY(35px);
    filter: blur(5px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes routeTextIn {
  from {
    opacity: 0;
    transform: translateY(24px);
    clip-path: inset(0 0 100% 0);
  }

  to {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes rasterIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes footerIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
  }
}