/* ═══════════════════════════════════════════════════════
   SPARK — animations.css   Premium animation system
   ═══════════════════════════════════════════════════════ */

/* ─── EASE TOKENS ─── */
:root {
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit:   cubic-bezier(0.4, 0, 1, 1);
}

/* ════════════════════════════════════════════════
   KEYFRAMES
   ════════════════════════════════════════════════ */

@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes fadeOut { from{opacity:1} to{opacity:0} }

@keyframes slideUpFade {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes slideDownFade {
  from { opacity:0; transform:translateY(-18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes slideRightIn {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}

@keyframes scaleIn {
  from { opacity:0; transform:scale(0.88); }
  to   { opacity:1; transform:scale(1); }
}

@keyframes springPop {
  0%   { transform:scale(1); }
  35%  { transform:scale(1.2); }
  65%  { transform:scale(0.93); }
  100% { transform:scale(1); }
}

@keyframes bounceIn {
  0%   { transform:scale(0.3); opacity:0; }
  60%  { transform:scale(1.1); opacity:1; }
  80%  { transform:scale(0.95); }
  100% { transform:scale(1); }
}

/* Card staggered entrance */
@keyframes cardReveal {
  from { opacity:0; transform:translateY(30px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* Click ripple */
@keyframes rippleOut {
  from { transform:scale(0); opacity:0.55; }
  to   { transform:scale(5);  opacity:0; }
}

/* Iridescent colour shimmer */
@keyframes iridescentShift {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

/* Glow breathe */
@keyframes glowBreathe {
  0%,100% { opacity:0.6; }
  50%      { opacity:1; }
}

/* Skeleton loading wave */
@keyframes skelWave {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}

/* SVG stroke draw */
@keyframes strokeDraw {
  from { stroke-dashoffset: var(--path-len, 320); }
  to   { stroke-dashoffset: 0; }
}

/* Per-letter wordmark entry */
@keyframes letterEntry {
  from { opacity:0; transform:translateY(36px) rotateX(-90deg) scale(0.85); filter: blur(5px); }
  to   { opacity:1; transform:translateY(0) rotateX(0deg) scale(1); filter: blur(0); }
}

/* Decorative ring expand */
@keyframes ringExpand {
  from { opacity:0; transform:scale(0.5); }
  to   { opacity:1; transform:scale(1); }
}

/* Particle burst */
@keyframes particleBurst {
  0%   { transform:translate(0,0) scale(1); opacity:1; }
  100% { transform:translate(var(--ptx,0px), var(--pty,0px)) scale(0); opacity:0; }
}

@keyframes introExit {
  0%   { transform: scale(1); filter: blur(0); opacity: 1; }
  100% { transform: scale(1.08); filter: blur(12px); opacity: 0; }
}

/* Tab icon bounce on switch */
@keyframes tabBounce {
  0%   { transform:translateY(0) scale(1); }
  30%  { transform:translateY(-7px) scale(1.15); }
  60%  { transform:translateY(2px) scale(0.94); }
  100% { transform:translateY(0) scale(1); }
}

/* Number reveal blur-in */
@keyframes numIn {
  from { opacity:0; filter:blur(8px); transform:translateY(12px); }
  to   { opacity:1; filter:blur(0);   transform:translateY(0); }
}

/* Toast slide up */
@keyframes toastReveal {
  from { opacity:0; transform:translateX(-50%) translateY(16px) scale(0.9); }
  to   { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}

/* Spinner */
@keyframes spinCW { to { transform:rotate(360deg); } }

/* Observatory float */
@keyframes obsFloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-5px); }
}


/* ════════════════════════════════════════════════
   INTRO SCREEN v2 — "SINGULARITY"

   ╔══ Timeline (ms) ══════════════════╗
   │  0    canvas burst + bg fade      │
   │ 50    glow fades in               │
   │ 50    S-glow path draws (420ms)   │
   │ 80    S-main path draws (420ms)   │
   │280    orbit ring rotates in       │
   │440    dot–top flash               │
   │520    dot–bot flash               │
   │560    scan beam sweeps (380ms)    │
   │630    wordmark appears            │
   │680    tagline condenses in        │
   │1250   exit begins (520ms)         │
   ╚═══════════════════════════════════╝
════════════════════════════════════════════════ */

#sparkIntro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #05060F);
  overflow: hidden;
}

#sparkIntro.si-hidden { display: none; }

#sparkIntro.si-exiting {
  animation: siExit 0.52s cubic-bezier(0.55, 0, 1, 0.45) forwards;
  pointer-events: none;
}

/* While intro plays, keep launchOverlay hidden */
body.intro-active #launchOverlay { display: none !important; }

@keyframes siExit {
  0%   { opacity: 1; transform: scale(1);     filter: blur(0px);  }
  30%  { opacity: 1; transform: scale(0.975); filter: blur(0px);  }
  100% { opacity: 0; transform: scale(1.04);  filter: blur(11px); }
}

/* Background: focused deep-space radial bloom */
.si-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 46% at 50% 44%, rgba(123,92,250,0.17) 0%, transparent 60%),
    radial-gradient(ellipse 80% 65% at 50% 58%, rgba(232,90,160,0.05) 0%, transparent 55%),
    var(--bg, #05060F);
  opacity: 0;
  animation: fadeIn 0.22s ease both;
}

/* Canvas: burst rays + pulse rings (no random particles) */
#siCanvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Core: centered flex column */
.si-core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}

/* ── Logo zone ──────────────────── */

.si-logo-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}

/* Ambient glow behind logo */
.si-glow {
  position: absolute;
  width: 202px;
  height: 202px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(123, 92,250,0.58) 0%,
    rgba(232, 90,160,0.20) 38%,
    transparent            68%
  );
  filter: blur(19px);
  opacity: 0;
  animation:
    fadeIn           0.55s ease 0.05s both,
    siGlowBreathe    2.6s  ease-in-out 0.88s infinite;
}

