/* =========================================================================
   Africa Fund Tracker — UI module styles
   Web Component: <africa-fund-tracker>
   See /research/africa-fund-tracker.md for design rationale.
   Design tokens reflect the Figma source (file jqP0qsjY6PQp2eBcK42Wsb).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

africa-fund-tracker {
  /* Surfaces */
  --aft-outer-bg:        #202020;
  --aft-outer-border:    rgba(255,255,255,0.07);
  --aft-inner-bg:        rgba(0,0,0,0.6);
  --aft-inner-border:    rgba(255,255,255,0.08);
  --aft-track-bg:        #282828;
  --aft-track-border:    rgba(255,255,255,0.07);

  /* Text */
  --aft-text:            #ffffff;
  --aft-text-50:         rgba(255,255,255,0.50);
  --aft-text-79:         rgba(255,255,255,0.79);
  --aft-text-muted:      #adadad;
  --aft-text-faint:      rgba(255,255,255,0.33);
  --aft-text-dim:        rgba(255,255,255,0.40);

  /* Lime (default donor + bar fill) */
  --aft-lime:            #a9f42f;
  --aft-lime-soft:       #d8e46e;
  --aft-lime-50:         rgba(169,244,47,0.50);

  /* Peach / gold (whale + milestone) */
  --aft-peach-border:    #ffaa2b;
  --aft-peach-name:      #ffdda9;
  --aft-peach-amount:    #ffb445;
  --aft-peach-amount-50: rgba(255,180,69,0.49);
  --aft-peach-bg-1:      rgba(255,201,120,0.12);
  --aft-peach-bg-2:      rgba(255,146,57,0.12);
  --aft-milestone-bg-1:  rgba(255,152,35,0.11);
  --aft-milestone-bg-2:  rgba(213,110,0,0.02);
  --aft-milestone-label: rgba(255,232,205,0.8);
  --aft-milestone-amt:   #ffda96;
  --aft-milestone-amt-50: rgba(255,218,150,0.5);
  --aft-milestone-amt-90: rgba(255,218,150,0.9);
  --aft-comet-orange:    #ff9123;
  --aft-comet-orange-2:  #ffcf4c;
  --aft-comet-border:    #fe3700;
  --aft-comet-glow:      rgba(255,188,102,0.29);
  --aft-comet-glow-soft: rgba(255,188,102,0.13);

  /* CTA */
  --aft-cta-bg:          #ffffff;
  --aft-cta-text:        #000000;

  /* Geometry */
  --aft-radius-outer:   10px;
  --aft-radius-inner:   8px;
  --aft-radius-pill:    48px;
  --aft-radius-cta:     40px;
  --aft-pad-outer:      3px;
  --aft-pad-inner:      24px;

  --aft-shadow-card:        0 1px 0 rgba(255,255,255,0.03) inset, 0 24px 60px rgba(0,0,0,0.5);
  --aft-shadow-chip-inset:  inset 0 0.5px 3px rgba(255,255,255,0.07);
  --aft-shadow-inner-inset: inset 0 -1px 5px rgba(255,255,255,0.11);

  --aft-font:           "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Back-compat aliases used elsewhere in this file */
  --aft-bg:             var(--aft-outer-bg);
  --aft-card-bg:        var(--aft-inner-bg);
  --aft-card-inset:     #1a1a1a;
  --aft-fill-1:         var(--aft-lime-soft);
  --aft-fill-2:         var(--aft-lime);
  --aft-fill-hot-1:     #e8ff7a;
  --aft-fill-hot-2:     #a4ff1a;
  --aft-gold-1:         var(--aft-peach-name);
  --aft-gold-2:         var(--aft-peach-amount);

  --aft-easing-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --aft-easing-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --aft-easing-in:     cubic-bezier(0.55, 0, 0.66, 0.6);

  --aft-dur-fast:   180ms;
  --aft-dur-med:    320ms;
  --aft-dur-slow:   600ms;

  display: block;
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  font-family: var(--aft-font);
  color: var(--aft-text);
  font-feature-settings: "ss01", "tnum", "lnum";
  -webkit-font-smoothing: antialiased;
  contain: layout;
}

/* -------------------------------------------------------------------------
   Card
   ------------------------------------------------------------------------- */

