/* =========================================================
   BLACK HOLE — TRADING TERMINAL LOADER
   Institutional, restrained page transition for a trading app.
   ========================================================= */
#bh-page-loader{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 45%,rgba(82,63,170,.07),transparent 34%),
    linear-gradient(180deg,#05060a 0%,#070810 52%,#04050a 100%);
  opacity:1;
  visibility:visible;
  transition:opacity .28s ease,visibility .28s ease;
  font-family:var(--bh-font-body,Inter,system-ui,sans-serif);
}

/* Quiet terminal grid. No galaxy particle storm. */
#bh-page-loader::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.32;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 78%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 78%,transparent 100%);
}

#bh-page-loader::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:-1;
  width:min(720px,86vw);
  height:1px;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,rgba(112,84,230,.12),rgba(88,206,255,.1),transparent);
  box-shadow:0 0 80px 24px rgba(78,53,160,.045);
}

#bh-page-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#bh-page-loader.is-hidden .bh-loader__inner{
  transform:translateY(-3px);
  opacity:0;
}
#bh-page-loader.is-offline{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.bh-loader__inner{
  position:relative;
  z-index:2;
  width:min(470px,calc(100vw - 38px));
  display:grid;
  justify-items:center;
  text-align:center;
  opacity:1;
  transform:translateY(0);
  transition:opacity .22s ease,transform .3s cubic-bezier(.22,.75,.22,1);
}

/* ---------- Market terminal micro-chart ---------- */
.bh-loader__mark{
  position:relative;
  width:min(430px,88vw);
  height:92px;
  margin-bottom:18px;
  overflow:hidden;
  border:1px solid rgba(137,119,197,.16);
  border-radius:15px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(145deg,rgba(13,14,23,.96),rgba(7,8,15,.98));
  background-size:100% 22px,42px 100%,100% 100%;
  box-shadow:
    0 26px 70px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.035);
}

/* Terminal title + execution status */
.bh-loader__mark::before{
  content:"MARKET WORKSPACE   /   EXECUTION ENGINE";
  position:absolute;
  left:14px;
  top:10px;
  z-index:4;
  color:rgba(187,183,203,.56);
  font:500 6.5px/1 var(--bh-font-mono,"DM Mono",monospace);
  letter-spacing:.12em;
  white-space:pre;
}

/* Restrained equity/price trace, used only as a trading-language cue. */
.bh-loader__mark::after{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  top:28px;
  bottom:9px;
  z-index:1;
  opacity:.86;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 334 82' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%237f6df0' stop-opacity='.42'/%3E%3Cstop offset='.56' stop-color='%237d70e8' stop-opacity='.78'/%3E%3Cstop offset='1' stop-color='%2358c9e9' stop-opacity='.92'/%3E%3C/linearGradient%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236e64d9' stop-opacity='.12'/%3E%3Cstop offset='1' stop-color='%236e64d9' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 69 C13 67 19 59 31 61 S49 72 61 55 S79 43 91 49 S110 63 124 47 S142 28 155 35 S176 53 190 37 S211 19 224 27 S245 47 260 31 S281 17 295 22 S315 14 334 9 L334 82 L0 82 Z' fill='url(%23a)'/%3E%3Cpath d='M0 69 C13 67 19 59 31 61 S49 72 61 55 S79 43 91 49 S110 63 124 47 S142 28 155 35 S176 53 190 37 S211 19 224 27 S245 47 260 31 S281 17 295 22 S315 14 334 9' fill='none' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Scan cursor: subtle, like a terminal refreshing data. */
.bh-loader__orbit{
  position:absolute;
  top:28px;
  bottom:9px;
  left:16px;
  z-index:3;
  width:1px;
  height:auto;
  border:0;
  border-radius:0;
  background:linear-gradient(to bottom,transparent,rgba(91,204,236,.52),transparent);
  box-shadow:0 0 9px rgba(91,204,236,.22);
  animation:bh-loader-scan 2.25s cubic-bezier(.45,0,.55,1) infinite;
}
.bh-loader__orbit::before,
.bh-loader__orbit::after{display:none}

/* Current-price / live marker */
.bh-loader__core{
  position:absolute;
  right:13px;
  top:31px;
  z-index:5;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#71d5ec;
  box-shadow:0 0 0 4px rgba(113,213,236,.07),0 0 13px rgba(113,213,236,.28);
  animation:bh-loader-live 1.55s ease-in-out infinite;
}
.bh-loader__core::after{
  content:"LIVE";
  position:absolute;
  right:13px;
  top:-2px;
  color:rgba(135,218,235,.68);
  font:500 6.5px/1 var(--bh-font-mono,"DM Mono",monospace);
  letter-spacing:.1em;
}

/* ---------- Type ---------- */
.bh-loader__brand{
  color:#f0edf8;
  font-family:var(--bh-font-display,Inter,system-ui,sans-serif);
  font-size:11px;
  font-weight:760;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.bh-loader__brand::after{
  content:"TRADING INTELLIGENCE";
  display:block;
  margin-top:6px;
  color:#666173;
  font:500 6.5px/1 var(--bh-font-mono,"DM Mono",monospace);
  letter-spacing:.17em;
}
.bh-loader__message{
  color:#888392;
  font-family:var(--bh-font-mono,"DM Mono",monospace);
  font-size:9px;
  letter-spacing:.055em;
  margin-top:13px;
  min-height:15px;
}

/* Slim terminal progress line, not a game loading meter. */
.bh-loader__bar{
  position:relative;
  width:118px;
  height:1px;
  margin-top:15px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.07);
}
.bh-loader__bar span{
  position:absolute;
  inset:0 auto 0 0;
  display:block;
  width:44%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(120,96,224,.15),rgba(127,105,235,.76),rgba(90,201,228,.72));
  box-shadow:0 0 12px rgba(110,91,221,.18);
  animation:bh-loader-progress 1.45s cubic-bezier(.4,0,.2,1) infinite;
}
.bh-loader__bar::before,
.bh-loader__bar::after{display:none}