@keyframes siGlowBreathe {
  0%,100% { opacity: 0.72; transform: scale(1);    }
  50%     { opacity: 1.00; transform: scale(1.09); }
}

/* Orbit ring: conic gradient border that rotates in */
.si-orbit-ring {
  position: absolute;
  width: 114px;
  height: 114px;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg, #05060F), var(--bg, #05060F)) padding-box,
    conic-gradient(
      rgba(155, 95,255,0.00)   0deg,
      rgba(155, 95,255,0.64)  66deg,
      rgba(232, 90,160,0.56) 136deg,
      rgba(232,197, 90,0.42) 208deg,
      rgba( 90,232,197,0.22) 280deg,
      rgba(155, 95,255,0.00) 360deg
    ) border-box;
  opacity: 0;
  animation: siOrbitIn 0.52s cubic-bezier(0.22,1,0.36,1) 0.28s both;
}

@keyframes siOrbitIn {
  from { opacity: 0; transform: rotate(-55deg) scale(0.82); }
  to   { opacity: 1; transform: rotate(0deg)   scale(1);    }
}

/* SVG logo */
.si-logo {
  width: 83px;
  height: 83px;
  position: relative;
  z-index: 2;
  animation: siLogoGlow 2.6s ease-in-out 0.90s infinite;
}

@keyframes siLogoGlow {
  0%,100% {
    filter:
      drop-shadow(0 0 7px  rgba(155, 95,255,0.62))
      drop-shadow(0 0 20px rgba(155, 95,255,0.18));
  }
  50% {
    filter:
      drop-shadow(0 0 15px rgba(155, 95,255,0.98))
      drop-shadow(0 0 38px rgba(232, 90,160,0.46));
  }
}

/* Blurred glow path (draws just ahead of crisp path) */
.si-s-glow {
  stroke-dasharray: 310;
  stroke-dashoffset: 310;
  opacity: 0.48;
  animation: strokeDraw 0.42s cubic-bezier(0.37,0,0.63,1) 0.05s both;
}