.aft-card {
  position: relative;
  background: var(--aft-outer-bg);
  border: 0.5px solid var(--aft-outer-border);
  border-radius: var(--aft-radius-outer);
  padding: var(--aft-pad-outer);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--aft-shadow-card), inset 0 2px 4px rgba(255,255,255,0.03);
  isolation: isolate;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 720ms var(--aft-easing-spring), opacity 480ms var(--aft-easing-out);
}

.aft-card[data-mounted="true"] {
  transform: translateY(0);
  opacity: 1;
}

/* -------------------------------------------------------------------------
   Header — bolt + title + status
   ------------------------------------------------------------------------- */

.aft-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 16px;
  letter-spacing: -0.16px;
  font-weight: 500;
  color: var(--aft-text);
}

.aft-bolt {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--aft-lime);
  filter: drop-shadow(0 0 6px rgba(169, 244, 47, 0.45));
  animation: aft-bolt-pulse 6s var(--aft-easing-out) infinite;
  flex-shrink: 0;
}

.aft-title {
  flex: 1;
  min-width: 0;
}

.aft-bolt svg { width: 100%; height: 100%; }

@keyframes aft-bolt-pulse {
  0%, 92%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(185, 239, 54, 0.55)); }
  94% { transform: scale(1.18); filter: drop-shadow(0 0 14px rgba(185, 239, 54, 0.9)); }
  96% { transform: scale(0.95); filter: drop-shadow(0 0 8px rgba(185, 239, 54, 0.7)); }
}

.aft-bolt[data-strike="true"] {
  animation: aft-bolt-strike 700ms var(--aft-easing-spring);
}

@keyframes aft-bolt-strike {
  0%   { transform: scale(0.4) rotate(-20deg); opacity: 0; }
  40%  { transform: scale(1.4) rotate(8deg); opacity: 1; filter: drop-shadow(0 0 18px rgba(185, 239, 54, 1)); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.aft-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--aft-text-faint);
  letter-spacing: 0.72px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.aft-status-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--aft-lime);
  box-shadow: 0 0 6px rgba(169, 244, 47, 0.7);
  animation: aft-status-pulse 1.8s var(--aft-easing-out) infinite;
}

.aft-status[data-state="reconnecting"] .aft-status-dot { background: #ffb732; box-shadow: 0 0 8px rgba(255, 183, 50, 0.8); }
.aft-status[data-state="offline"]      .aft-status-dot { background: #555; box-shadow: none; animation: none; }

@keyframes aft-status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* -------------------------------------------------------------------------
   Inset (the dark inner panel where the numbers + bar live)
   ------------------------------------------------------------------------- */

.aft-inset {
  background: var(--aft-inner-bg);
  border: 0.5px solid var(--aft-inner-border);
  border-radius: var(--aft-radius-inner);
  padding: 32px 0 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  box-shadow: var(--aft-shadow-inner-inset);
  transition:
    background var(--aft-dur-slow) var(--aft-easing-out),
    box-shadow var(--aft-dur-slow) var(--aft-easing-out);
}

/* Sections that need the horizontal padding */
.aft-counter-section,
.aft-cta-section,
.aft-donors-section,
.aft-milestone-section {
  padding-inline: var(--aft-pad-inner);
}

/* Per-donation tick — soft inner glow only, no border. */
.aft-inset[data-tick="true"] {
  animation: aft-inset-tick 600ms var(--aft-easing-out);
}

@keyframes aft-inset-tick {
  0%   { box-shadow: inset 0 0 0 0 transparent; }
  25%  { box-shadow: inset 0 0 28px rgba(214, 248, 107, 0.06); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}

/* Sustained breathing during burst — overrides the tick */
.aft-card[data-burst="true"] .aft-inset {
  animation: aft-inset-breathe 3.6s ease-in-out infinite;
}

@keyframes aft-inset-breathe {
  0%, 100% { box-shadow: inset 0 0 14px rgba(214, 248, 107, 0.02); }
  50%      { box-shadow: inset 0 0 36px rgba(214, 248, 107, 0.07); }
}

/* -------------------------------------------------------------------------
   Counter
   ------------------------------------------------------------------------- */

.aft-counter-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.aft-counter-wrap {
  display: flex;
  align-items: baseline;
  line-height: 1;
}

.aft-counter {
  display: inline-flex;
  align-items: baseline;
  font-weight: 600;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -2.08px;
  font-variant-numeric: tabular-nums;
  will-change: transform;
}

.aft-counter-currency {
  color: var(--aft-text-50);
  font-weight: 600;
}

.aft-counter-int {
  display: inline-flex;
  position: relative;
  color: var(--aft-text);
  transition: color 240ms var(--aft-easing-out);
}

.aft-counter[data-flash="true"] .aft-counter-int {
  color: var(--aft-lime-soft);
}

.aft-goal {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.16px;
  color: var(--aft-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.aft-overflow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--aft-radius-pill);
  background: linear-gradient(135deg, var(--aft-peach-name), var(--aft-peach-amount));
  color: #1a1306;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 320ms var(--aft-easing-out), transform 480ms var(--aft-easing-spring);
}

.aft-overflow[data-active="true"] {
  opacity: 1;
  transform: scale(1);
}

/* -------------------------------------------------------------------------
   Progress bar
   ------------------------------------------------------------------------- */

.aft-bar-wrap {
  margin-top: 18px;
  display: block;
}

.aft-bar {
  position: relative;
  flex: 1;
  height: 56px;
  background: var(--aft-track-bg);
  border-radius: var(--aft-radius-pill);
  overflow: hidden;
  isolation: isolate;
  transition: background 600ms var(--aft-easing-out);
}

/* When over goal, the track itself shows a subtle gold tint in the stretch
   zone so the bar visually "reveals new territory" rather than the lime
   appearing to shrink. JS sets --aft-goal-bar-pct to where the goal lives. */
.aft-bar[data-over="true"] {
  background: linear-gradient(90deg,
    var(--aft-track-bg) 0%,
    var(--aft-track-bg) calc(var(--aft-goal-bar-pct, 66.67%) - 1%),
    rgba(255, 226, 122, 0.06) var(--aft-goal-bar-pct, 66.67%),
    rgba(255, 226, 122, 0.12) 100%);
}

.aft-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--aft-fill-1), var(--aft-fill-2));
  border-radius: inherit;
  transition: width 720ms var(--aft-easing-spring), background 600ms var(--aft-easing-out);
  will-change: width;
}

