/* ========================= 
   页面整体
========================= */
.bodyWrapper {
  min-height: 100vh;
  font-family: "Orbitron", sans-serif;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;

  /* 去掉背景 */
  background: none; /* 或者直接删掉 background 属性 */
}

/* =========================
   Hero
========================= */
.hero2 {
  padding: 85px 16px 20px;
}

.hero2 h1 {
  font-size: 32px;
  background: linear-gradient(to right, #f79422, #f79422, #ffd900);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(247, 148, 34, 0.5);
  margin: 1px auto;
}

.hero2 p {
  opacity: 0.8;
  margin-top: 15px;
  letter-spacing: 1px;
}

/* =========================
   卡片盒子（重点升级）
========================= */
.cardBox {
  position: relative;
  width: calc(100% - 32px);
  max-width: 500px;
  margin: 40px auto;
  padding: 32px;
  border-radius: 22px;
  box-sizing: border-box;

  /* 高级玻璃 */
  background: rgba(34, 31, 31, 0.7);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);

  /* 内外阴影增强层次 */
  box-shadow: inset 0 0 25px rgba(247, 148, 34, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.6);

  transition: 0.35s ease;
  overflow: hidden;
}

/* 渐变科技边框 */
.cardBox::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 1px;

  background: linear-gradient(135deg, #f79422, #ffb347, #f79422);

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;

  pointer-events: none;
}

/* 悬浮立体效果 */
.cardBox:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: inset 0 0 30px rgba(247, 148, 34, 0.12),
    0 30px 80px rgba(0, 0, 0, 0.75);
}

/* 卡片标题 */
.cardBox h3 {
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 15px;
  text-shadow: 0 0 12px rgba(247, 148, 34, 0.5);
}

/* =========================
   输入框
========================= */
.input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  margin-top: 12px;
  font-size: 16px;
  box-sizing: border-box;
  border: 1px solid rgba(247, 148, 34, 0.25);

  background: rgba(34, 31, 31, 0.7);
  color: white;
  outline: none;
  transition: 0.3s;
}

.input:focus {
  border-color: #f79422;
  box-shadow: 0 0 12px rgba(247, 148, 34, 0.4);
}

/* =========================
   百分比按钮
========================= */
.percentBox {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  justify-content: center;
}

.percentBtn {
  flex: 1 1;
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  transition: 0.3s;

  border: 1px solid rgba(247, 148, 34, 0.25);
  background: rgba(34, 31, 31, 0.6);
}

.percentBtn:hover {
  background: linear-gradient(
    135deg,
    rgba(247, 148, 34, 0.3),
    rgba(255, 179, 71, 0.3)
  );
  color: white;

  box-shadow: 0 0 8px rgba(247, 148, 34, 0.65);
}

/* =========================
   主按钮
========================= */
.mainBtn {
  margin-top: 20px;
  padding: 12px 25px;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;

  border: 1px solid rgba(247, 148, 34, 0.35);

  background: linear-gradient(
    135deg,
    rgba(247, 148, 34, 0.85),
    rgba(255, 179, 71, 0.85)
  );
  color: white;

  transition: 0.3s;
}
.mainBtn:hover {
  transform: translateY(-2px);

  background: linear-gradient(
    135deg,
    rgba(247, 148, 34, 0.95),
    rgba(255, 179, 71, 0.95)
  );

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 16px rgba(247, 148, 34, 0.45),
    0 0 28px rgba(255, 179, 71, 0.25);
}
.mainBtn:active {
  transform: translateY(1px);

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 10px rgba(247, 148, 34, 0.35);
}

.disabled {
  background: gray !important;
  cursor: not-allowed;
}

/* =========================
   NFT 卡片
========================= */
.nftCard {
  width: 190px;
  height: 260px;
  margin: 28px auto;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;

  background: url("/nft.png") center/cover no-repeat;

  box-shadow: 0 0 30px rgba(247, 148, 34, 0.15),
    0 0 60px rgba(247, 148, 34, 0.15), inset 0 0 30px rgba(255, 255, 255, 0.08);

  transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================
   🌈 镭射彩虹层
========================= */
.nftCard::before {
  content: "";
  position: absolute;
  inset: -40%;

  background: linear-gradient(120deg, #f79422, #ffb347);

  opacity: 0.11;

  filter: blur(60px);

  mix-blend-mode: color-dodge;

  animation: holoMove 15s linear infinite;

  z-index: 0;
}

/* =========================
   ✨ 能量扫描层
========================= */
.nftCard::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 70%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.85),
    transparent
  );
  transform: rotate(25deg);
  filter: blur(8px);
  animation: scanLight 4s ease-in-out infinite;
}

