/* Helsincy Mod Manager 官网 — 首屏与应用窗口模型 */

/* ================= 首屏氛围层 ================= */

.hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(8rem, 14vh, 11rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}

/* 极光：三团径向色雾缓慢漂移 */
.hero__aurora {
  position: absolute;
  z-index: -3;
  inset: -30% -10% auto;
  height: 150%;
  background:
    radial-gradient(46% 40% at 18% 22%, rgb(36 193 240 / 26%) 0%, transparent 62%),
    radial-gradient(38% 46% at 78% 12%, rgb(108 140 255 / 22%) 0%, transparent 66%),
    radial-gradient(52% 38% at 52% 58%, rgb(79 224 176 / 10%) 0%, transparent 70%);
  filter: blur(28px);
  animation: drift 26s var(--ease-in-out) infinite alternate;
  pointer-events: none;
}

@keyframes drift {
  0% {
    translate: -3% 0;
    scale: 1;
  }

  100% {
    translate: 4% 3%;
    scale: 1.09;
  }
}

/* 冰层网格：越往下越淡 */
.hero__grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(var(--line-hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-hair) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(78% 62% at 50% 30%, #000 0%, transparent 100%);
  pointer-events: none;
}

/* 底部融入下一区块 */
.hero__fade {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 240px;
  background: linear-gradient(180deg, transparent, var(--ink-950) 82%);
  pointer-events: none;
}

/* ================= 首屏内容 ================= */

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4em 0.5em 0.4em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--glass);
  color: var(--frost-300);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  backdrop-filter: blur(10px);
}

.hero__badge b {
  padding: 0.15em 0.7em;
  border-radius: var(--r-pill);
  background: var(--ice-a14);
  color: var(--ice-300);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.hero h1 {
  max-width: 16ch;
  font-family: var(--font-display-cn);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.lang-en .hero h1 {
  max-width: 14ch;
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  line-height: 0.96;
}

/* 标题里的高亮词：渐变字 + 底部冰刃 */
.hero h1 .glint {
  position: relative;
  background: linear-gradient(96deg, var(--ice-300) 0%, var(--frost-050) 40%, var(--glacier) 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/*
 * 冰刃下划线。中文标题的字形底部远高于行盒底部（line-height 1.06 仍有大量下沉空间），
 * 所以 bottom 必须取正值把线拉回字脚，否则会掉到下方段落头上，看起来像一条游离的分割线。
 */
.hero h1 .glint::after {
  position: absolute;
  right: 4%;
  bottom: 0.08em;
  left: 4%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ice-400), transparent);
  opacity: 0.55;
  content: "";
}

/* 拉丁字体的字脚更贴近行盒底部，用负值让线落在基线下方 */
.lang-en .hero h1 .glint::after {
  bottom: -0.06em;
}

.hero__lead {
  max-width: 56ch;
  font-size: var(--fs-lead);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 0.6rem;
}

.hero__meta {
  color: var(--frost-700);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

/* 三枚指标条 */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 4rem);
  justify-content: center;
  margin-top: 1.4rem;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: center;
}

.stat__num {
  color: var(--frost-050);
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 0.9rem + 1.7vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.stat__num em {
  color: var(--ice-400);
  font-size: 0.52em;
  font-style: normal;
  letter-spacing: 0.02em;
}

.stat__label {
  color: var(--frost-600);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
}

/* 首屏元素依次入场 */
.hero__inner > * {
  animation: rise 900ms var(--ease-out) backwards;
}

.hero__inner > :nth-child(1) {
  animation-delay: 80ms;
}

.hero__inner > :nth-child(2) {
  animation-delay: 180ms;
}

.hero__inner > :nth-child(3) {
  animation-delay: 280ms;
}

.hero__inner > :nth-child(4) {
  animation-delay: 380ms;
}

.hero__inner > :nth-child(5) {
  animation-delay: 460ms;
}

.hero__inner > :nth-child(6) {
  animation-delay: 540ms;
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 30px;
  }
}

/* ================= 应用窗口模型 ================= */

.stage {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  perspective: 2000px;
}

/* 窗口下方的冰蓝光池 */
.stage::before {
  position: absolute;
  right: 8%;
  bottom: -6%;
  left: 8%;
  height: 180px;
  background: radial-gradient(50% 50% at 50% 50%, rgb(36 193 240 / 26%), transparent 72%);
  filter: blur(40px);
  content: "";
  pointer-events: none;
}

.app {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: clamp(12px, 1.4vw, 18px);
  background: var(--ink-900);
  box-shadow: var(--shadow-panel);
  transform-style: preserve-3d;
  animation: appin 1200ms var(--ease-out) 520ms backwards;
  transition: rotate 600ms var(--ease-out);
  rotate: x 6deg;
}

@keyframes appin {
  from {
    opacity: 0;
    rotate: x 22deg;
    translate: 0 60px;
  }
}

.stage:hover .app {
  rotate: x 1.5deg;
}

/* 窗口高光描边 */
.app::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 1px 0 rgb(255 255 255 / 8%) inset, 0 0 0 1px rgb(95 216 255 / 8%) inset;
  content: "";
  pointer-events: none;
}

