/* nina.cash — site. cores e tipografia vêm de CLAUDE.md (src/theme/tokens.ts é a
   fonte no app; aqui não tem bundler, então os valores estão repetidos). */

@font-face { font-family: 'Satoshi'; src: url('../assets/fonts/Satoshi-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../assets/fonts/Satoshi-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../assets/fonts/Satoshi-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../assets/fonts/Satoshi-Black.otf') format('opentype'); font-weight: 900; font-display: swap; }

:root {
  --ink: #0A0A0A;
  --surface: #161616;
  --surface2: #1E1E1E;
  --line: #262626;
  --fg: #F4F1EA;
  --soft: #C2BFB8;
  --mute: #8F8C86;
  --lime: #C8FF2E;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* só no html, nunca no body: overflow-x no body cria um scroll box próprio,
     separado do viewport, e quebra o scroll normal da página. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: 'Satoshi', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; }

[hidden] { display: none !important; }

@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cycle { 0% { opacity: 0; transform: translateY(30px) scale(.96); } 6%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateY(-20px) scale(.96); } }
@keyframes wobble { 0%, 100% { transform: rotate(var(--r, -8deg)) translateY(0); } 50% { transform: rotate(calc(var(--r, -8deg) * -.4)) translateY(-8px); } }
@keyframes pop { 0% { transform: scale(.6) rotate(var(--r, -8deg)); opacity: 0; } 70% { transform: scale(1.08) rotate(var(--r, -8deg)); } 100% { transform: scale(1) rotate(var(--r, -8deg)); opacity: 1; } }
@keyframes bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.rise { animation: rise 1s cubic-bezier(.16, .84, .24, 1) both; }
.d1 { animation-delay: .1s; } .d2 { animation-delay: .22s; } .d3 { animation-delay: .36s; } .d4 { animation-delay: .5s; }
.spin { animation: spin 14s linear infinite; }
.marquee { animation: marquee 22s linear infinite; }
.marquee.slow { animation-duration: 34s; }
.cycle { animation: cycle 9s cubic-bezier(.16, .84, .24, 1) infinite both; }
.c2 { animation-delay: 3s; } .c3 { animation-delay: 6s; }
.sticker { animation: pop .7s cubic-bezier(.16, .84, .24, 1) both, wobble 5s ease-in-out 1s infinite; }
.bar { transform-origin: bottom; animation: bar 1s cubic-bezier(.16, .84, .24, 1) both; }

.cta { transition: transform .2s cubic-bezier(.16, .84, .24, 1); }
.cta:hover { transform: scale(1.04) rotate(-1deg); }

.termo {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-decoration: underline dotted; text-decoration-thickness: 3px;
  text-underline-offset: 8px; cursor: pointer;
}

@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  .tilt { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .cycle { opacity: 0; }
  .cycle.c1 { opacity: 1; }
}

/* foco visível pra navegação por teclado (a referência não cobria isso) */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}