/* =========================
   🧠 鼠标悬浮 = 3D升维
========================= */
.nftCard:hover {
  transform: perspective(900px) rotateY(14deg) rotateX(6deg) scale(1.08);

  box-shadow: 0 0 60px rgba(247, 148, 34, 0.65),
    0 0 120px rgba(247, 148, 34, 0.45), 0 25px 80px rgba(0, 0, 0, 0.8);
}

/* =========================
   ⚡ 外圈能量边框
========================= */
.nftCard .glow-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 20px #ffb347, 0 0 40px #f79422,
    0 0 80px rgba(247, 148, 34, 0.6);
  opacity: 0.4;
  animation: pulseGlow 3s ease-in-out infinite;
}

/* =========================
   🎞 动画定义
========================= */

@keyframes holoMove {
  0% {
    transform: translateX(-20%) rotate(0deg);
  }
  100% {
    transform: translateX(20%) rotate(360deg);
  }
}

@keyframes scanLight {
  0% {
    left: -60%;
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    left: 140%;
    opacity: 0;
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    opacity: 0.25;
    filter: blur(0px);
  }
  50% {
    opacity: 0.6;
    filter: blur(3px);
  }
}

.mintNft {
  margin-top: 20px;
  font-size: 13px;
  opacity: 0.75;
  letter-spacing: 0.5px;
  text-align: center;
}

/* =========================
   信息文字
========================= */
.lpInfo {
  opacity: 0.85;
  margin-top: 10px;
}

/* =========================
   Footer
========================= */
.footer1 {
  margin-top: 1px;
  margin-bottom: 10px;
  opacity: 0.6;
  font-size: 14px;
  letter-spacing: 1px;
}

/* =========================
   Toast
========================= */
.toast {
  position: fixed;
  top: 80px;
  right: 24px;
  width: 260px;
  padding: 14px 16px;
  color: white;
  background: rgba(30, 30, 30, 0.9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 12px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);

  font-size: 14px;
  z-index: 9999;

  opacity: 0;
  transform: translateX(120%);
  pointer-events: none;

  transition: opacity 0.55s ease-out,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.hardCapBox {
  width: calc(100% - 32px); /* 两边 16px */
  max-width: 500px;
  margin: 20px auto 30px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(34, 31, 31, 0.7);
  text-align: center;
}
.hardCapLabel {
  font-size: 14px;
  opacity: 0.7;
  letter-spacing: 2px;
  margin-bottom: 6px;
  color: #ffb347;
}

.hardCapAmount {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 1px;

  background: linear-gradient(90deg, #ffffff, #fff8ee, #f79422);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  text-shadow: 0 0 12px rgba(247, 148, 34, 0.45);
}

/* =========================
   外层 = CardBox 同款
========================= */
.mintTierWrapper {
  position: relative;
  width: calc(100% - 32px);
  max-width: 500px;
  margin: 40px auto;
  padding: 32px;
  border-radius: 22px;
  box-sizing: border-box;
  overflow: hidden;

  /* 玻璃背景 */
  background: rgba(34, 31, 31, 0.7);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);

  box-shadow: inset 0 0 25px rgba(247, 148, 34, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.6);

  transition: 0.35s ease;
}

/* 渐变科技边框（只影响边框） */
.mintTierWrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(135deg, #f79422, #ffb347, #f79422);

  /* 标准写法 */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
}

/* 悬浮 */
.mintTierWrapper:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: inset 0 0 30px rgba(247, 148, 34, 0.12),
    0 30px 80px rgba(0, 0, 0, 0.75);
}

/* 标题 */
.mintTierTitle {
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 18px;
  text-shadow: 0 0 12px rgba(247, 148, 34, 0.5);
}

/* 网格 */
.mintTierGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

