/* Startup screen (web/index.html). Painted before any script runs; window.hydraBoot (boot.js) moves it through real
   init stages. A file rather than an inline <style>, so the Content-Security-Policy needs no 'unsafe-inline'. */
html, body { margin: 0; background: #07070b; }
#boot {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: radial-gradient(520px 360px at 50% 46%, color-mix(in srgb, var(--hy-1, #f0243f) 13%, transparent), transparent 70%),
    radial-gradient(640px 420px at 58% 54%, color-mix(in srgb, var(--hy-2, #8b5cf6) 10%, transparent), transparent 72%),
    radial-gradient(700px 480px at 42% 60%, color-mix(in srgb, var(--hy-3, #4d7cff) 7%, transparent), transparent 74%), #07070b;
  color: #f4f4f7; font-family: Inter, -apple-system, 'Segoe UI', sans-serif;
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 280ms;
}
#boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
#boot .b-stack { display: flex; flex-direction: column; align-items: center; gap: 18px; }
#boot .b-icon {
  width: 96px; height: 96px; border-radius: 26px; overflow: hidden; position: relative;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 60px color-mix(in srgb, var(--hy-1, #f0243f) 22%, transparent), 0 8px 30px color-mix(in srgb, var(--hy-2, #8b5cf6) 16%, transparent);
  animation: b-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
#boot .b-icon img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.38); }
#boot .b-icon::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), transparent 40%);
}
#boot .b-word { font-size: 30px; font-weight: 800; letter-spacing: 0.14em; line-height: 1; animation: b-rise 420ms 90ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#boot .b-word sup {
  font-size: 0.42em; font-weight: 700; letter-spacing: 0.02em; vertical-align: 0.95em; margin-left: 0.16em;
  background: linear-gradient(135deg, var(--hy-1, #ff4d63), var(--hy-2, #a35cff) 55%, var(--hy-3, #6b93ff)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#boot .b-sub { margin-top: -10px; font-size: 12px; letter-spacing: 0.3em; color: #8a8a99; animation: b-rise 420ms 140ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#boot .b-bar { width: 168px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; position: relative; margin-top: 6px; animation: b-rise 420ms 180ms both; }
#boot .b-fill { position: absolute; inset: 0 auto 0 0; width: 8%; border-radius: inherit; background: linear-gradient(90deg, var(--hy-1, #f0243f), var(--hy-2, #8b5cf6), var(--hy-3, #4d7cff)); transition: width 260ms cubic-bezier(0.16, 1, 0.3, 1); }
#boot .b-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: b-sweep 1.1s linear infinite; }
#boot .b-label { font-size: 12px; color: #6f6f80; min-height: 16px; animation: b-rise 420ms 200ms both; }
#boot .b-error { display: none; flex-direction: column; align-items: center; gap: 12px; max-width: 360px; text-align: center; font-size: 13px; color: #c9c9d4; }
#boot.failed .b-error { display: flex; }
#boot.failed .b-bar, #boot.failed .b-label { display: none; }
#boot .b-error button {
  font: inherit; font-weight: 600; color: #fff; border: 0; border-radius: 999px; padding: 9px 20px; cursor: pointer;
  background: linear-gradient(135deg, var(--hy-1, #f0243f), var(--hy-2, #8b5cf6)); box-shadow: 0 6px 24px color-mix(in srgb, var(--hy-1, #f0243f) 30%, transparent);
}
@keyframes b-in { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: none; } }
@keyframes b-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes b-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { #boot *, #boot { animation: none !important; transition: none !important; } }
/* the hidden SVG that holds the glass refraction filter */
.hy-defs { position: absolute; }