/* ============================================
   FN8POS — Base Styles (Optimized & Responsive)
   Design tokens, reset, typography, animations
   ============================================ */

/* ── Tokens ── */
:root {
  --bg:     #060808; --bg1:    #0c0e0d; --bg2:    #121514; --bg3:    #191c1b;
  --bg4:    #222625; --bg5:    #2b302e;
  --bd:     #1c201e; --bd1:    #272c2a; --bd2:    #343a37;
  --em:     #22c55e; --em2:    #16a34a; --em3:    #15803d; --em9:    #052e16;
  --emA:    rgba(34,197,94,.07); --emB: rgba(34,197,94,.14);
  --gd:     #fbbf24; --am:     #f59e0b; --rd:     #ef4444; --bl:     #3b82f6; --vt: #a78bfa;
  --t:      #f0f5f1; --t1:     #c5cfc7; --t2:     #8d9a8f; --t3:     #5f6e61; --t4:     #3d4a3f;
  --ff:     'Plus Jakarta Sans', system-ui, sans-serif;
  --fm:     'JetBrains Mono', monospace;
  --r:      10px; --r2: 14px; --r3: 20px;
  --tr:     all .2s cubic-bezier(.4,0,.2,1);
  /* Safe area insets for notched phones */
  --sai-t:  env(safe-area-inset-top, 0px);
  --sai-b:  env(safe-area-inset-bottom, 0px);
  --sai-l:  env(safe-area-inset-left, 0px);
  --sai-r:  env(safe-area-inset-right, 0px);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; height: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff); background: var(--bg); color: var(--t1);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  height: 100%; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#root { height: 100%; overflow-y: auto; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, select, input, textarea { font-family: var(--ff); outline: none; }
button { cursor: pointer; border: none; }
input, select, textarea { font-size: 16px; } /* Prevents iOS zoom on focus */
::selection { background: rgba(34,197,94,.15); color: var(--em); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd1); border-radius: 3px; }

/* ── Typography ── */
h1, h2, h3, h4 { color: var(--t); font-weight: 700; line-height: 1.15; }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.35); }
  50%      { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Scroll Reveal ── */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
[data-reveal].visible { opacity: 1; transform: translateY(0); }
[data-reveal="1"] { transition-delay: .06s; }
[data-reveal="2"] { transition-delay: .12s; }
[data-reveal="3"] { transition-delay: .18s; }
[data-reveal="4"] { transition-delay: .24s; }
[data-reveal="5"] { transition-delay: .30s; }
[data-reveal="6"] { transition-delay: .36s; }

/* ── Page Animation ── */
.page-enter {
  animation: fadeUp .4s cubic-bezier(.22,1,.36,1) forwards;
}

/* ── Grain Overlay (subtle) ── */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 99999; pointer-events: none;
  opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Utility: visually hidden ── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ── Prevent body scroll when overlay is open ── */
body.no-scroll { overflow: hidden; }
body.no-scroll #root { overflow: hidden; }