/* =========================================================================
   V5 — premium mobile-first pass: hero re-composition, coin 3D stack,
   section background variety, touch feedback, eco mobile, micro-interactions
   ========================================================================= */

/* ---------------- hero badge ---------------- */
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-lbl); font-weight: 700; letter-spacing: 0.2em; font-size: 11.5px;
  text-transform: uppercase; color: var(--lav-2);
  padding: 8px 16px; border-radius: 999px;
  background: rgba(34, 12, 70, 0.7);
  border: 1px solid rgba(190, 130, 255, 0.35);
  box-shadow: 0 0 16px rgba(139, 61, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--violet); box-shadow: 0 0 8px var(--violet);
  animation: pulse 1.8s infinite;
}
.hb-dot.live { background: #7fe0b0; box-shadow: 0 0 9px #7fe0b0; }

/* ---------------- coin 3D stack: rays / spin / shine / sparkles ---------- */
.coin-rays {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 150%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0 8%, rgba(170, 95, 255, 0.10) 10%, transparent 13%,
    transparent 24%, rgba(255, 95, 251, 0.07) 27%, transparent 30%,
    transparent 45%, rgba(170, 95, 255, 0.10) 48%, transparent 51%,
    transparent 66%, rgba(190, 130, 255, 0.08) 69%, transparent 72%,
    transparent 86%, rgba(170, 95, 255, 0.09) 89%, transparent 92%);
  -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 46%, transparent 74%);
  mask-image: radial-gradient(circle, transparent 30%, #000 46%, transparent 74%);
  animation: ringSpin 36s linear infinite;
}
.coin-3d {
  position: relative; display: inline-block;
  animation: floaty 7s ease-in-out infinite;
  will-change: transform;
}
.coin-3d .hero-coin { animation: coinTilt 13s ease-in-out infinite; will-change: transform; }
@keyframes coinTilt {
  0%, 100% { transform: rotate3d(0.25, 1, 0.05, -9deg); }
  50% { transform: rotate3d(0.25, 1, 0.05, 9deg); }
}
.coin-shine {
  position: absolute; inset: 4%; border-radius: 50%; pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(circle, #000 98%, transparent 100%);
  mask-image: radial-gradient(circle, #000 98%, transparent 100%);
}
.coin-shine::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -50%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  animation: coinSheen 6.5s ease-in-out infinite;
}
@keyframes coinSheen { 0%, 58% { left: -50%; } 82%, 100% { left: 140%; } }
.spark-dot {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #f4e9ff; box-shadow: 0 0 10px rgba(230, 200, 255, 0.95);
  pointer-events: none;
  animation: twinkle 3.4s ease-in-out infinite;
}
.sd-1 { left: 14%; top: 20%; }
.sd-2 { right: 12%; top: 34%; animation-delay: 1.1s; }
.sd-3 { left: 24%; bottom: 14%; animation-delay: 2.2s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .coin-rays, .coin-3d, .coin-3d .hero-coin, .coin-shine::after, .spark-dot { animation: none; }
}

/* the wobble/parallax now lives on .coin-3d, so the img keeps only tilt */
.hero-coin { animation: none; }

/* ---------------- header mini wallet (mobile) ---------------- */
.nav-wallet-mini {
  display: none;
  position: relative;
  width: 44px; height: 44px; border-radius: 13px;
  align-items: center; justify-content: center;
  color: #24063f;
  background: linear-gradient(180deg, #efdcff 0%, #c084fc 40%, #8b3dff 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 14px rgba(160, 85, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.nwm-dot {
  position: absolute; top: -3px; right: -3px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #6d5a96; border: 2px solid #12042e;
}
.nwm-dot.on { background: #7fe0b0; box-shadow: 0 0 8px #7fe0b0; }
@media (max-width: 820px) {
  .nav-wallet-mini { display: inline-flex; margin-left: auto; }
  .nav-logo { margin-right: 0; }
  .nav-inner { gap: 12px; }
}

/* ---------------- section background variety ---------------- */
.bg-radial::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 42% at 18% 22%, rgba(120, 45, 220, 0.16), transparent 70%),
    radial-gradient(55% 40% at 85% 78%, rgba(255, 95, 251, 0.07), transparent 70%);
}
.bg-watermark { overflow: hidden; }
.bg-radial { overflow: hidden; }
/* rotating ring pseudo-boxes sweep outside their sections at 45° — clip them */
#ecosystem { overflow: hidden; }
.bg-watermark::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: min(720px, 110vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url('../assets/coin-sm.webp') center / contain no-repeat;
  opacity: 0.05; pointer-events: none;
  filter: saturate(1.2);
}
.bg-watermark > .wrap { position: relative; z-index: 2; }

/* ---------------- ticker diamonds ---------------- */
.marquee-track i {
  font-style: normal;
  -webkit-text-fill-color: #ff5ffb;
  color: #ff5ffb;
  padding: 0 16px;
  filter: drop-shadow(0 0 7px rgba(255, 95, 251, 0.85));
  font-size: 10px; vertical-align: 2px;
}

/* ---------------- softer market flash + delta tones ---------------- */
@keyframes fUp { 30% { filter: drop-shadow(0 0 12px rgba(140, 235, 190, 0.6)); } }
@keyframes fDn { 30% { filter: drop-shadow(0 0 12px rgba(255, 150, 210, 0.55)); } }
.delta.up { color: #8fe6bd; }
.delta.down { color: #ff9ecf; }

/* ---------------- touch feedback (no hover on mobile) ---------------- */
@media (pointer: coarse) {
  .card-3d, .pkg-card, .mini-chip, .dest-card, .pillar, .eco-node {
    transition: transform 0.12s ease, box-shadow 0.2s ease;
  }
  .card-3d:active, .pkg-card:active, .dest-card:active, .pillar:active {
    transform: scale(0.98);
    box-shadow: 0 0 30px rgba(160, 85, 255, 0.5), 0 10px 26px rgba(0, 0, 0, 0.55);
  }
  .btn { transition: transform 0.1s ease, filter 0.15s ease; }
  .btn:active { transform: scale(0.965); }
  .bn-item:active { transform: scale(0.94); }
}
html { -webkit-tap-highlight-color: transparent; }

/* ---------------- package entrance micro-animation ---------------- */
.pkg-card .val { display: inline-block; }
.pkg-card.reveal.in .val { animation: priceIn 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes priceIn { from { transform: scale(0.94); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
.pkg-card .total { position: relative; overflow: hidden; }
.pkg-card.reveal.in .total::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 80%);
  transform: translateX(-110%);
  animation: totalSweep 0.9s ease 0.35s both;
}
@keyframes totalSweep { to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) {
  .pkg-card.reveal.in .val, .pkg-card.reveal.in .total::after { animation: none; }
}

/* ---------------- reveal variants (scroll story) ---------------- */
/* keep pre-reveal offsets inside the 16px side gutter so the document
   never gains horizontal scroll from below-fold elements */
.reveal.rv-left { transform: translateX(-14px); }
.reveal.rv-right { transform: translateX(14px); }
.reveal.rv-scale { transform: scale(0.93) translateY(14px); }
.reveal.rv-left.in, .reveal.rv-right.in, .reveal.rv-scale.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal.rv-left, .reveal.rv-right, .reveal.rv-scale { transform: none; } }

/* final CTA coin glow-in */
.final-cta img { transition: filter 0.9s ease 0.15s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; transform: scale(0.85); filter: drop-shadow(0 0 0 rgba(160, 85, 255, 0)); }
.final-cta.in img { transform: scale(1); filter: drop-shadow(0 0 26px rgba(170, 95, 255, 0.85)); }

/* ---------------- ghost button subtle animated border ---------------- */
.hero-ctas .btn-ghost {
  animation: ghostPulse 4.5s ease-in-out infinite;
}
@keyframes ghostPulse {
  0%, 100% { border-color: rgba(170, 100, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
  50% { border-color: rgba(200, 140, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 16px rgba(150, 70, 255, 0.3); }
}
@media (prefers-reduced-motion: reduce) { .hero-ctas .btn-ghost { animation: none; } }

/* ---------------- wallet hub attention pulse (until connected) -------- */
body:not(.wallet-connected) .bn-hub-btn { animation: hubPulse 2.6s ease-in-out infinite; }
@keyframes hubPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(160, 85, 255, 0.55), 0 4px 9px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
  50% { box-shadow: 0 0 24px rgba(190, 110, 255, 0.95), 0 4px 9px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
}
@media (prefers-reduced-motion: reduce) { body:not(.wallet-connected) .bn-hub-btn { animation: none; } }

/* connecting status dot */
.dot.conn {
  background: var(--warn);
  box-shadow: 0 0 10px var(--warn);
  animation: pulse 0.9s infinite;
}

/* ---------------- ecosystem mobile: compact orb + 2-col nodes -------- */
@media (max-width: 820px) {
  .eco-core {
    margin: 0 auto 16px; width: min(250px, 78%);
    border-radius: 26px; padding: 22px;
    position: relative;
  }
  .eco-core::before, .eco-core::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    border: 1.5px dashed rgba(170, 100, 255, 0.3); border-radius: 50%;
    width: 118%; aspect-ratio: 1; pointer-events: none;
    animation: ringSpin 34s linear infinite;
  }
  .eco-core::after { width: 140%; animation-duration: 52s; animation-direction: reverse; border-color: rgba(255, 95, 251, 0.16); }
  .eco-nodes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .eco-node { flex-direction: column; text-align: center; gap: 6px; padding: 13px 8px; }
  .eco-node .nm { font-size: 13px; }
  .eco-node .ds { font-size: 8.6px; }
}
@media (prefers-reduced-motion: reduce) { .eco-core::before, .eco-core::after { animation: none; } }

/* ---------------- mobile typography + hero spacing ---------------- */
@media (max-width: 768px) {
  .hero-title { font-size: clamp(46px, 13.5vw, 62px); }
  .hero-sub { font-size: 12px; letter-spacing: 0.24em; }
  .hero-desc { font-size: 15px; line-height: 1.6; }
  .hero-copy { gap: 13px; }
  .hero { padding-top: calc(var(--nav-h) + 16px); }
  .hero-coin-wrap { margin-top: 10px; }
  .hero-chips { gap: 8px; }
  .hero-chips .chip { font-size: 11px; padding: 6px 13px; }
  .hide-mobile { display: none; }
  .sec-head h2 { font-size: clamp(30px, 8.6vw, 38px); }
  .sec-head { margin-bottom: 30px; }
  .sec-head p.lead { font-size: 15.5px; }
}
@media (max-width: 480px) {
  .hero-ctas { gap: 10px; }
  .hero-ctas .btn { min-height: 50px; }
}