/* =========================================================================
   V2 UPGRADES — aurora, marquee, stats, timeline, 3D hero, app bottom nav
   ========================================================================= */

/* ---------------- aurora background ---------------- */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; opacity: .5; will-change: transform; }
.aurora i:nth-child(1) {
  width: 62vw; height: 62vw; left: -18vw; top: -12vw;
  background: radial-gradient(circle, rgba(120, 45, 220, 0.22) 0%, rgba(120, 45, 220, 0) 62%);
  animation: aur1 26s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  width: 55vw; height: 55vw; right: -20vw; top: 26%;
  background: radial-gradient(circle, rgba(255, 95, 251, 0.10) 0%, rgba(255, 95, 251, 0) 60%);
  animation: aur2 32s ease-in-out infinite alternate;
}
.aurora i:nth-child(3) {
  width: 70vw; height: 70vw; left: 8vw; bottom: -30vw;
  background: radial-gradient(circle, rgba(80, 30, 170, 0.20) 0%, rgba(80, 30, 170, 0) 62%);
  animation: aur3 38s ease-in-out infinite alternate;
}
@keyframes aur1 { to { transform: translate(9vw, 7vh) scale(1.15); } }
@keyframes aur2 { to { transform: translate(-7vw, -6vh) scale(1.12); } }
@keyframes aur3 { to { transform: translate(-6vw, -8vh) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }
main, footer { position: relative; z-index: 1; }

/* ---------------- marquee ribbon ---------------- */
.marquee {
  position: relative; z-index: 1; overflow: hidden; white-space: nowrap;
  border-top: 1px solid rgba(150, 90, 255, 0.25); border-bottom: 1px solid rgba(150, 90, 255, 0.25);
  background: linear-gradient(90deg, rgba(26, 9, 58, 0.9), rgba(46, 16, 96, 0.85), rgba(26, 9, 58, 0.9));
  padding: 13px 0;
  box-shadow: 0 0 30px rgba(120, 45, 220, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.marquee-track { display: inline-flex; animation: marq 30s linear infinite; }
.marquee-track span {
  font-family: var(--font-lbl); font-weight: 700; letter-spacing: 0.3em; font-size: 13.5px;
  background: linear-gradient(180deg, #fff, #c9a0ff 70%, #9a55f0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(160, 85, 255, 0.35));
}
@keyframes marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------------- stats strip ---------------- */
.sec-tight { padding: 44px 0; }
.stats-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.stat-card { padding: 22px 12px; text-align: center; display: grid; gap: 6px; justify-items: center; }
.stat-num { font-family: var(--font-num); font-weight: 800; font-style: italic; font-size: clamp(30px, 3.4vw, 42px); line-height: 1; }
.stat-lbl { font-family: var(--font-lbl); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11.5px; color: var(--text-faint); }

/* ---------------- rotating conic glow border ---------------- */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.glow-border { position: relative; }
.glow-border::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--ang), rgba(139, 61, 255, 0) 0%, rgba(200, 140, 255, 0.9) 12%, rgba(139, 61, 255, 0) 26%, rgba(255, 95, 251, 0.55) 55%, rgba(139, 61, 255, 0) 70%);
  animation: spinAng 6s linear infinite;
  filter: blur(6px); opacity: .7;
}
@keyframes spinAng { to { --ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .glow-border::before { animation: none; } }

/* ---------------- timeline ---------------- */
.timeline { position: relative; display: grid; gap: 22px; padding-left: 138px; }
.timeline::before {
  content: ""; position: absolute; left: 104px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(226, 200, 255, 0.9), rgba(139, 61, 255, 0.7) 50%, rgba(139, 61, 255, 0.1));
  box-shadow: 0 0 12px rgba(150, 70, 255, 0.55);
}
.tl-item { position: relative; }
.tl-item::before {
  content: ""; position: absolute; left: -39px; top: 26px; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0e3ff, #8b3dff 70%);
  box-shadow: 0 0 14px rgba(170, 95, 255, 0.9);
}
.tl-badge {
  position: absolute; left: -138px; top: 18px; width: 84px; text-align: center;
  font-family: var(--font-num); font-weight: 800; font-style: italic; font-size: 14px;
  padding: 7px 4px; border-radius: 11px; color: #24063f;
  background: linear-gradient(180deg, #eadaff, #b57bff 60%, #8b3dff);
  box-shadow: 0 0 16px rgba(160, 85, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.tl-card { padding: 22px 26px; }
.tl-card p { color: #e5dcf6; font-size: 15.5px; line-height: 1.68; }
.tl-card b { color: var(--lav); }

/* ---------------- hero 3D extras ---------------- */
.hero-coin-wrap { perspective: 1000px; }
.hero-ring {
  position: absolute; left: 50%; top: 50%;
  width: 116%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 12%, rgba(200, 140, 255, 0.65) 16%, transparent 22% 58%, rgba(255, 95, 251, 0.4) 63%, transparent 70%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: ringSpin 14s linear infinite;
}
.hero-ring--2 { width: 132%; animation-duration: 22s; animation-direction: reverse; opacity: .6; }
@keyframes ringSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.mini-coin {
  position: absolute; pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(160, 85, 255, 0.5)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6));
  will-change: transform;
}
.mc-1 { width: 64px; left: -4%; top: 12%; animation: floaty 5.5s ease-in-out infinite; }
.mc-2 { width: 44px; right: -2%; top: 4%; animation: floaty 6.8s ease-in-out infinite 0.8s; }
.mc-3 { width: 52px; right: 4%; bottom: 6%; animation: floaty 6s ease-in-out infinite 1.6s; }
@media (prefers-reduced-motion: reduce) { .mini-coin, .hero-ring { animation: none; } }

/* tilt glare */
.glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.14), transparent 55%);
  opacity: 0; transition: opacity .25s;
}
[data-tilt]:hover .glare { opacity: 1; }

