/* ============================================================
   519168.xyz — 一个域名，一张卡
   配色取自卡面本身：深青绿 + 描金
   纯手写，无框架、无外链、无追踪
   ============================================================ */

:root {
  /* 底色：卡面暗部 #016376 压到接近黑，留一点青 */
  --bg: #06110f;
  --panel: #0b1a18;

  /* 文字：冷白偏青，和背景同族 */
  --txt: #f4f8f6;
  --dim: #d2e0dc;
  --mute: #a7bbb6;

  /* 强调：卡面里的金与青 */
  --gold: #e8c07a;
  --teal: #5fc8c4;

  --line: rgba(232, 192, 122, .16);
  --line-soft: rgba(255, 255, 255, .09);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
          Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas,
          "Liberation Mono", Menlo, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;      /* 老浏览器兜底 */
  min-height: 100svh;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* 卡面同族的氛围光：上方一点青，下方一点金 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(48vw 40vw at 50% 4%, rgba(13, 162, 168, .16), transparent 66%),
    radial-gradient(42vw 34vw at 50% 96%, rgba(232, 192, 122, .07), transparent 68%);
  pointer-events: none;
}

main, .footer { position: relative; z-index: 1; }

::selection { background: rgba(95, 200, 196, .28); color: #fff; }

.mono {
  font-family: var(--mono);
  font-size: .95em;
  letter-spacing: .04em;
  color: var(--gold);
}

/* ============================================================
   自定义光标（仅桌面端）
   ============================================================ */

.cur-ring,
.cur-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.cur-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(232, 192, 122, .55);
  transition: opacity .3s var(--ease),
              width .28s var(--ease), height .28s var(--ease),
              margin .28s var(--ease), border-color .28s var(--ease),
              background-color .28s var(--ease);
}

.cur-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--gold);
}

body.has-cursor .cur-ring,
body.has-cursor .cur-dot { opacity: 1; }

/* 藏掉系统箭头，整站只留自己画的那个 */
body.has-cursor,
body.has-cursor *,
body.has-cursor *::before,
body.has-cursor *::after {
  cursor: none !important;
}

/* 悬停在可点区域：环放大、变成青色实心微光 */
body.cur-hot .cur-ring {
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-color: rgba(95, 200, 196, .85);
  background: rgba(95, 200, 196, .12);
}

body.cur-hot .cur-dot {
  background: var(--teal);
}

@media (hover: none), (pointer: coarse) {
  .cur-ring, .cur-dot { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 96px 24px 90px;
  text-align: center;
  overflow-x: clip;
}

.hero-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 76px;
  width: 100%;
  max-width: 1020px;
  text-align: left;
}

.hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-text { min-width: 0; }

/* 顶部域名：胶囊底 + 青金渐变字，两侧短线 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 48px;
  padding: 11px 24px;
  border: 1px solid rgba(232, 192, 122, .3);
  border-radius: 999px;
  background: rgba(13, 162, 168, .09);
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .24em;
  line-height: 1;
  color: var(--gold);
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}

.eyebrow:hover {
  border-color: rgba(232, 192, 122, .55);
  background: rgba(13, 162, 168, .16);
}

.eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(95, 200, 196, .9);
  flex: none;
}

.eyebrow .txt {
  background: linear-gradient(100deg, var(--teal), var(--gold) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 卡面 ---------- */

.card-frame {
  position: relative;
  width: clamp(240px, 31vw, 340px);
  max-width: 100%;
  margin: 0;
  border-radius: 24px;
  /* 柔光直接用投影做，不占层级，不会盖住图片 */
  box-shadow:
    0 0 60px -8px rgba(13, 162, 168, .45),
    0 40px 80px -24px rgba(0, 0, 0, .94),
    0 0 0 1px rgba(232, 192, 122, .16);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.card-frame:hover {
  box-shadow:
    0 0 80px -6px rgba(13, 162, 168, .6),
    0 46px 90px -24px rgba(0, 0, 0, .96),
    0 0 0 1px rgba(232, 192, 122, .3);
}

.card-open {
  display: block;
  width: 100%;
  border-radius: 24px;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.card-open img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.card-open:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

/* 掠过卡面的一道光 */
.card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}

.card-shine::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 45%;
  height: 220%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, .22) 45%,
    rgba(255, 255, 255, .34) 50%,
    rgba(255, 255, 255, .22) 55%,
    transparent
  );
  transform: rotate(14deg);
  transition: left .85s var(--ease);
}

.card-frame:hover .card-shine::after { left: 130%; }

.cap {
  margin: 26px 0 0;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--mute);
}

