/* =========================================================================
   V4 — live market band, mobile hero composition, skeletons, price flash,
   masked heading reveals, button shimmer, grid texture
   ========================================================================= */

/* ---------------- faint grid texture ---------------- */
.grid-bg::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(150, 90, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 90, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(85% 75% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(85% 75% at 50% 40%, #000, transparent);
}

/* ---------------- live market ---------------- */
.mkt-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.mkt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mkt-main { grid-column: span 2; padding: 22px 24px; display: grid; gap: 16px; align-content: start; }
.mkt-bnb { grid-column: span 2; padding: 22px 24px; display: grid; gap: 12px; align-content: start; }
.mkt-pair { display: flex; align-items: center; gap: 12px; }
.mkt-pair img { filter: drop-shadow(0 0 10px rgba(160, 85, 255, 0.55)); }
.mkt-pair-t { display: grid; gap: 1px; }
.mkt-pair-t b { font-family: var(--font-lbl); font-weight: 700; letter-spacing: 0.1em; font-size: 15.5px; color: #fff; }
.mkt-pair .badge { margin-left: auto; }
.mkt-ztk { display: grid; gap: 8px; }
.mkt-price-lg {
  font-family: var(--font-num); font-weight: 800; font-style: italic;
  font-size: clamp(23px, 3.4vw, 34px); line-height: 1.15; color: #e9dcff;
  text-shadow: 0 0 22px rgba(150, 70, 255, 0.5);
}
.mkt-bnb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.mkt-bnb-val { text-align: right; display: grid; gap: 2px; justify-items: end; }
.mkt-price {
  font-family: var(--font-num); font-weight: 800; font-style: italic;
  font-size: clamp(26px, 3.6vw, 36px); line-height: 1; color: #f3ecff;
  text-shadow: 0 0 18px rgba(150, 70, 255, 0.55);
}
.spark-wrap { display: grid; gap: 6px; }
.spark-wrap svg { width: 100%; height: 58px; filter: drop-shadow(0 0 6px rgba(190, 120, 255, 0.45)); }
.mkt-chip { padding: 14px 18px; display: grid; gap: 4px; }
.mkt-chip .mk { font-family: var(--font-lbl); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; color: var(--text-faint); }
.mkt-chip .mv { font-family: var(--font-num); font-weight: 700; font-size: 16.5px; color: #fff; }

@media (max-width: 900px) {
  .mkt-grid { grid-template-columns: repeat(2, 1fr); }
  .mkt-main, .mkt-bnb { grid-column: span 2; }
}
@media (max-width: 480px) {
  .mkt-main, .mkt-bnb { padding: 18px 16px; }
  .mkt-chip { padding: 12px 14px; }
  .mkt-chip .mv { font-size: 14.5px; }
  .mkt-pair .badge { display: none; }
}

/* ---------------- skeleton loading ---------------- */
.skel {
  color: transparent !important; text-shadow: none !important;
  border-radius: 8px; min-width: 74px; display: inline-block;
  background: linear-gradient(100deg, rgba(120, 60, 220, 0.16) 30%, rgba(200, 140, 255, 0.32) 50%, rgba(120, 60, 220, 0.16) 70%);
  background-size: 200% 100%;
  animation: skelWave 1.3s linear infinite;
}
@keyframes skelWave { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ---------------- price flash on change ---------------- */
.flash-up { animation: fUp 0.9s ease; }
.flash-down { animation: fDn 0.9s ease; }
@keyframes fUp { 30% { filter: drop-shadow(0 0 14px rgba(74, 222, 128, 0.85)); } }
@keyframes fDn { 30% { filter: drop-shadow(0 0 14px rgba(251, 113, 133, 0.85)); } }

/* ---------------- masked heading reveal ---------------- */
.sec-head.reveal h2 {
  opacity: 0; transform: translateY(36px) skewX(-4deg);
  transition: opacity 0.7s ease 0.1s, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s;
}
.sec-head.reveal.in h2 { opacity: 1; transform: skewX(-4deg); }
@media (prefers-reduced-motion: reduce) {
  .sec-head.reveal h2 { opacity: 1; transform: skewX(-4deg); transition: none; }
}

/* ---------------- primary button shimmer ---------------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42%; left: -62%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  animation: btnShimmer 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnShimmer { 0%, 55% { left: -62%; } 78%, 100% { left: 135%; } }
@media (prefers-reduced-motion: reduce) { .btn-primary::after { animation: none; } }

/* ---------------- smoother ticker ---------------- */
.marquee-track { will-change: transform; }
@media (max-width: 600px) { .marquee-track { animation-duration: 22s; } .marquee { padding: 10px 0; } }

/* ---------------- mobile hero composition ---------------- */
@media (max-width: 820px) {
  .hero { min-height: auto; padding-bottom: 34px; }
  .hero .wrap { gap: 8px; }
  .hero-coin-wrap {
    display: flex; order: 2;
    margin: 18px auto 0; width: 100%;
    justify-content: center; align-items: center;
  }
  .hero-coin { width: min(215px, 58%); height: auto; aspect-ratio: 1; object-fit: contain; }
  .hero-ring { width: 128%; }
  .hero-ring--2 { width: 148%; }
  .mc-1 { width: 46px; left: 6%; top: 6%; }
  .mc-2 { width: 34px; right: 5%; top: 0; }
  .mc-3 { width: 40px; right: 10%; bottom: 2%; }
  .hero-title { font-size: clamp(58px, 16.5vw, 84px); }
  .hero-desc { font-size: 15.5px; }
  .hero-scroll { display: none; }
}