/**
 * Cashard Premium Enhancements CSS v1.0
 * Advanced visual polish: glass morphism, number flip, conic borders,
 * step animations, typography upgrades, scroll reveals
 */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&display=swap');

/* ── Number Flip Animation ───────────────────────────────── */
@keyframes numberFlip {
  0%   { transform:translateY(0);opacity:1; }
  40%  { transform:translateY(-8px);opacity:0; }
  60%  { transform:translateY(8px);opacity:0; }
  100% { transform:translateY(0);opacity:1; }
}
.payout-value.updating { animation:numberFlip .35s ease-in-out; }

/* ── Glass Morphism Sidebar ──────────────────────────────── */
aside[aria-label] {
  background: linear-gradient(145deg,rgba(28,32,38,.95),rgba(20,23,30,.98)) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.6),
              inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* ── Conic Gradient Card Hover ───────────────────────────── */
.card-grid-item:hover .card-gradient {
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.card-grid-item {
  position: relative;
}
.card-grid-item::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  background: conic-gradient(from var(--angle,0deg),transparent 20%,rgba(255,184,0,.5) 40%,rgba(0,208,156,.4) 60%,transparent 80%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  z-index: 0;
}
.card-grid-item:hover::before { opacity: 1; }
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.card-grid-item:hover {
  --angle: 360deg;
  transition: --angle 2s linear;
}

/* ── Step Completion Checkmark ───────────────────────────── */
@keyframes checkDraw {
  0%   { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}
.cashard-step-check {
  display: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.cashard-step-check.show {
  display: inline-block;
  animation: checkDraw .4s ease forwards;
}
.cashard-step-check path {
  stroke: #00d09c;
  stroke-width: 3;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  fill: none;
  animation: checkDraw .4s .1s ease forwards;
}

/* ── Panel Eyebrow Highlight ─────────────────────────────── */
.panel-title-eyebrow {
  background: linear-gradient(90deg,rgba(255,184,0,.08),transparent);
  border-left: 3px solid #ffb800;
  padding: 2px 8px;
  border-radius: 0 6px 6px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #ffb800;
  margin-bottom: 8px;
  display: inline-block;
}

/* ── Heading Typography Upgrade ──────────────────────────── */
h1.hero-title, .hero-title {
  font-family: 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
  letter-spacing: -.02em;
  line-height: 1.15;
}
h2.panel-title {
  font-family: 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
}

/* ── Scroll Reveal ───────────────────────────────────────── */
.cashard-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.cashard-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── Payout Unlocked State ───────────────────────────────── */
@keyframes payoutGlow {
  0%,100% { box-shadow: 0 0 0 rgba(0,208,156,0); }
  50%      { box-shadow: 0 0 30px rgba(0,208,156,.4); }
}
.payout-card.glow-active { animation: payoutGlow .8s ease; }

/* ── Rate Change Badge ───────────────────────────────────── */
.cashard-rate-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}
.cashard-rate-badge.up { background: rgba(0,208,156,.1);color:#00d09c;border:1px solid rgba(0,208,156,.2); }
.cashard-rate-badge.hot { background: rgba(255,107,0,.1);color:#ff6b35;border:1px solid rgba(255,107,0,.2); }

/* ── Trust Strip ─────────────────────────────────────────── */
.cashard-stats-strip {
  background: linear-gradient(145deg, rgba(255,184,0,.04), rgba(0,208,156,.03)) !important;
}
.cashard-stat-val {
  background: linear-gradient(135deg,#f8f9fa,#d1d5db);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cashard-stat-val.green {
  background: linear-gradient(135deg,#00d09c,#00b386);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cashard-stat-val.gold {
  background: linear-gradient(135deg,#ffb800,#ff8c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Scroll Reveal init ──────────────────────────────────── */
/* Applied via JS below */