.aft-bar[data-hot="true"] .aft-bar-fill {
  background: linear-gradient(90deg, var(--aft-fill-hot-1), var(--aft-fill-hot-2));
}

.aft-bar[data-over="true"] .aft-bar-fill {
  /* JS sets --aft-lime-stop to (goal / total) * 100% so the gold zone
     begins precisely where the goal was reached. */
  background: linear-gradient(90deg,
    var(--aft-fill-1) 0%,
    var(--aft-fill-2) calc(var(--aft-lime-stop, 100%) - 1%),
    var(--aft-gold-1) var(--aft-lime-stop, 100%),
    var(--aft-gold-2) 100%);
}

/* Traveling shine — drifts left to right across the filled portion */
.aft-bar-fill::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.0) 20%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.0) 80%,
    transparent 100%
  );
  animation: aft-shine 4.5s linear infinite;
  pointer-events: none;
}

@keyframes aft-shine {
  0%   { transform: translateX(0%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(350%); opacity: 0; }
}

/* Heartbeat / leading edge — one steady animation regardless of burst state.
   Bar fill gradient (data-hot) already conveys the heat-up. */
.aft-bar-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.85);
  transform: translateX(-50%);
  transition: left 720ms var(--aft-easing-spring);
  pointer-events: none;
  will-change: transform, box-shadow;
}

.aft-bar-edge[data-pulsing="true"] {
  animation: aft-edge-pulse 1.6s ease-in-out infinite;
}

@keyframes aft-edge-pulse {
  0%, 100% {
    box-shadow: 0 0 16px rgba(214, 248, 107, 0.7), 0 0 4px rgba(255,255,255,0.45);
    transform: translateX(-50%) scaleY(0.95);
  }
  50% {
    box-shadow: 0 0 24px rgba(214, 248, 107, 0.95), 0 0 6px rgba(255,255,255,0.75);
    transform: translateX(-50%) scaleY(1.04);
  }
}

/* Notches (milestone ticks) on the bar */
.aft-notch {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 28px;
  background: rgba(255,255,255,0.22);
  transform: translate(-50%, -50%);
  transition: background 320ms var(--aft-easing-out), box-shadow 320ms var(--aft-easing-out);
  pointer-events: none;
}

.aft-notch[data-hit="true"] {
  background: var(--aft-text);
  box-shadow: 0 0 14px var(--aft-fill-2), 0 0 4px #fff;
}

