/* ==========================================================================
   展示页 — USDT 大字报价（门店大屏）

   设计意图：黑金、居中、极简。屏幕通常整日常亮，因此动画一律做得慢而轻，
   避免闪烁与高频重绘，并全部服从 prefers-reduced-motion。
   ========================================================================== */

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

/* -------------------------------------------------------------------------
   环境光背景
   ------------------------------------------------------------------------- */

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}

.glow-a {
  top: -22%;
  left: 50%;
  width: 78vmax;
  height: 62vmax;
  margin-left: -39vmax;
  background: radial-gradient(circle, rgba(229, 181, 60, 0.2), transparent 66%);
  animation: drift-a 46s ease-in-out infinite alternate;
}

.glow-b {
  bottom: -30%;
  left: 50%;
  width: 66vmax;
  height: 52vmax;
  margin-left: -33vmax;
  background: radial-gradient(circle, rgba(122, 92, 20, 0.22), transparent 68%);
  animation: drift-b 62s ease-in-out infinite alternate;
}

@keyframes drift-a {
  to {
    transform: translate3d(-5%, 3%, 0) scale(1.09);
  }
}

@keyframes drift-b {
  to {
    transform: translate3d(6%, -4%, 0) scale(1.07);
  }
}

/* 细网格，向四周淡出，给画面一点结构感 */
.grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(229, 181, 60, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229, 181, 60, 0.05) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 74% 62% at 50% 46%, #000 32%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 74% 62% at 50% 46%, #000 32%, transparent 78%);
}

/* -------------------------------------------------------------------------
   顶栏
   ------------------------------------------------------------------------- */

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex: none;
  padding: var(--sp-4) clamp(16px, 3vw, 40px);
  border-bottom: 1px solid rgba(229, 181, 60, 0.12);
  background: linear-gradient(180deg, rgba(8, 10, 15, 0.9), rgba(8, 10, 15, 0.35));
  backdrop-filter: blur(10px);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* -------------------------------------------------------------------------
   报价主体
   ------------------------------------------------------------------------- */

.stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.5vh, 32px) clamp(16px, 4vw, 56px);
  min-height: 0;
}

.stage-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 100%;
}

/* 四角装饰线 */
.corner {
  position: absolute;
  width: clamp(22px, 3.4vw, 46px);
  height: clamp(22px, 3.4vw, 46px);
  border: 1px solid rgba(229, 181, 60, 0.3);
  pointer-events: none;
}

.corner-tl {
  top: clamp(10px, 2vh, 26px);
  left: clamp(12px, 2.4vw, 34px);
  border-right: 0;
  border-bottom: 0;
}

.corner-tr {
  top: clamp(10px, 2vh, 26px);
  right: clamp(12px, 2.4vw, 34px);
  border-left: 0;
  border-bottom: 0;
}

.corner-bl {
  bottom: clamp(10px, 2vh, 26px);
  left: clamp(12px, 2.4vw, 34px);
  border-right: 0;
  border-top: 0;
}

.corner-br {
  bottom: clamp(10px, 2vh, 26px);
  right: clamp(12px, 2.4vw, 34px);
  border-left: 0;
  border-top: 0;
}