/* Main S-path */
.si-s-path {
  stroke-dasharray: 310;
  stroke-dashoffset: 310;
  animation: strokeDraw 0.42s cubic-bezier(0.37,0,0.63,1) 0.08s both;
}

/* Endpoint dots: flash burst then settle */
.si-dot--top {
  opacity: 0;
  transform-origin: 35px 22px;
  animation: siDotFlash 0.44s cubic-bezier(0.34,1.56,0.64,1) 0.44s both;
}
.si-dot--bot {
  opacity: 0;
  transform-origin: 65px 78px;
  animation: siDotFlash 0.44s cubic-bezier(0.34,1.56,0.64,1) 0.52s both;
}

@keyframes siDotFlash {
  0%   { opacity: 0; transform: scale(0);    }
  52%  { opacity: 1; transform: scale(2.05); }
  78%  {             transform: scale(0.88); }
  100% { opacity: 1; transform: scale(1);    }
}

/* ── Wordmark ───────────────────── */

/* Overflow-clip wrapper */
.si-wordmark-outer {
  position: relative;
  overflow: hidden;
  padding: 2px 1px 5px;
}

/* Light scan beam sweeping left → right */
.si-scan-beam {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 76px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    90deg,
    transparent               0%,
    rgba(155, 95,255,0.15)  22%,
    rgba(255,255,255,0.62)  50%,
    rgba(232,197, 90,0.18)  78%,
    transparent             100%
  );
  animation: siScanSweep 0.38s cubic-bezier(0.37,0,0.63,1) 0.56s both;
}

@keyframes siScanSweep {
  from { transform: translateX(-82px); }
  to   { transform: translateX(300px); }
}

/* Wordmark: all letters appear simultaneously as scan passes */
.si-wordmark {
  font-family: 'Syne', sans-serif;
  font-size: 3.14rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  padding-right: 0.22em; /* balance right side */
  background: linear-gradient(135deg, #9B5FFF 0%, #E85AA0 50%, #E8C55A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  animation: fadeIn 0.01s 0.63s both;
}

/* Tagline: letter-spacing condenses from wide to normal */
.si-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.79rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.24);
  margin-top: 8px;
  opacity: 0;
  animation: siTaglineReveal 0.46s cubic-bezier(0.37,0,0.63,1) 0.68s both;
}

@keyframes siTaglineReveal {
  from { opacity: 0; transform: translateY(5px); letter-spacing: 0.44em; }
  to   { opacity: 1; transform: translateY(0);   letter-spacing: 0.28em; }
}


/* ════════════════════════════════════════════════
   CINEMATIC INTRO  #cinematicIntro
   First-visit + long-absence brand film (~6s).
   Sits above #sparkIntro (z-index 10001 vs 10000).
════════════════════════════════════════════════ */

#cinematicIntro {
  position: fixed;
  inset: 0;
  z-index: 10001;
  overflow: hidden;
  background: #08070c;
}

#cinematicIntro.ci-hidden { display: none; }

#ciCanvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Fade-to-dark overlay used for the exit transition */
#ciFadeOverlay {
  position: absolute;
  inset: 0;
  background: #08070c;
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 1, 1);
}
#ciFadeOverlay.active { opacity: 1; }

/* Suppress cinematic for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  #cinematicIntro { display: none !important; }
}


/* ════════════════════════════════════════════════
   RIPPLE
   ════════════════════════════════════════════════ */

.spark-ripple {
  position: absolute;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin: -3px;
  background: rgba(255,255,255,0.22);
  pointer-events: none;
  animation: rippleOut 0.65s var(--ease-smooth) forwards;
}

/* ════════════════════════════════════════════════
   SKELETON LOADER
   ════════════════════════════════════════════════ */

.skel {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 100%
  );
  background-size: 200% 100%;
  animation: skelWave 1.8s ease infinite;
  border-radius: 6px;
}

/* ════════════════════════════════════════════════
   IRIDESCENT TEXT UTILITY
   ════════════════════════════════════════════════ */