/* Pre-goal: goal flag is a tall neutral notch, no gold halo. */
.aft-notch[data-flag="true"] {
  width: 2px;
  height: 32px;
  background: rgba(255,255,255,0.32);
}

/* Goal reached → light up gold */
.aft-notch[data-flag="true"][data-hit="true"] {
  width: 3px;
  height: 40px;
  background: var(--aft-gold-1);
  box-shadow: 0 0 18px var(--aft-gold-1), 0 0 6px #fff;
}

/* Milestone labels under the bar */
.aft-notch-labels {
  position: relative;
  height: 14px;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--aft-text-faint);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.aft-notch-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  transition: color 320ms var(--aft-easing-out), left 800ms var(--aft-easing-out);
  pointer-events: none;
}

/* Labels at the very ends of the bar get edge-aligned so they don't overflow
   the track when center-anchored on 0% / 100%. */
.aft-notch-label[data-align="right"] { left: auto; transform: none; }
.aft-notch-label[data-align="left"]  { transform: none; }

.aft-notch-label[data-hit="true"] {
  color: var(--aft-text);
}

/* The goal-flag label intentionally matches the other milestone labels —
   the gold flag notch itself carries the celebration, the text stays neutral. */

/* Bursts: ripple emitted from leading edge on donation */
.aft-bar-ripple {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  transform: translate(-50%, -50%) scale(0.4);
  pointer-events: none;
  animation: aft-ripple 700ms var(--aft-easing-out) forwards;
}

@keyframes aft-ripple {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(6);   opacity: 0; }
}

/* -------------------------------------------------------------------------
   Milestone slot — peach gradient card with comet-trail progress
   ------------------------------------------------------------------------- */

.aft-milestone-section {
  /* No horizontal padding — the milestone card has its own 4px inner pad */
  padding-inline: 0;
  padding: 4px;
}

.aft-milestone {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px;
  border: 0.5px solid var(--aft-inner-border);
  border-radius: 6px;
  background: linear-gradient(to top, var(--aft-milestone-bg-1) 11.111%, var(--aft-milestone-bg-2) 109.03%);
  box-shadow: inset 0 -0.4px 8px rgba(255,255,255,0.03);
  overflow: hidden;
  transition: opacity 320ms var(--aft-easing-out), transform 320ms var(--aft-easing-out);
}

.aft-milestone[data-hidden="true"] {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

/* Top row — flag icon + label + target chip */
.aft-milestone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.aft-milestone-label-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.aft-milestone-flag {
  width: 10px;
  height: 12px;
  flex-shrink: 0;
  color: #FFE8CD;
}

.aft-milestone-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.72px;
  color: var(--aft-milestone-label);
  white-space: nowrap;
}

.aft-milestone-target {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--aft-radius-pill);
  background: linear-gradient(to bottom, rgba(254,247,240,0.05), rgba(255,208,120,0.05) 87.93%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: var(--aft-shadow-chip-inset);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12px;
  color: var(--aft-milestone-amt);
  white-space: nowrap;
  flex-shrink: 0;
}

.aft-milestone-target::before {
  content: "$";
  color: var(--aft-milestone-amt-50);
  margin-right: 0;
}

/* Comet — layered trail with progressive blur, bright nucleus at the head */
.aft-comet-wrap {
  position: relative;
  height: 28px;
  padding: 14px 0;
}

.aft-comet-track {
  position: relative;
  width: 100%;
  height: 6px;
}