/* --- 标题栏 --- */

.app__chrome {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--ink-850), var(--ink-900));
  padding: 0.7rem 1rem;
}

.app__dots {
  display: flex;
  gap: 0.4rem;
}

.app__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-700);
}

.app__dots i:nth-child(1) {
  background: #ff5f57;
}

.app__dots i:nth-child(2) {
  background: #febc2e;
}

.app__dots i:nth-child(3) {
  background: #28c840;
}

.app__title {
  color: var(--frost-500);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.app__chrome .pill {
  margin-left: auto;
  font-size: 0.6rem;
}

/* --- 主体两栏 --- */

.app__body {
  display: grid;
  grid-template-columns: 186px minmax(0, 1fr);
  min-height: 420px;
}

.app__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--ink-850), var(--ink-900) 60%);
  padding: 0.8rem 0.6rem;
}

.app__side i {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: var(--r-sm);
  padding: 0.44rem 0.6rem;
  color: var(--frost-600);
  font-size: 0.74rem;
  font-style: normal;
}

/* 图标占位：用实心圆角块。描边空心方块会被读成"未勾选的复选框"，在 Mod 列表语境里有歧义。 */
.app__side i::before {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: currentcolor;
  opacity: 0.34;
  content: "";
}

.app__side i.on::before {
  opacity: 0.85;
}

.app__side i.on {
  position: relative;
  background: var(--ice-a14);
  color: var(--ice-300);
}

.app__side i.on::after {
  position: absolute;
  top: 26%;
  bottom: 26%;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--ice-400);
  content: "";
}

.app__side i.off {
  opacity: 0.42;
}

.app__side hr {
  margin: 0.5rem 0.4rem;
  border: 0;
  border-top: 1px solid var(--line-soft);
}

.app__main {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.95rem 1.05rem 1.2rem;
}

.app__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.app__bar h4 {
  color: var(--frost-100);
  font-size: 0.94rem;
  font-weight: 600;
}

.app__bar span {
  color: var(--frost-700);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

.app__search {
  width: min(180px, 30%);
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--ink-850);
  padding: 0.34rem 0.75rem;
  color: var(--frost-700);
  font-size: 0.68rem;
}

.app__btn {
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--ice-400), var(--ice-600));
  padding: 0.34rem 0.85rem;
  color: #041019;
  font-size: 0.68rem;
  font-weight: 600;
}

/* --- Mod 卡片网格 --- */

.app__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.mcard {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--ink-850);
  transition: border-color var(--dur), translate var(--dur) var(--ease-out);
}

.stage:hover .mcard {
  border-color: var(--line);
}

