/* ============================================================================
   BillSathi · card — tool styles (vanilla port of the prototype's <style> block)
   Tokens + fonts come from /colors_and_type.css. This file holds resets,
   keyframes, the animated marquee, and hover/focus states that the React
   prototype expressed via inline JS handlers.
   ========================================================================== */

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #fff; }

/* hide scrollbars (clean) while keeping scroll */
html { scrollbar-width: none; }
body::-webkit-scrollbar { display: none; }

button { font-family: var(--bs-font-body); }

::selection { background: rgba(81, 164, 84, 0.22); }

/* ── keyframes ───────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

@keyframes popin {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ── heading reveal (words rise + fade, gentle stagger; set via app.js) ── */
@keyframes splitRise {
  from { opacity: 0; transform: translateY(0.5em); }
  to   { opacity: 1; transform: translateY(0); }
}
.split-w {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
  animation: splitRise 0.62s cubic-bezier(0.22, 0.7, 0.18, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .split-w { animation: none; opacity: 1; }
}

/* ── animated marquee bar ────────────────────────────────────────────── */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__track {
  display: inline-flex; align-items: center; width: max-content;
  animation: marquee 26s linear infinite;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Mobile: slow the marquee 50% (26s → 52s) so it reads calmer on small screens. */
@media (max-width: 979px) { .marquee__track { animation-duration: 52s; } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ── button hover states (inline styles set the base; CSS adds hover) ──── */
.bs-btn { -webkit-appearance: none; appearance: none; }
.bs-btn--primary:hover  { background: var(--bs-primary-hover) !important; }
.bs-btn--dark:hover     { background: #000 !important; }
.bs-btn--whatsapp:hover { background: #1ea952 !important; }
.bs-btn--secondary:hover{ background: var(--bs-hover) !important; }
.bs-btn:active { transform: translateY(1px); }

/* placeholder colour parity with the prototype */
.bs-input::placeholder { color: var(--bs-fg-4); opacity: 1; }

/* ── keyboard focus visibility (a11y, WCAG 2.4.7) ──────────────────────────
   Buttons, links, the template picker and the file/checkbox controls show a
   clear ring on keyboard focus. Mouse focus stays clean (:focus-visible only).
   Inputs already render their own focus ring via JS, so they opt out here. */
button:focus-visible,
a:focus-visible,
[role='button']:focus-visible,
input[type='checkbox']:focus-visible,
input[type='file']:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: 8px;
}
.bs-input:focus-visible { outline: none; }