.cap .mono {
  font-size: 1em;
  font-weight: 600;
  color: var(--gold);
}

/* 首屏右侧：数字是主角，标题第二，谐音句第三 */
.hero-num {
  margin: 0 0 24px;
  font-family: var(--mono);
  font-size: clamp(3.1rem, 6.4vw, 4.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  background: linear-gradient(105deg, #eef6f3 12%, var(--gold) 58%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h1 {
  margin: 0 auto;
  max-width: 15em;
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .01em;
  color: var(--txt);
}

/* 谐音句：点缀，比主句小一档 */
.read {
  margin: 24px 0 0;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--gold);
}

/* 向下的小箭头 */
.scroll-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 22px;
  height: 34px;
  margin-left: -11px;
  border: 1px solid rgba(232, 192, 122, .35);
  border-radius: 12px;
  opacity: .75;
}

.scroll-hint span {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--gold);
  animation: scrollDot 1.9s var(--ease) infinite;
}

@keyframes scrollDot {
  0%, 100% { transform: translateY(0); opacity: .25; }
  45%      { transform: translateY(11px); opacity: 1; }
  70%      { transform: translateY(11px); opacity: 0; }
}

/* ============================================================
   分区：左标题 + 右内容，和首屏同一套骨架
   ============================================================ */

.sec {
  padding: 92px 24px;
  border-top: 1px solid var(--line-soft);
}

.sec-grid {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 48px;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
}

.sec-label { position: sticky; top: 80px; align-self: start; }

/* 序号：实心渐变，和右侧数字格子同一套色 */
.sec-no {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  background: linear-gradient(160deg, var(--teal), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sec-label h2 {
  margin: 0;
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold);
}

/* 序号和标题之间一道短线 */
.sec-label::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 14px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--teal), transparent);
}

.sec-body { max-width: 40em; }

.sec-body p {
  margin: 0 0 1.2em;
  color: var(--dim);
  font-size: 1.06rem;
  line-height: 1.95;
}

.sec-body p:last-child { margin-bottom: 0; }

.sec-body p.note {
  margin-top: 2.2em;
  padding-top: 1.6em;
  border-top: 1px solid var(--line-soft);
  font-size: .98rem;
  color: var(--mute);
}

.sec-body p.note .mono { color: var(--gold); }

/* ---------- 六位数字 ---------- */

.digit-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 0 0 2.2em;
  padding: 0;
  list-style: none;
}

.digit-list li {
  padding: 26px 6px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(13, 162, 168, .07);
  text-align: center;
  transition: transform .35s var(--ease),
              border-color .35s var(--ease),
              background-color .35s var(--ease);
}

.digit-list li:hover {
  transform: translateY(-5px);
  border-color: rgba(232, 192, 122, .45);
  background: rgba(13, 162, 168, .14);
}

.digit-list .d {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.7rem, 3.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  background: linear-gradient(160deg, var(--teal), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.digit-list .m {
  display: block;
  margin-top: 9px;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--dim);
}

/* ---------- 这张卡 ---------- */

.brief-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brief-list li {
  display: grid;
  grid-template-columns: 4.4em minmax(0, 1fr);
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1rem;
  line-height: 1.85;
  transition: padding-left .3s var(--ease), border-color .3s var(--ease);
}

.brief-list li:last-child { border-bottom: none; }

.brief-list li:hover {
  padding-left: 8px;
  border-color: var(--line);
}

.brief-list .k {
  font-family: var(--mono);
  font-size: .86rem;
  letter-spacing: .1em;
  color: var(--teal);
  padding-top: .3em;
}

.brief-list .v { color: var(--dim); }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  padding: 46px 24px 58px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

.footer p {
  margin: 0 auto;
  max-width: 42em;
  font-size: .86rem;
  line-height: 1.95;
  color: var(--mute);
}

.footer p.mono {
  margin-bottom: 14px;
  font-size: .82rem;
  letter-spacing: .22em;
  color: var(--gold);
}

/* ============================================================
   音乐开关（右上角）
   ============================================================ */

.music-btn {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(232, 192, 122, .28);
  border-radius: 50%;
  background: rgba(11, 26, 24, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease),
              transform .3s var(--ease);
}

.music-btn:hover {
  border-color: rgba(232, 192, 122, .62);
  background: rgba(13, 162, 168, .2);
  transform: scale(1.06);
}

.music-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* 五根竖条：静音时静止且暗淡，播放时跳动 */
.bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 18px;
}

.bars i {
  display: block;
  width: 2px;
  height: 5px;
  border-radius: 1px;
  background: var(--gold);
  opacity: .55;
  transform-origin: center;
  transition: height .3s var(--ease), opacity .3s var(--ease);
}