.mcard__art {
  position: relative;
  height: 92px;
  background: var(--art, linear-gradient(140deg, #16324d, #0d1c2e));
}

/* 海报上的斜向冰纹 */
.mcard__art::after {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    118deg,
    rgb(255 255 255 / 7%) 0 1px,
    transparent 1px 9px
  );
  content: "";
}

.mcard__meta {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.5rem 0.6rem 0.62rem;
}

.mcard__name {
  overflow: hidden;
  color: var(--frost-100);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mcard__tag {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  color: var(--frost-600);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
}

.mcard__tag .dot {
  width: 5px;
  height: 5px;
}

.mcard--on .mcard__tag {
  color: var(--jade);
}

.mcard--warn .mcard__tag {
  color: var(--ember);
}

.mcard--busy {
  border-color: var(--ice-a24);
  box-shadow: 0 0 0 1px var(--ice-a14), 0 10px 30px rgb(36 193 240 / 12%);
}

.mcard--busy .mcard__tag {
  color: var(--ice-400);
}

/* 正在安装的卡片上有一道扫描光 */
.mcard--busy .mcard__art::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgb(95 216 255 / 55%) 50%, transparent 60%);
  animation: scan 2.6s var(--ease-in-out) infinite;
  content: "";
}

@keyframes scan {
  0% {
    translate: 0 -100%;
  }

  100% {
    translate: 0 100%;
  }
}

/* --- 底部任务条：真的在跑 --- */

.app__task {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
  border: 1px solid var(--ice-a24);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgb(36 193 240 / 10%), rgb(12 21 36 / 90%));
  padding: 0.7rem 0.9rem;
}

.app__task-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ice-a24);
  border-radius: 50%;
  color: var(--ice-400);
}

.app__task-icon svg {
  width: 15px;
  height: 15px;
  animation: spin 3.2s linear infinite;
}

@keyframes spin {
  to {
    rotate: 360deg;
  }
}

.app__task-body {
  flex: 1;
  min-width: 0;
}

.app__task-title {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  color: var(--frost-100);
  font-size: 0.74rem;
}

.app__task-title span {
  margin-left: auto;
  color: var(--ice-400);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.app__task-phase {
  color: var(--frost-600);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
}

.app__track {
  overflow: hidden;
  height: 4px;
  margin-top: 0.42rem;
  border-radius: var(--r-pill);
  background: var(--ink-750);
}

.app__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ice-600), var(--ice-300));
  box-shadow: 0 0 12px var(--ice-a40);
  animation: fill 7s var(--ease-in-out) infinite;
}

@keyframes fill {
  0% {
    width: 4%;
  }

  22% {
    width: 34%;
  }

  46% {
    width: 51%;
  }

  74% {
    width: 88%;
  }

  92%,
  100% {
    width: 100%;
  }
}

.app__task .pill {
  flex-shrink: 0;
  font-size: 0.58rem;
}

/* 悬浮在窗口边缘的注解标签 */
.stage__note {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--ice-a24);
  border-radius: var(--r-pill);
  background: var(--glass-strong);
  padding: 0.42rem 0.9rem;
  color: var(--ice-300);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  animation: rise 900ms var(--ease-out) 1400ms backwards;
}

/*
 * 注解完全排在窗口外侧：用 right:calc(100% + x) / left:calc(100% + x) 而不是 translate，
 * 否则会和入场动画的 translate 打架。压在窗口上会挡住侧边栏和 Mod 卡片。
 */
.stage__note--a {
  top: 14%;
  right: calc(100% + 1.25rem);
}

.stage__note--b {
  bottom: 20%;
  left: calc(100% + 1.25rem);
  animation-delay: 1650ms;
}

/*
 * 外侧空间 = (视口 - 1480px 外壳) / 2，标签自身约 200px 宽。
 * 视口不到 1900px 时放不下，直接隐藏——它们只是点缀，缺了不影响信息完整性。
 */
@media (width <= 1900px) {
  .stage__note {
    display: none;
  }
}

@media (width <= 860px) {
  .app__body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .app__side {
    display: none;
  }

  .app__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app__search {
    display: none;
  }

  .app {
    rotate: none;
  }
}