/* ============================================================
   House AI — shared loading primitives (site-wide UX)
   Link from any page:
     <link rel="stylesheet" href="/static/assets/css/loading.css" />

   .hx-spin           inline spinner ring (sized via width/height, default 14px)
   .hx-loading        centered column: spinner + .hx-loading-label caption
   .hx-skel           shimmering skeleton block (give it width/height/radius)
   .hx-fade-in        content entrance once real data lands
   ============================================================ */

.hx-spin{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(45,212,191,.18);
  border-top-color:var(--accent, #2dd4bf);
  animation:hx-spin-rot .8s linear infinite; flex:0 0 auto;
}
@keyframes hx-spin-rot{ to{ transform:rotate(360deg); } }

.hx-loading{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; min-height:56px; padding:14px; opacity:.9;
}
.hx-loading-label{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-4, #5f6672);
}
.hx-loading-error{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:10.5px; letter-spacing:.04em;
  color:var(--warn, #f4b740);
}

.hx-skel{
  position:relative; overflow:hidden; border-radius:8px;
  background:rgba(255,255,255,.05);
}
.hx-skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform:translateX(-100%);
  animation:hx-skel-sweep 1.4s ease infinite;
}
@keyframes hx-skel-sweep{ to{ transform:translateX(100%); } }

.hx-fade-in{ animation:hx-fade .32s ease both; }
@keyframes hx-fade{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .hx-spin{ animation-duration:2.4s; }
  .hx-skel::after{ animation:none; }
  .hx-fade-in{ animation:none; }
}