/* ---------------- ecosystem spin rings ---------------- */
#orbit.is-orbit::before, #orbit.is-orbit::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  border: 1.5px dashed rgba(170, 100, 255, 0.3); border-radius: 50%; pointer-events: none;
}
#orbit.is-orbit::before { width: 420px; height: 420px; animation: ringSpin 40s linear infinite; }
#orbit.is-orbit::after { width: 620px; height: 620px; animation: ringSpin 60s linear infinite reverse; border-color: rgba(255, 95, 251, 0.18); }

/* ---------------- distribution total pulse ---------------- */
.dist-total { animation: totalPulse 3.2s ease-in-out infinite; }
@keyframes totalPulse {
  0%, 100% { box-shadow: 0 0 30px rgba(155, 80, 255, 0.32), 0 16px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
  50% { box-shadow: 0 0 52px rgba(170, 95, 255, 0.55), 0 16px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
}
@media (prefers-reduced-motion: reduce) { .dist-total { animation: none; } }

/* ---------------- mobile menu close ---------------- */
.menu-close {
  position: absolute; top: 18px; right: 18px;
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(30, 10, 62, 0.7); border: 1.5px solid var(--line);
  color: var(--lav-2); font-size: 20px;
  opacity: 0; transition: opacity .3s ease .1s;
}
.mobile-menu.open .menu-close { opacity: 1; }

/* ---------------- app bottom nav ---------------- */
.bottom-nav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 8px; z-index: 120;
  width: min(430px, calc(100% - 20px));
  display: none;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  border-radius: 18px;
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, rgba(20, 7, 46, 0.94), rgba(10, 3, 28, 0.97)) padding-box,
    linear-gradient(160deg, rgba(240, 220, 255, 0.6), rgba(139, 61, 255, 0.55) 35%, rgba(70, 25, 140, 0.45) 65%, rgba(190, 130, 255, 0.6)) border-box;
  box-shadow: 0 -4px 22px rgba(0, 0, 0, 0.5), 0 0 18px rgba(139, 61, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}
.bn-item {
  display: grid; justify-items: center; gap: 1px;
  padding: 5px 2px 4px; border-radius: 12px;
  background: none; border: none;
  color: var(--text-faint);
  font-family: var(--font-lbl); font-weight: 700; font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase;
  transition: color .2s;
  min-height: 44px;
}
.bn-item svg { width: 19px; height: 19px; }
.bn-item.active, .bn-item:active { color: #fff; }
.bn-item.active svg { filter: drop-shadow(0 0 8px rgba(190, 120, 255, 0.9)); color: var(--lav-2); }
.bn-hub { transform: translateY(-8px); }
.bn-hub-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #efdcff 0%, #c084fc 35%, #8b3dff 100%);
  box-shadow: 0 0 16px rgba(160, 85, 255, 0.6), 0 5px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.bn-hub-btn img { border-radius: 50%; width: 26px; height: 26px; }
.bn-hub.active .bn-hub-btn { box-shadow: 0 0 26px rgba(190, 110, 255, 0.95), 0 5px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.65); }

@media (max-width: 820px) {
  .bottom-nav { display: grid; }
  .nav-burger { display: none; }
  body { padding-bottom: 72px; }
  .toast { bottom: 84px; }
  .mobile-menu { padding-bottom: 86px; }
  footer { padding-bottom: 34px; }
}
@media (max-width: 700px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stats-strip .stat-card:last-child { grid-column: span 2; }
  .timeline { padding-left: 0; }
  .timeline::before { left: 7px; }
  .tl-item::before { left: 2px; top: 15px; }
  .tl-badge { position: static; display: inline-block; width: auto; margin: 0 0 8px 26px; padding: 6px 16px; }
  .tl-card { margin-left: 26px; }
}
.hero-coin-wrap.in { transition: opacity .7s ease; }