.music-btn:hover .bars i { opacity: .85; }

.music-btn.playing {
  border-color: rgba(95, 200, 196, .55);
  background: rgba(13, 162, 168, .22);
}

.music-btn.playing .bars i {
  opacity: 1;
  background: var(--teal);
  animation: eq 1.1s ease-in-out infinite;
}

.music-btn.playing .bars i:nth-child(1) { animation-delay: 0s;    }
.music-btn.playing .bars i:nth-child(2) { animation-delay: .18s; }
.music-btn.playing .bars i:nth-child(3) { animation-delay: .36s; }
.music-btn.playing .bars i:nth-child(4) { animation-delay: .12s; }
.music-btn.playing .bars i:nth-child(5) { animation-delay: .28s; }

@keyframes eq {
  0%, 100% { height: 5px;  }
  50%      { height: 15px; }
}

/* ============================================================
   回到顶部
   ============================================================ */

.to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(232, 192, 122, .3);
  border-radius: 50%;
  background: rgba(11, 26, 24, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--gold);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              visibility .3s var(--ease), border-color .25s var(--ease),
              background-color .25s var(--ease);
}

.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  border-color: rgba(232, 192, 122, .7);
  background: rgba(13, 162, 168, .22);
}

.to-top svg {
  width: 19px;
  height: 19px;
}

/* ============================================================
   灯箱
   ============================================================ */

.lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: rgba(3, 8, 7, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.lb[hidden] { display: none; }
.lb.in { opacity: 1; }

.lb-inner {
  max-width: min(560px, 92vw);
  max-height: 88svh;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(232, 192, 122, .2);
  transform: scale(.96);
  transition: transform .3s var(--ease);
}

.lb.in .lb-inner { transform: none; }

.lb-inner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88svh;
  object-fit: contain;
}

.lb-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  color: var(--txt);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease);
}

.lb-close:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(232, 192, 122, .45);
  transform: rotate(90deg);
}

body.lb-open { overflow: hidden; }

/* ============================================================
   入场动画 —— 只动 opacity 和 translateY
   ============================================================ */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* 首屏：依次升起 */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.hero .eyebrow,
.hero .hero-card,
.hero .hero-text {
  animation: riseIn .85s var(--ease) both;
}

.hero .eyebrow   { animation-delay: .05s; }
.hero .hero-card { animation-delay: .16s; }
.hero .hero-text { animation-delay: .28s; }

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 900px) {
  .hero-inner { gap: 44px; max-width: 760px; }
  .card-frame { width: clamp(220px, 30vw, 300px); }
  h1 { font-size: clamp(1.5rem, 3.2vw, 1.95rem); }

  .sec-grid { grid-template-columns: 170px minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 720px) {
  .hero {
    min-height: auto;
    padding: 64px 18px 56px;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 100%;
    text-align: center;
    justify-items: center;
  }

  .hero-card { width: 100%; }

  .hero-text { width: 100%; }

  .card-frame { width: clamp(168px, 48vw, 240px); }

  /* 手机上把数字从卡片下方挪开，先给足呼吸再进正文 */
  .hero-num {
    margin: 30px 0 18px;
    font-size: clamp(2.3rem, 11vw, 3.1rem);
  }

  h1 { margin-top: 0; max-width: 16em; font-size: 1.34rem; line-height: 1.6; }

  .read { margin-top: 14px; font-size: 1.08rem; letter-spacing: .12em; }

  .cap { margin-top: 18px; font-size: .8rem; }

  .scroll-hint { display: none; }

  /* 手机端回到上下堆叠，但保留序号 */
  .sec { padding: 64px 20px; }

  .sec-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 100%;
  }

  .sec-label { position: static; }

  .sec-no { margin-bottom: 6px; }

  .sec-label h2 { font-size: 1.15rem; }

  .digit-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .brief-list li {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 13px 0;
  }

  .brief-list .k { padding-top: 0; }
  .brief-list li:hover { padding-left: 0; }
}

@media (max-width: 420px) {
  body { font-size: 16.5px; }

  .hero { padding: 68px 20px 56px; }

  .eyebrow { margin-bottom: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero .eyebrow,
  .hero .hero-card,
  .hero .hero-text { animation: none; }

  .js .reveal { opacity: 1; transform: none; transition: none; }

  .card-frame,
  .card-shine::after,
  .digit-list li,
  .brief-list li,
  .lb,
  .lb-inner,
  .lb-close { transition: none; }

  .scroll-hint span { animation: none; }
}