/* Segmented dots along the track (faint specks) */
.aft-comet-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 220, 170, 0.20) 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 50%, rgba(255, 220, 170, 0.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 44% 50%, rgba(255, 220, 170, 0.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 60% 50%, rgba(255, 220, 170, 0.20) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 50%, rgba(255, 220, 170, 0.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 92% 50%, rgba(255, 220, 170, 0.24) 0 1px, transparent 1.5px);
}

/* The "track" the comet is running along — a long, soft, blurred bar that
   stretches the full width of the card. Static; the comet sits on top of it
   and visually fills it as it progresses. Vertically centered with the dots
   and comet head/trail. */
.aft-comet-ground {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 100px;
  background: rgba(255, 180, 80, 0.14);
  filter: blur(6px);
  pointer-events: none;
}

/* All trail layers anchor at the LEFT edge of the card and extend rightward
   to the head position — so the trail visually starts at the far left of the
   card and grows longer as the comet progresses. JS sets --aft-comet-head-left. */
.aft-comet-trail {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: var(--aft-comet-head-left, 0%);
  min-width: 8px;
  border-radius: 100px;
  pointer-events: none;
  transition: width 600ms var(--aft-easing-out);
}

/* Far layer — tallest, most blurred, faint orange glow from card edge */
.aft-comet-trail--far {
  height: 18px;
  background: linear-gradient(to right,
    rgba(255, 145, 35, 0.00) 0%,
    rgba(255, 145, 35, 0.18) 40%,
    rgba(255, 200, 110, 0.45) 90%,
    rgba(255, 230, 180, 0.55) 100%
  );
  filter: blur(10px);
}

/* Mid layer — main visible trail */
.aft-comet-trail--mid {
  height: 9px;
  background: linear-gradient(to right,
    rgba(255, 145, 35, 0.00) 0%,
    rgba(255, 145, 35, 0.30) 30%,
    rgba(255, 175, 60, 0.65) 65%,
    rgba(255, 220, 150, 0.95) 95%,
    #ffffff 100%
  );
  filter: blur(4px);
}

/* Near layer — bright pre-head zone, occupies the rightmost ~30% of the trail */
.aft-comet-trail--near {
  height: 6px;
  background: linear-gradient(to right,
    rgba(255, 200, 110, 0.00) 0%,
    rgba(255, 200, 110, 0.00) 70%,
    rgba(255, 230, 180, 0.65) 90%,
    rgba(255, 255, 255, 1.00) 100%
  );
  filter: blur(1.5px);
}

/* Head — bright white nucleus with multi-stop halo + subtle ambient pulse */
.aft-comet-head {
  position: absolute;
  top: 50%;
  left: var(--aft-comet-head-left, 0%);
  transform: translate(-50%, -50%);
  width: 12px;
  height: 8px;
  border-radius: 100px;
  background: #ffffff;
  filter: blur(0.4px);
  transition: left 600ms var(--aft-easing-out);
  pointer-events: none;
  z-index: 1;
  animation: aft-comet-head-pulse 2.6s ease-in-out infinite;
}

/* Continuous subtle glow oscillation */
@keyframes aft-comet-head-pulse {
  0%, 100% {
    box-shadow:
      0 0 5px  rgba(255, 255, 255, 0.95),
      0 0 12px rgba(255, 240, 200, 0.55),
      0 0 22px rgba(255, 200, 130, 0.30);
  }
  50% {
    box-shadow:
      0 0 7px  rgba(255, 255, 255, 1),
      0 0 17px rgba(255, 240, 200, 0.80),
      0 0 30px rgba(255, 200, 130, 0.45);
  }
}

/* Donation flare — head briefly intensifies, overrides the ambient pulse */
.aft-comet-head[data-flare="true"] {
  animation: aft-comet-flare 800ms ease-out, aft-comet-head-pulse 2.6s ease-in-out infinite 800ms;
}

@keyframes aft-comet-flare {
  0%   { box-shadow: 0 0 6px rgba(255,255,255,1), 0 0 14px rgba(255,240,200,0.75), 0 0 26px rgba(255,200,130,0.45); }
  30%  { box-shadow: 0 0 12px rgba(255,255,255,1), 0 0 28px rgba(255,240,200,0.95), 0 0 50px rgba(255,200,130,0.6); }
  100% { box-shadow: 0 0 6px rgba(255,255,255,1), 0 0 14px rgba(255,240,200,0.75), 0 0 26px rgba(255,200,130,0.45); }
}

/* Bottom — raised subtitle */
.aft-milestone-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12px;
  text-align: center;
  white-space: nowrap;
  flex-wrap: wrap;
}

.aft-milestone-raised {
  color: var(--aft-milestone-amt-90);
}

.aft-milestone-context {
  color: var(--aft-milestone-amt-50);
}

/* HUD removed in the Figma redesign — "$X to goal" is now the subtitle
   directly under the counter. The hidden element is kept in the DOM for
   any external callers that still reference it, but visually hidden. */
.aft-hud { display: none; }

/* -------------------------------------------------------------------------
   Recent Donors marquee — glassy pills, whale chips animate
   ------------------------------------------------------------------------- */

.aft-donors-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  /* Donors section spans the full width for the marquee mask */
  padding-inline: 0;
}