.ir-text {
  background: linear-gradient(
    90deg,
    #9B5FFF  0%,
    #E85AA0 22%,
    #E8C55A 44%,
    #5AE8C5 66%,
    #9B5FFF 88%,
    #E85AA0 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: iridescentShift 7s linear infinite;
}

/* ════════════════════════════════════════════════
   SCROLL REVEAL
   ════════════════════════════════════════════════ */

.sr-init {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.5s var(--ease-enter),
    transform 0.5s var(--ease-enter);
  transition-delay: var(--sr-delay, 0ms);
}
.sr-init.sr-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════
   NUMBER COUNT-UP
   ════════════════════════════════════════════════ */

.num-in {
  display: inline-block;
  animation: numIn 0.5s var(--ease-enter) forwards;
}

/* ════════════════════════════════════════════════
   V3 — STAR FIELD
   ════════════════════════════════════════════════ */

@keyframes starTwinkle {
  0%,100% { opacity: var(--star-min, 0.15); transform: scale(1); }
  50%      { opacity: var(--star-max, 0.7);  transform: scale(1.4); }
}

@keyframes starTwinkleMobile {
  0%,100% { opacity: var(--star-min, 0.15); }
  50%      { opacity: var(--star-max, 0.7); }
}

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

.star-dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: starTwinkle var(--star-dur, 3s) var(--star-del, 0s) ease-in-out infinite;
}

/* ════════════════════════════════════════════════
   V3 — INVEST BUTTON PULSE RING
   ════════════════════════════════════════════════ */

@keyframes pulseRingOut {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(2.4);  opacity: 0; }
}

.binv-wrap {
  position: relative;
  flex: 1;
}
.binv-wrap .binv {
  width: 100%;
}
.binv-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 2px solid rgba(var(--vl-rgb, 123,92,250), 0.6);
  pointer-events: none;
  animation: pulseRingOut 2.6s var(--ease-smooth) 1.8s infinite;
}

/* ════════════════════════════════════════════════
   V3 — CARD AURORA (inner glow follows cursor)
   ════════════════════════════════════════════════ */

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    300px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--vl-rgb, 123,92,250), 0.12) 0%,
    transparent 70%
  );
  transition: opacity 0.4s ease;
  z-index: 0;
}
.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════
   V3 — ANIMATED CARD BORDER ON HOVER
   ════════════════════════════════════════════════ */

@keyframes borderShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.card:hover {
  --card-animated-border: 1;
}

/* ════════════════════════════════════════════════
   V3 — INVESTMENT PROGRESS BAR
   ════════════════════════════════════════════════ */

@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--prog, 0%); }
}

.inv-progress-wrap {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.inv-progress-bar {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--vl, #7B5CFA), var(--ac, #E8C55A));
  width: 0%;
  animation: progressFill 1.2s var(--ease-enter) 0.4s forwards;
}

/* ════════════════════════════════════════════════
   V3 — TOAST COLOUR VARIANTS
   ════════════════════════════════════════════════ */

#toast {
  border-left: 3px solid transparent;
}
#toast.toast-success {
  background: rgba(10,30,25,0.95) !important;
  border-left-color: var(--ac2, #5AE8C5);
  color: var(--ac2, #5AE8C5) !important;
}
#toast.toast-error {
  background: rgba(30,8,12,0.95) !important;
  border-left-color: var(--red, #E85A7A);
  color: #fff !important;
}
#toast.toast-info {
  background: rgba(8,10,28,0.95) !important;
  border-left-color: var(--vl, #7B5CFA);
  color: #fff !important;
}

/* ════════════════════════════════════════════════
   V3 — LEADERBOARD PODIUM GLOW
   ════════════════════════════════════════════════ */

.li-rank-gold   { box-shadow: 0 0 18px rgba(255,215,0,0.35) !important; }
.li-rank-silver { box-shadow: 0 0 12px rgba(192,192,192,0.2) !important; }
.li-rank-bronze { box-shadow: 0 0 12px rgba(205,127,50,0.2) !important; }

/* ════════════════════════════════════════════════
   V3 — MOBILE HEADER SCROLL-HIDE
   ════════════════════════════════════════════════ */

@keyframes headerSlideUp   { to { transform: translateY(-100%); } }
@keyframes headerSlideDown { to { transform: translateY(0); } }

header.hdr-hidden { transform: translateY(-100%); }
header { transition: transform 0.3s var(--ease-smooth); }

/* ════════════════════════════════════════════════
   V3 — MOBILE SWIPE PARALLAX HINT
   ════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .card {
    transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s ease, opacity 0.35s ease;
  }
  /* Haptic-feel spring on tap, except when tapping buttons/links */
  .card:active:not(:has(button:active)):not(:has(a:active)) {
    transform: scale(0.985) !important;
  }
  /* Full-bleed mobile cards */
  .cards {
    padding: 12px 0;
    gap: 10px;
  }
  .card {
    border-radius: 16px;
    margin: 0 14px;
  }
  /* Invest button full-width on mobile */
  .cact {
    gap: 8px;
  }
}