/* 标题小饰条 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 18px);
  color: var(--gold-soft);
  font-size: clamp(11px, 1.25vw, 15px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  white-space: nowrap;
}

.eyebrow-line {
  display: block;
  width: clamp(26px, 5vw, 76px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229, 181, 60, 0.65));
}

.eyebrow-line:last-child {
  background: linear-gradient(90deg, rgba(229, 181, 60, 0.65), transparent);
}

/* 币种 */
.asset {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(12px, 2.4vh, 26px);
  font-size: clamp(22px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.asset-coin {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(145deg, #2ec39a, #1d8f6c);
  color: #fff;
  font-size: 0.62em;
  font-weight: 800;
  box-shadow: 0 6px 22px rgba(38, 161, 123, 0.32);
}

.asset-text {
  text-align: left;
  line-height: 1.15;
}

.asset-text small {
  display: block;
  margin-top: 2px;
  font-size: 0.34em;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.36em;
}

/* -------------------------------------------------------------------------
   报价数字
   ------------------------------------------------------------------------- */

.quote {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 26px);
  margin: clamp(6px, 1.6vh, 20px) 0 clamp(4px, 1vh, 12px);
}

/*
 * 数字用渐变填充而非纯色，看上去更像镀金；因此发光要走 drop-shadow，
 * text-shadow 在 color:transparent 下不可见。
 */
.quote-value {
  font-size: clamp(76px, 22vw, 300px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  /*
   * 静止时只露出渐变最左侧的 1/2.6，所以前 38% 必须自成一套完整的光泽：
   * 起点若是深青铜色，首位数字会比其余数字暗一截，看着像掉色。
   */
  background-image: linear-gradient(
    100deg,
    #dca63c 0%,
    var(--gold-soft) 14%,
    #fff4d2 26%,
    var(--gold-soft) 38%,
    var(--gold) 58%,
    #c39a34 100%
  );
  background-size: 260% 100%;
  /* 静止位置即扫光动画的终点，动画结束时不会有跳变 */
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 46px rgba(229, 181, 60, 0.34));
  transition: filter 0.5s var(--ease);
}

/* 涨跌方向的短暂着色 */
.quote-value.is-up {
  background-image: linear-gradient(
    100deg,
    var(--up) 0%,
    #4fe3ac 14%,
    #d8fff0 26%,
    #4fe3ac 38%,
    var(--up) 58%,
    #12a76f 100%
  );
  filter: drop-shadow(0 0 46px rgba(22, 199, 132, 0.42));
}

.quote-value.is-down {
  background-image: linear-gradient(
    100deg,
    var(--down) 0%,
    #ff98a1 14%,
    #ffe1e4 26%,
    #ff98a1 38%,
    var(--down) 58%,
    #c94a52 100%
  );
  filter: drop-shadow(0 0 46px rgba(240, 97, 109, 0.42));
}

/* 长时间取不到数据时压暗，避免误导顾客 */
.quote-value.is-stale {
  background-image: linear-gradient(100deg, #4a5162, #6b7386, #4a5162);
  filter: none;
}

/* 数字更新：轻微缩放 + 高光扫过 */
.quote.is-changed .quote-value {
  animation: bump 0.55s var(--ease), sweep 1.15s var(--ease);
}

@keyframes bump {
  0% {
    transform: scale(1);
  }
  36% {
    transform: scale(1.028);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes sweep {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

.quote-unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: clamp(17px, 2.1vw, 32px);
  font-weight: 700;
  color: var(--gold-soft);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.quote-unit small {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.14em;
}

/* 分隔线与中央菱形 */
.rule {
  position: relative;
  width: min(62vw, 560px);
  height: 1px;
  margin: clamp(10px, 2vh, 24px) 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(229, 181, 60, 0.42) 22%,
    rgba(229, 181, 60, 0.42) 78%,
    transparent
  );
}

.rule-gem {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(229, 181, 60, 0.7);
}

/* 时钟 */
.clock {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 1.2vw, 16px);
  color: var(--text-dim);
  font-size: clamp(14px, 1.8vw, 24px);
  letter-spacing: 0.05em;
}

.clock-date {
  color: var(--text-faint);
}

.clock-time {
  color: var(--text);
  font-weight: 600;
}

.clock-tz {
  font-size: 0.72em;
  color: var(--text-faint);
  letter-spacing: 0.12em;
}

/* 异常提示 */
.notice {
  margin-top: clamp(10px, 1.8vh, 20px);
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--down-dim);
  border: 1px solid rgba(240, 97, 109, 0.32);
  color: var(--down);
  font-size: clamp(12px, 1.35vw, 16px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}

.notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
   底部门店信息
   ------------------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2) clamp(14px, 2.4vw, 30px);
  padding: var(--sp-4) clamp(16px, 3vw, 40px);
  border-top: 1px solid rgba(229, 181, 60, 0.12);
  background: linear-gradient(0deg, rgba(8, 10, 15, 0.92), rgba(8, 10, 15, 0.4));
  backdrop-filter: blur(10px);
  font-size: clamp(12px, 1.3vw, 17px);
  color: var(--text-dim);
}

.footer-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.footer-icon {
  font-size: 1.05em;
  line-height: 1;
  opacity: 0.85;
}

.footer-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(229, 181, 60, 0.4);
}

.footer-strong {
  color: var(--gold-soft);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.footer-wa {
  color: var(--up);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
   适配
   ------------------------------------------------------------------------- */

/* 横置显示器：高度紧张时压缩纵向留白 */
@media (max-height: 560px) {
  .asset {
    margin-top: var(--sp-2);
    font-size: clamp(18px, 2.6vw, 28px);
  }

  .quote-value {
    font-size: clamp(64px, 17vw, 190px);
  }

  .rule {
    margin: var(--sp-2) 0;
  }

  .corner,
  .grid {
    display: none;
  }

  .footer {
    padding: var(--sp-2) var(--sp-4);
  }
}

/* 超宽大屏：把数字再放大一档 */
@media (min-width: 1800px) and (min-height: 900px) {
  .quote-value {
    font-size: clamp(240px, 19vw, 360px);
  }
}

@media (max-width: 720px) {
  .topbar {
    padding: var(--sp-3) var(--sp-4);
  }

  .brand-sub {
    display: none;
  }

  .nav {
    display: none;
  }

  .corner {
    display: none;
  }

  .quote {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .quote-unit {
    align-items: center;
    flex-direction: row;
    gap: var(--sp-2);
  }

  .footer {
    flex-direction: column;
    gap: var(--sp-2);
    text-align: center;
  }

  .footer-sep {
    display: none;
  }
}