/* ============================================================
   TRUMPONI — Components: buttons, chips, cards, headers,
   noodle dividers, toasts, skeletons, stamps
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out),
              background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1);
  user-select: none;
  min-height: 48px; /* comfortable touch target */
}
.btn:active { transform: translateY(1px) scale(.985); }

.btn--gold {
  background: var(--gold-grad);
  color: #2A1E07;
  box-shadow: 0 10px 26px -10px rgba(227, 179, 65, .55), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(227, 179, 65, .7), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* shine sweep on hover */
.btn--gold::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease-out);
  pointer-events: none;
}
.btn--gold:hover::after { transform: translateX(120%); }

.btn--outline {
  border-color: var(--c-line-strong);
  color: var(--c-gold);
  background: rgba(227, 179, 65, .05);
}
.btn--outline:hover {
  background: rgba(227, 179, 65, .14);
  border-color: var(--c-gold);
  transform: translateY(-2px);
}

.btn--ghost {
  color: var(--c-cream-dim);
  border-color: rgba(242, 231, 213, .18);
}
.btn--ghost:hover { color: var(--c-cream); border-color: rgba(242, 231, 213, .45); }

.btn--xl { padding: 1.15rem 2.4rem; font-size: clamp(1rem, 2.5vw, 1.15rem); }

/* Pre-launch state — honest, visible, keyboard friendly */
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  filter: saturate(.75);
}
.btn[aria-disabled="true"]:hover { transform: none; }
.btn__tag {
  font-size: .58rem;
  letter-spacing: .12em;
  padding: .18rem .5rem;
  border-radius: 999px;
  background: rgba(42, 30, 7, .25);
  border: 1px solid currentColor;
  line-height: 1;
}
.btn--outline .btn__tag, .btn--ghost .btn__tag { background: rgba(227, 179, 65, .1); }

/* mono CA preview inside ghost button */
.btn__ca {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: none;
  overflow-wrap: anywhere; /* the 44-char mint must wrap on narrow screens */
}

/* ---------- Chips / badges (state is always text, never color alone) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .32rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: rgba(21, 16, 9, .65);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--c-cream-dim);
  text-transform: uppercase;
  white-space: nowrap;
}
.chip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-pump);
  box-shadow: 0 0 8px var(--c-pump);
  flex: none;
}
.chip--warn .chip__dot { background: var(--c-gold); box-shadow: 0 0 8px var(--c-gold); }
.chip--demo { border-style: dashed; color: var(--c-gold); }
.chip--ticker {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-gold-bright);
  border-color: var(--c-line-strong);
}

/* ---------- Section headers ---------- */
.kicker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.kicker::before, .kicker::after {
  content: '';
  height: 1px;
  width: clamp(1.2rem, 4vw, 3rem);
  background: var(--c-line-strong);
}

.section-title {
  /* long single words (TRUMPONOMICS) must fit the 320px content box */
  font-size: clamp(1.55rem, 5.2vw, 3.4rem);
  font-weight: 900;
  margin-top: .9rem;
}
.section-title .gold {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-sub {
  margin-top: 1rem;
  max-width: 56ch;
  color: var(--c-cream-dim);
  font-size: clamp(.95rem, 1.6vw, 1.08rem);
}
.section__head { text-align: center; display: grid; justify-items: center; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--c-panel-2), var(--c-panel));
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card--tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .18s ease-out, border-color var(--dur-1), box-shadow var(--dur-1);
}
.card--tilt:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-card), var(--glow-gold);
}

/* ---------- Noodle divider (spaghetti separator between sections) ---------- */
.noodle-sep {
  display: block;
  width: min(420px, 72vw);
  margin-inline: auto;
  color: var(--c-gold);
  opacity: .8;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}
/* animated "slurp": dashes travel along the strand when it becomes visible */
.noodle-sep .noodle-path {
  stroke-dasharray: 14 10;
  animation: noodle-slurp 2.6s linear infinite;
}
@keyframes noodle-slurp { to { stroke-dashoffset: -48; } }

/* ---------- Toast ---------- */
.toast-region {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: grid;
  gap: .55rem;
  width: min(92vw, 480px);
  justify-items: center;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: fit-content;
  max-width: 100%;
  padding: .8rem 1.2rem;
  border-radius: 12px;
  background: rgba(28, 21, 12, .96);
  border: 1px solid var(--c-line-strong);
  color: var(--c-cream);
  font-size: .92rem;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .8);
  animation: toast-in var(--dur-2) var(--ease-out);
}
.toast__icon { color: var(--c-gold); font-size: 1.1rem; }
.toast.is-leaving { animation: toast-out var(--dur-1) ease-in forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---------- Skeleton shimmer (stats loading) ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(242, 231, 213, .08);
  min-height: 1em;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(242, 231, 213, .12), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------- Rotated rubber stamp (for the FICTION zone) ---------- */
.stamp {
  --stamp-color: var(--c-wine-bright);
  display: inline-grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 3px double var(--stamp-color);
  color: var(--stamp-color);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-12deg);
  opacity: .9;
  mask-image: var(--noise);
  mask-size: 90px;
  padding: .5rem;
  line-height: 1.5;
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}