/* BuyMyFoot — design tokens & components
   Palette "Estúdio": seamless backdrop paper, softbox light, deep tide accent. */

:root {
  --paper: #fbf9f6;
  --card: #ffffff;
  --ink: #16130f;
  --stone: #6f665d;
  --sand: #e9e2d8;
  --tide: #0d6b60;
  --tide-lift: #0a5049;
  --tide-wash: #f0f6f5;
  --live: #d9443b;

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Type roles ------------------------------------------------------------- */

.u-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* The width axis is the signature: expanded only at billboard sizes. */
.u-expanded {
  font-stretch: 118%;
}

.u-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.u-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}

/* Wordmark --------------------------------------------------------------- */

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -0.045em;
}

/* Ticker tape ------------------------------------------------------------ */

.tape {
  display: flex;
  width: max-content;
  animation: tape-run 64s linear infinite;
}

.tape:hover {
  animation-play-state: paused;
}

@keyframes tape-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Live pulse ------------------------------------------------------------- */

.pulse {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--live);
}

.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--live);
  animation: pulse-ring 1.8s ease-out infinite;
}

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Feed row entry --------------------------------------------------------- */

.feed-enter {
  animation: feed-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes feed-in {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Spinner ---------------------------------------------------------------- */

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 999px;
  animation: spin 0.7s linear infinite;
}

.spinner--ink {
  border-color: var(--sand);
  border-top-color: var(--tide);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Utilities -------------------------------------------------------------- */

.hairline {
  border-color: var(--sand);
}

.grain {
  background-image: linear-gradient(180deg, var(--tide-wash) 0%, var(--paper) 100%);
}

[x-cloak] {
  display: none !important;
}

/* Quality floor ---------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--tide);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tape,
  .pulse::after,
  .feed-enter,
  .spinner {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .tape { animation: none; }
}