.aft-donors-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--aft-text-dim);
  text-align: center;
}

.aft-ticker {
  width: 100%;
  height: 26px;
  position: relative;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.aft-ticker-rail {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  will-change: transform;
}

/* Default chip — soft white border + subtle vertical glass gradient */
.aft-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--aft-radius-pill);
  background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(192,192,192,0.05) 87.93%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: var(--aft-shadow-chip-inset);
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.12px;
  line-height: 1.3;
  position: relative;
  overflow: hidden;
}

.aft-ticker-item-name {
  color: var(--aft-text-79);
}

.aft-ticker-item-amount {
  color: var(--aft-lime);
  font-weight: 500;
}

.aft-ticker-item-amount::before {
  content: "$";
  color: var(--aft-lime-50);
  margin-right: 0;
}

/* Whale chip — solid peach border + peach gradient bg */
.aft-ticker-item--whale {
  border-color: var(--aft-peach-border);
  background: linear-gradient(185.6deg, var(--aft-peach-bg-1) 1.3%, var(--aft-peach-bg-2) 102.9%);
}

.aft-ticker-item--whale .aft-ticker-item-name {
  color: var(--aft-peach-name);
}

.aft-ticker-item--whale .aft-ticker-item-amount {
  color: var(--aft-peach-amount);
  font-weight: 600;
}

.aft-ticker-item--whale .aft-ticker-item-amount::before {
  color: var(--aft-peach-amount-50);
}

/* Sheen that travels across the whale chip */
.aft-ticker-item--whale::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 221, 169, 0.0) 30%,
    rgba(255, 221, 169, 0.55) 50%,
    rgba(255, 221, 169, 0.0) 70%,
    transparent 100%
  );
  animation: aft-whale-sheen 3.2s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes aft-whale-sheen {
  0%   { transform: translateX(0%); }
  60%  { transform: translateX(360%); }
  100% { transform: translateX(360%); }
}

.aft-ticker-item--ghost { opacity: 0.4; }

/* Flourish when a new donation chip first enters the visible marquee area */
.aft-ticker-item[data-flourish="true"] {
  animation: aft-ticker-flourish 900ms var(--aft-easing-spring);
  z-index: 1;
}

@keyframes aft-ticker-flourish {
  0%   { transform: scale(0.7);  filter: brightness(1.5); }
  35%  { transform: scale(1.08); filter: brightness(1.6); }
  100% { transform: scale(1);    filter: brightness(1); }
}

/* -------------------------------------------------------------------------
   Notifications — float up from center, below the CTA
   ------------------------------------------------------------------------- */

/* Notifications stack at the top-right of the inset. They live as a direct
   child of .aft-inset so the visible column extends all the way from just
   above the bar up to the very top edge of the black container. */
.aft-notifications {
  position: absolute;
  top: 10px;
  right: 20px;
  /* Height covers the area from just above the bar up to the inset's top */
  height: 124px;
  width: 55%;
  max-width: 240px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  /* Tiny top fade so chips dissolve gracefully at the container edge */
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 100%);
}