/* ---------- Offline state ---------- */
.bh-loader__offline{
  display:none;
  margin-top:20px;
  width:100%;
}
#bh-page-loader.is-offline .bh-loader__offline{display:block}
#bh-page-loader.is-offline .bh-loader__bar{display:none}
#bh-page-loader.is-offline .bh-loader__orbit,
#bh-page-loader.is-offline .bh-loader__core{animation-play-state:paused;opacity:.42}
.bh-loader__offline-title{
  display:block;
  color:#e7e3f1;
  font-size:14px;
  margin-bottom:6px;
}
.bh-loader__offline-copy{
  color:#777384;
  font-size:11px;
  line-height:1.65;
  margin:0 auto 15px;
  max-width:300px;
}
.bh-loader__offline-actions{
  display:flex;
  justify-content:center;
  gap:8px;
}
.bh-loader__offline-actions button{
  min-height:36px;
  padding:0 15px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(16,15,28,.92);
  color:#d4cfdf;
  font:650 10px var(--bh-font-body,Inter,system-ui,sans-serif);
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.bh-loader__offline-actions button:hover{transform:translateY(-1px);border-color:rgba(143,112,255,.25)}
.bh-loader__offline-actions button[data-retry]{
  color:#fff;
  border-color:rgba(156,123,255,.26);
  background:linear-gradient(135deg,#17112f,#4e2ba9);
  box-shadow:0 12px 28px rgba(61,29,145,.2);
}

html.bh-page-leaving .bh-app,
html.bh-page-leaving main,
html.bh-page-leaving .bh-nav,
html.bh-page-leaving .bh-mobile-menu{
  pointer-events:none;
}

@keyframes bh-loader-scan{
  0%{left:4%;opacity:0}
  10%{opacity:.52}
  88%{opacity:.42}
  100%{left:96%;opacity:0}
}
@keyframes bh-loader-live{
  0%,100%{opacity:.58;transform:scale(.86)}
  50%{opacity:1;transform:scale(1)}
}
@keyframes bh-loader-progress{
  0%{transform:translateX(-125%);opacity:.25}
  38%{opacity:1}
  100%{transform:translateX(285%);opacity:.45}
}

@media(max-width:600px){
  .bh-loader__inner{width:min(410px,calc(100vw - 30px))}
  .bh-loader__mark{height:86px;width:min(370px,90vw)}
  .bh-loader__mark::before{font-size:6.5px}
  .bh-loader__orbit{top:27px;bottom:8px}
  @keyframes bh-loader-scan{
    0%{left:4%;opacity:0}
    10%{opacity:.48}
    88%{opacity:.38}
    100%{left:96%;opacity:0}
  }
}

@media(prefers-reduced-motion:reduce){
  #bh-page-loader,
  .bh-loader__inner{transition:none}
  .bh-loader__orbit,
  .bh-loader__core,
  .bh-loader__bar span{animation:none!important}
  .bh-loader__orbit{left:50%;opacity:.28}
}


/* 2026-09-05 — compact institutional loader frame */
.bh-loader__mark {
  aspect-ratio: auto;
  min-height: 0;
}
.bh-loader__mark::after {
  left: 14px;
  right: 14px;
  top: 28px;
  bottom: 9px;
}
.bh-loader__orbit {
  top: 28px;
  bottom: 9px;
  left: 4%;
}
@keyframes bh-loader-scan {
  0% { left: 4%; opacity: 0; }
  10% { opacity: .50; }
  88% { opacity: .40; }
  100% { left: 96%; opacity: 0; }
}
