/* ── Performance OS — global styles (ported from the Claude Design prototype) ──
   Almost all styling is inline in app.js (matching the design's approach); this
   file holds the global keyframes, scrollbar, selection, and stagger helpers. */

html, body { margin: 0; background: #07090c; }
* { box-sizing: border-box; }
::selection { background: rgba(111,214,226,0.25); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }
::-webkit-scrollbar-track { background: transparent; }

@keyframes os-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes os-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes os-boot-ring { 0% { stroke-dashoffset: 327; opacity: 0.3; } 100% { stroke-dashoffset: 60; opacity: 1; } }
@keyframes os-spin { to { transform: rotate(360deg); } }
@keyframes os-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes os-blink { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes os-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(111,214,226,0.0); } 50% { box-shadow: 0 0 22px 0 rgba(111,214,226,0.10); } }

.os-stagger > * { animation: os-fade-up 0.5s cubic-bezier(.2,.7,.2,1) backwards; }
.os-stagger > *:nth-child(1){ animation-delay:.02s } .os-stagger > *:nth-child(2){ animation-delay:.08s }
.os-stagger > *:nth-child(3){ animation-delay:.14s } .os-stagger > *:nth-child(4){ animation-delay:.20s }
.os-stagger > *:nth-child(5){ animation-delay:.26s } .os-stagger > *:nth-child(6){ animation-delay:.32s }
.os-stagger > *:nth-child(7){ animation-delay:.38s } .os-stagger > *:nth-child(8){ animation-delay:.44s }
.os-stagger > *:nth-child(9){ animation-delay:.50s } .os-stagger > *:nth-child(10){ animation-delay:.56s }

.os-dot { transition: r .15s ease, opacity .15s ease; }
.os-dot:hover { r: 4; opacity: 1; }

/* Hover/focus states the prototype expressed via style-hover / style-focus-within.
   Re-expressed here as real CSS so the vanilla port keeps the same affordances. */
.os-hover { transition: all .18s ease; }
.os-nav:hover { background: rgba(255,255,255,0.04) !important; color: var(--ink) !important; }
.os-tile:hover { border-color: var(--line2) !important; transform: translateY(-2px); background: var(--panel2) !important; }
.os-press:hover { opacity: .9; }
.os-glance:hover { background: rgba(255,255,255,0.04) !important; }
.os-chip:hover { border-color: var(--cyan) !important; color: var(--ink) !important; }
.os-quick:hover { background: rgba(255,255,255,0.08) !important; color: var(--ink) !important; }
.os-askbtn:hover { background: rgba(111,214,226,0.12) !important; }
.os-iconbtn:hover { background: rgba(255,255,255,0.05) !important; }
.os-field:focus-within { border-color: rgba(111,214,226,0.5) !important; box-shadow: 0 0 0 3px rgba(111,214,226,0.08); }
input { caret-color: var(--cyan); }
input::placeholder { color: var(--ink3); }