/* ═══════════════════════════════════════════════════════════
   BYYT.SE — Shared CSS (V0.6)
   Globala animationer + reset + body + responsiv layout.
   Färgvärden finns även i window.BYYT.C så React kan använda
   dem inline. Här exponeras de som CSS-variabler.
   ═══════════════════════════════════════════════════════════ */

:root {
  --byyt-mint:    #06D6A0;
  --byyt-cyan:    #00B4D8;
  --byyt-violet:  #8B5CF6;
  --byyt-ink:     #080E1A;
  --byyt-dark:    #0F172A;
  --byyt-surface: #1E293B;
  --byyt-surface2:#334155;
  --byyt-text:    #F8FAFC;
  --byyt-muted:   #94A3B8;
  --byyt-subtle:  #64748B;
  --byyt-success: #22C55E;
}

/* ═══ Animationer (används av React-komponenter via animation: namn) ═══ */
@keyframes cardIn       { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn       { from { opacity:0 } to { opacity:1 } }
@keyframes heroGlow     { 0%,100% { opacity:.3;  transform:scale(1)    } 50% { opacity:.55; transform:scale(1.06) } }
@keyframes scrollBounce { 0%,100% { transform:translateX(-50%) translateY(0) } 50% { transform:translateX(-50%) translateY(8px) } }
@keyframes featurePulse { 0%,100% { border-color:rgba(34,197,94,0.15); box-shadow:none } 50% { border-color:rgba(34,197,94,0.5); box-shadow:0 0 16px rgba(34,197,94,0.1) } }
@keyframes filterPulse  { 0%,100% { border-color:rgba(0,180,216,0.2) } 50% { border-color:rgba(0,180,216,0.5) } }

/* ═══ Reset ═══ */
* { box-sizing:border-box; margin:0; padding:0 }

::-webkit-scrollbar       { width:4px }
::-webkit-scrollbar-thumb { background:rgba(139,92,246,.2); border-radius:3px }

input[type=range] { -webkit-appearance:none; appearance:none; background:transparent }

body { background:var(--byyt-ink) }

/* ═══ Responsiv ═══ */
@media (max-width:640px) {
  .dn    { display:none !important }
  .mb    { display:flex !important; flex-direction:column }
  .pg    { grid-template-columns:1fr !important }
  .fsl   { flex-direction:column !important; gap:14px !important }
  .mw    { padding:0 12px !important }
  .fgrid { grid-template-columns:repeat(3,1fr) !important; gap:6px !important }
}
@media (min-width:641px) {
  .mb { display:none !important }
}