/* 卡片 */
.mintTierCard {
  padding: 20px;
  border-radius: 18px;
  cursor: pointer;
  text-align: center;
  transition: 0.3s ease;

  border: 1px solid rgba(247, 148, 34, 0.25);
  background: rgba(34, 31, 31, 0.7);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);

  box-shadow: inset 0 0 15px rgba(247, 148, 34, 0.08);
}

.mintTierCard:hover {
  transform: translateY(-4px);
  background: linear-gradient(rgba(34, 31, 31, 0.7), rgba(34, 31, 31, 0.7)),
    linear-gradient(135deg, rgba(247, 148, 34, 0.25), rgba(255, 179, 71, 0.25));

  box-shadow: 0 0 18px rgba(247, 148, 34, 0.5),
    inset 0 0 20px rgba(247, 148, 34, 0.25);
}

/* 选中态 */
.mintTierCard:focus {
  background: linear-gradient(135deg, #f79422, #ffb347);
  color: white;
  transform: scale(1.05);

  box-shadow: 0 0 25px rgba(247, 148, 34, 0.7), 0 0 55px rgba(247, 148, 34, 0.4);
}

/* 文字 */
.tierPrice {
  font-size: 20px;
  font-weight: 600;
}

.tierToken {
  font-size: 14px;
  opacity: 0.85;
  margin-top: 6px;
}

/* 提示 */
.mintTierTip {
  margin-top: 20px;
  font-size: 13px;
  opacity: 0.75;
  letter-spacing: 0.5px;
  text-align: center;
}

.mintTierCard.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* 移动端 */
@media (max-width: 600px) {
  .mintTierWrapper {
    margin: 30px auto;
    padding: 22px;
  }

  .mintTierGrid {
    gap: 12px;
  }
}

/* ================= 外层容器 ================= */
.neo-wrapper {
  position: relative;
  width: calc(100% - 32px);
  max-width: 500px;
  margin: 0 auto 40px;
  padding-top: 10px;
  padding-bottom: 40px;
  display: flex;
  justify-content: center;
}

/* 新增舞台层 */
.neo-stage {
  position: relative;
  display: inline-block;
}

/* ================= 主体 ================= */
.neo-countdown {
  display: flex;
  gap: 20px;
  margin-bottom: 1px;
}

/* ================= 单卡片 ================= */
.neo-card {
  width: 70px;
  height: 70px;
  background: #0e0e0e;
  border-radius: 16px 16px 1px 1px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ================= 英文标签 ================= */
.neo-label {
  font-size: 8px;
  letter-spacing: 1.1px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1px;
}

/* ================= 数字区域 ================= */
.neo-value {
  display: flex;
  gap: 1px;
  align-items: center;
  justify-content: center;
}

/* ================= 数字容器 ================= */
.digit-container {
  width: 28px;
  height: 48px;
  overflow: hidden;
  position: relative;
}

/* ================= 数字动画 ================= */
.digit-slide {
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
  line-height: 48px;
  animation: riseUp 0.6s ease;
}

@keyframes riseUp {
  from {
    transform: translateY(50%);
    opacity: 0;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

/* ================= 🌊 真镜像倒影 ================= */
/* ================= 🌊 真实渐进倒影 ================= */
/* ================= 🌊 真实物理倒影 ================= */
.neo-reflection {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  transform: scaleY(-1);
  pointer-events: none;

  /* ⭐ 只压暗 10% */
  filter: brightness(0.9);

  /* ⭐ 从顶部完整 → 底部完全透明 */
  mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    /* 接触面完整 */ rgba(0, 0, 0, 0.95) 10%,
    rgba(0, 0, 0, 0.8) 25%,
    rgba(0, 0, 0, 0.6) 45%,
    rgba(0, 0, 0, 0.35) 65%,
    rgba(0, 0, 0, 0.15) 85%,
    transparent 100%
  );

  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.6) 10%,
    rgba(0, 0, 0, 0.3) 25%,
    rgba(0, 0, 0, 0.2) 45%,
    rgba(0, 0, 0, 0.1) 65%,
    rgba(0, 0, 0, 0.01) 85%,
    transparent 100%
  );
}

.neo-disabled {
  opacity: 0.45;
  filter: grayscale(1);
}