/* ==========================================================================
   app.css  --  additions layered on top of the original index.css.
   index.css is shipped byte-for-byte as served by the original site;
   everything the React bundle used to inject at runtime lives here instead.
   ========================================================================== */

/* A `display:` rule always beats the HTML `hidden` attribute -- force it. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------- reveal */
.gm-rv,
.gm-rv-sm,
.gm-rv-lg,
.gm-rv-pop {
  opacity: 0;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.gm-rv     { transform: translateY(24px); }
.gm-rv-sm  { transform: translateY(20px); }
.gm-rv-lg  { transform: translateY(32px); }
.gm-rv-pop { transform: translateY(12px) scale(.9); }

.gm-rv.in,
.gm-rv-sm.in,
.gm-rv-lg.in,
.gm-rv-pop.in {
  opacity: 1;
  transform: none;
}

/* accent underline that wipes in */
.gm-bar {
  transform: scaleX(0);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1) .12s;
}
.gm-bar.in { transform: scaleX(1); }

/* big numbers that pop */
.gm-pop {
  opacity: 0;
  transform: scale(.7);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.gm-pop.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------- hero words */
.gm-word { animation: gm-word-in .8s cubic-bezier(.22, 1, .36, 1) both; }
.gm-word:nth-child(2) { animation-delay: .12s; }
@keyframes gm-word-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- hovers */
.gm-btn { transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; }
.gm-btn:hover  { transform: scale(1.035); }
.gm-btn:active { transform: scale(.985); }

.gm-lift { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.gm-lift:hover { transform: translateY(-4px); border-color: rgba(122, 162, 247, .4); }

.gm-chip { transition: border-color .2s ease, color .2s ease, background .2s ease; }
.gm-chip:hover { border-color: var(--accent); color: var(--accent); background: rgba(122, 162, 247, .1); }

.gm-spin-hover { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.gm-spin-hover:hover { transform: rotate(360deg) scale(1.08); }

/* ------------------------------------------------------------- nav */
#nav.gm-scrolled {
  background: rgba(18, 22, 34, .85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

/* ------------------------------------------------------------- checker */
#wallet:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(122, 162, 247, .16); }
#wallet::placeholder { color: var(--text-faint); }

.gm-spin { animation: gm-spin .8s linear infinite; }

.gm-row:last-child { border-bottom: none !important; }
.gm-row:hover { background: rgba(122, 162, 247, .05); }

.gm-chev.open { transform: rotate(180deg); }

/* ------------------------------------------------------------- marquee */
.gm-marquee-track { white-space: nowrap; }
.gm-marquee { cursor: default; }

/* ------------------------------------------------------------- a11y */
@media (prefers-reduced-motion: reduce) {
  .gm-rv, .gm-rv-sm, .gm-rv-lg, .gm-rv-pop, .gm-bar, .gm-pop {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .gm-marquee-track { animation: none !important; }
  .gm-word { animation: none !important; }
}