.aft-notif {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 7px 12px;
  border-radius: var(--aft-radius-pill);
  background: rgba(28, 28, 28, 0.95);
  backdrop-filter: blur(12px);
  border: 0.5px solid rgba(255,255,255,0.12);
  font-size: 12px;
  line-height: 1.3;
  color: var(--aft-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(14px) scale(0.85);
  will-change: transform, opacity, bottom;
  transition:
    bottom    420ms var(--aft-easing-spring),
    opacity   260ms ease-out,
    transform 360ms var(--aft-easing-spring);
}

.aft-notif[data-entering="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.aft-notif[data-exiting="true"] {
  opacity: 0;
  transform: translateY(-8px) scale(0.94);
}

.aft-notif-name {
  color: var(--aft-text);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.aft-notif-amount {
  color: var(--aft-fill-2);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.aft-notif-amount::before { content: "+$"; color: rgba(214, 248, 107, 0.55); margin-right: 1px; font-weight: 600; }

/* Standard — default styling above */

/* Big tier */
.aft-notif--big {
  padding: 9px 14px;
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.96), rgba(28, 28, 28, 0.96));
  border-color: rgba(169, 244, 47, 0.45);
  box-shadow: 0 0 24px rgba(169, 244, 47, 0.20), 0 8px 24px rgba(0,0,0,0.5);
  font-size: 12px;
}

.aft-notif--big .aft-notif-amount { color: var(--aft-lime); font-size: 13px; }

/* Whale tier — peach accents */
.aft-notif--whale {
  padding: 10px 14px;
  background: linear-gradient(135deg, #1f1700, #0c0c0c);
  border-color: var(--aft-peach-border);
  box-shadow: 0 0 30px rgba(255, 170, 43, 0.30), 0 16px 36px rgba(0,0,0,0.6);
  font-size: 12px;
  gap: 8px;
}

.aft-notif--whale .aft-notif-name { font-size: 13px; font-weight: 600; color: var(--aft-peach-name); }
.aft-notif--whale .aft-notif-amount { font-size: 14px; color: var(--aft-peach-amount); }
.aft-notif--whale .aft-notif-amount::before { color: var(--aft-peach-amount-50); }

/* Aggregate / chaos card */
.aft-notif--aggregate {
  background: linear-gradient(135deg, rgba(255, 90, 30, 0.22), rgba(28, 28, 28, 0.95));
  border-color: rgba(255, 120, 60, 0.4);
}

.aft-notif--aggregate .aft-notif-amount { color: #ffb591; }
.aft-notif--aggregate .aft-notif-amount::before { color: rgba(255, 120, 60, 0.5); }

/* -------------------------------------------------------------------------
   Donate CTA
   ------------------------------------------------------------------------- */

.aft-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: var(--aft-radius-cta);
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  color: var(--aft-cta-text);
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 2;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 10px 28px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(169, 244, 47, 0.10);
  animation: aft-cta-breathe 5s ease-in-out infinite;
  transition:
    transform 320ms var(--aft-easing-spring),
    box-shadow 360ms var(--aft-easing-out);
}

/* Soft ambient glow that gently breathes, like the button is alive */
@keyframes aft-cta-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.05),
      0 10px 28px rgba(0, 0, 0, 0.35),
      0 0 22px rgba(169, 244, 47, 0.08);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 12px 32px rgba(0, 0, 0, 0.4),
      0 0 40px rgba(169, 244, 47, 0.22);
  }
}

.aft-cta:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 14px 36px rgba(0, 0, 0, 0.45),
    0 0 44px rgba(169, 244, 47, 0.28);
  animation-play-state: paused;
}

.aft-cta:active {
  transform: scale(0.975);
  /* Snappy press-down; release uses the longer spring above */
  transition:
    transform 90ms ease-out,
    box-shadow 90ms ease-out;
}

.aft-cta:focus-visible { outline: 2px solid var(--aft-lime); outline-offset: 4px; }

.aft-cta-arrow { transition: transform var(--aft-dur-fast) var(--aft-easing-out); }
.aft-cta:hover .aft-cta-arrow { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   Goal-hit celebration overlay
   ------------------------------------------------------------------------- */

.aft-celebration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 240ms var(--aft-easing-out);
}

.aft-celebration[data-active="true"] { opacity: 1; }

.aft-celebration-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(214, 248, 107, 0.4), transparent 70%);
  animation: aft-flash 700ms var(--aft-easing-out) forwards;
}

@keyframes aft-flash {
  0%   { opacity: 0; transform: scale(0.6); }
  35%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.4); }
}

.aft-confetti-piece {
  position: absolute;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  top: 50%;
  left: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* -------------------------------------------------------------------------
   Burst mode — slow soft outer glow that breathes during high-traffic moments
   ------------------------------------------------------------------------- */

.aft-card {
  /* Smooth fall-off when burst state clears */
  transition: box-shadow 900ms var(--aft-easing-out);
}

.aft-card[data-burst="true"] {
  animation: aft-burst-pulse 3.6s ease-in-out infinite;
}

@keyframes aft-burst-pulse {
  0%, 100% { box-shadow: var(--aft-shadow-card), 0 0 28px -10px rgba(214, 248, 107, 0.14); }
  50%      { box-shadow: var(--aft-shadow-card), 0 0 44px -6px  rgba(214, 248, 107, 0.26); }
}

/* -------------------------------------------------------------------------
   Mobile (< 480px)
   ------------------------------------------------------------------------- */

@media (max-width: 480px) {
  africa-fund-tracker { --aft-pad-card: 12px; --aft-pad-inset: 18px; }
  .aft-bar { height: 48px; }
  .aft-notifications { height: 90px; }
}

/* -------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}