/*
 * css/extra.css: what Ponbio adds on top of css/site.css (the design system's compiled utilities).
 * Keep additions small and named pb-*; prefer the utilities that already exist in site.css.
 */

/* ---- brand lockup: the triangle mark plus the wordmark */
.pb-logo { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.pb-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
@media (min-width: 640px) { .pb-wordmark { font-size: 22px; } }

/* ---- without JavaScript nothing waits for a reveal */
html:not(.js) .fx, html:not(.js) .reveal { opacity: 1; transform: none; }
html:not(.js) .wr { transform: none; }
html:not(.js) .sw { opacity: 1 !important; }
/* the typed headline: its words are in the markup for readers without JavaScript, and hidden until typing starts */
html.js [data-typed]:not([data-typed="on"]) > span { visibility: hidden; }

/* ---- the $PONBIO link and Copy CA before launch */
.pb-soon {
  margin-left: 0.4em;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-pb-green);
}
[data-shell="buy"][aria-disabled="true"] { cursor: default; }
[data-shell="buy"][aria-disabled="true"]:hover { color: inherit; }
[data-shell="ca"]:disabled { opacity: 0.45; cursor: default; }
[data-shell="ca"]:disabled:hover { color: inherit; }

/* ---- toasts */
.pb-toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
  width: min(92vw, 420px);
}
.pb-toast {
  pointer-events: auto;
  max-width: 100%;
  border: 1px solid #ffffff24;
  background: var(--color-ink);
  color: #fff;
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.45;
  border-radius: 999px;
  box-shadow: 0 10px 30px #0000002e;
  animation: fadeSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pb-toast[data-kind="error"] { background: #7f1d1d; }
.pb-toast[data-kind="success"] { background: #0a6b3c; }

:focus-visible { outline: 2px solid var(--color-pb-green); outline-offset: 2px; }

/* ---- word effects wait for their script: no flash of finished text before it splits the words */
html.js [data-wr]:not([data-wr="ready"]) { visibility: hidden; }
html.js [data-sw]:not([data-sw="ready"]) { opacity: 0.18; }

/* ---- site.css scrolls smoothly for everyone; people who asked for less motion get instant jumps */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}