/* ════════════════════════════════════════════════
   V3 — NUMBER GLOW (balance update flash)
   ════════════════════════════════════════════════ */

@keyframes spkGlow {
  0%   { text-shadow: 0 0 0px transparent; }
  35%  { text-shadow: 0 0 18px var(--ac-glow, rgba(232,197,90,0.7)); }
  100% { text-shadow: 0 0 0px transparent; }
}
.spk-glow {
  animation: spkGlow 1.1s var(--ease-smooth) forwards;
}

/* ════════════════════════════════════════════════
   V3 — MOBILE BOTTOM NAV ACTIVE PILL
   ════════════════════════════════════════════════ */

@keyframes pillSlide {
  from { opacity: 0; transform: scaleX(0.6); }
  to   { opacity: 1; transform: scaleX(1); }
}
.mob-tab-pill {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--vl, #7B5CFA);
  box-shadow: 0 0 8px rgba(var(--vl-rgb, 123,92,250), 0.6);
  display: none;
  animation: pillSlide 0.28s var(--ease-spring) forwards;
}
.mob-tab.active .mob-tab-pill { display: block; }
.mob-tab::after { display: none; } /* disable old dot */

/* ════════════════════════════════════════════════
   REDUCED MOTION — turn off everything
   ════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #sparkIntro       { display: none !important; }
  #sparkBg          { display: none !important; }
  .binv-wrap::after { display: none !important; }
  .card::after      { display: none !important; }
  .ir-text {
    background: linear-gradient(90deg, #9B5FFF, #E8C55A);
    background-size: 100%;
    animation: none !important;
  }
  .si-s-path { stroke-dashoffset: 0 !important; animation: none !important; }
  .inv-progress-bar { animation: none !important; width: var(--prog, 0%); }
}

/* Disable heavy aurora on coarse-pointer (mobile/tablet) devices */
@media (pointer: coarse) {
  .card::after { display: none; }
  .binv-wrap::after { animation-duration: 4s; opacity: 0.5; }
  #sparkBg .star-dot {
    animation-name: starTwinkleMobile !important;
    animation-duration: calc(var(--star-dur, 3s) * 2) !important;
    will-change: opacity;
    transform: none !important;
  }
}

/* Disable orbit animations when coming soon is active to save mobile CPU/GPU */
.obs-shell:has(~ .obs-coming-soon) .obs-orbit,
.obs-coming-soon ~ .obs-shell .obs-orbit {
  animation: none !important;
}

/* ════════════════════════════════════════════════
   HIGH-PERFORMANCE HARDWARE GPU COMPOSITING
   ════════════════════════════════════════════════ */

/* Force GPU promotion to bypass costly main-thread repaint cycles */
.card,
.mp-portal,
.spark-ripple,
#toast,
.chat-bubble-context {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Modern CSS Containment: skip offscreen paint & layout operations */
.li,
.trend-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 68px; /* Average height budget for smooth scroll */
}