/* Reversals, range bounces and accelerating breakouts share one loading card. */
.cgex-page-loading {
  position:fixed; inset:0; z-index:100000;
  display:grid; place-items:center; pointer-events:none;
  background:rgb(var(--cgex-rgb-bg, 16 18 20) / .76);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  color:var(--cgex-ui-text, #dce1e7);
}
.cgex-loading-card {
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:28px 36px 24px; border:1px solid var(--cgex-ui-border, #363e48);
  border-radius:14px; background:var(--cgex-ui-panel, #181b1f);
  box-shadow:0 16px 60px rgb(var(--cgex-ui-shadow, 0 0 0) / .16);
}
.cgex-loading-chart {
  position:relative; width:152px; height:112px;
  --approach-color:var(--cgex-ui-red, #e095a1);
  --impulse-color:var(--cgex-ui-green, #80c7a9);
}
.cgex-loading-label {
  color:var(--cgex-ui-muted, #a8b2bf);
  font:500 12px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  letter-spacing:.08em;
}
.cgex-loading-support {
  position:absolute; left:0; right:0; top:var(--level-y, 94px); height:2px;
  background:var(--cgex-ui-gold, #d6b56d); border-radius:2px;
  opacity:.65; animation:cgex-support 3.6s ease-in-out infinite;
}
.cgex-loading-candle { position:absolute; width:18px; color:var(--approach-color); }
.cgex-loading-candle i, .cgex-loading-candle b {
  display:block; position:absolute; background:currentColor;
  animation-duration:3.6s; animation-timing-function:cubic-bezier(.22,.65,.3,1);
  animation-iteration-count:infinite; transform-origin:50% var(--approach-origin, 0%);
}
.cgex-loading-candle i {
  width:2px; left:calc(50% - 1px); top:-6px; height:calc(100% + 12px); border-radius:2px;
  /* Both the body and wick grow from the exact opening price. */
  transform-origin:50% var(--wick-origin, 6px);
}
.cgex-loading-candle b { inset:0; border-radius:2px; }
.cgex-loading-candle-1 { left:18px; top:var(--first-y, 30px); height:var(--small-height, 20px); }
.cgex-loading-candle-2 { left:48px; top:var(--second-y, 50px); height:var(--small-height, 20px); }
.cgex-loading-candle-3 { left:78px; top:var(--third-y, 70px); height:var(--small-height, 18px); }
.cgex-loading-candle-1 :is(i,b) { animation-name:cgex-bear-one; }
.cgex-loading-candle-2 :is(i,b) { animation-name:cgex-bear-two; }
.cgex-loading-candle-3 :is(i,b) { animation-name:cgex-bear-three; }
.cgex-loading-impulse {
  left:112px; top:var(--impulse-y, 12px); height:var(--impulse-height, 76px);
  color:var(--impulse-color);
}
.cgex-loading-impulse :is(i,b) { transform-origin:50% 100%; animation-name:var(--impulse-animation, cgex-bull); }
.cgex-loading-impulse i { transform-origin:50% calc(100% - 6px); }
.cgex-loading-touch {
  position:absolute; left:80px; top:var(--touch-y, 87px); width:12px; height:12px;
  border:1px solid var(--cgex-ui-gold, #d6b56d); border-radius:50%;
  animation:cgex-touch 3.6s ease-out infinite;
}
/* Mirror the geometry as well as the colors for a bearish reversal. */
[data-loading-pattern=bearish-reversal] .cgex-loading-chart {
  transform:scaleY(-1);
  --approach-color:var(--cgex-ui-green, #80c7a9);
  --impulse-color:var(--cgex-ui-red, #e095a1);
}
[data-loading-pattern$="breakout"] .cgex-loading-chart {
  --first-y:76px; --second-y:64px; --third-y:52px; --small-height:12px;
  --level-y:46px; --touch-y:39px; --approach-origin:100%;
  --wick-origin:calc(100% - 6px);
  --impulse-y:8px; --impulse-height:44px; --impulse-animation:cgex-breakout;
  --approach-color:var(--cgex-ui-green, #80c7a9);
}
[data-loading-pattern$="breakout"] .cgex-loading-impulse :is(i,b) {
  animation-timing-function:cubic-bezier(.65,0,.95,.45);
}
[data-loading-pattern=bearish-breakout] .cgex-loading-chart {
  transform:scaleY(-1);
  --approach-color:var(--cgex-ui-red, #e095a1);
  --impulse-color:var(--cgex-ui-red, #e095a1);
}
.cgex-loading-range { display:none; position:absolute; inset:0; }
[data-loading-pattern=range-bounce] .cgex-loading-chart > :not(.cgex-loading-range) { display:none; }
[data-loading-pattern=range-bounce] .cgex-loading-range { display:block; }
.cgex-loading-range-upper, .cgex-loading-range-lower {
  position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background:var(--cgex-ui-gold, #d6b56d);
}
.cgex-loading-range-upper { top:24px; animation:cgex-range-upper 4.8s linear infinite; }
.cgex-loading-range-lower { top:88px; animation:cgex-range-lower 4.8s linear infinite; }
/* Every new candle advances to the right. Completed candles stay in place
   until the entire sequence fades out for the next loop. */
.cgex-loading-range-candle { width:10px; height:32px; }
.cgex-loading-range-candle :is(i,b) { animation-duration:4.8s; animation-timing-function:linear; }
.cgex-loading-range-candle i { clip-path:inset(var(--wick-clip-top, 0px) 0 var(--wick-clip-bottom, 0px)); }
.cgex-loading-range-candle:is(.cgex-loading-range-1,.cgex-loading-range-2,.cgex-loading-range-5,.cgex-loading-range-6) {
  color:var(--cgex-ui-green, #80c7a9); --approach-origin:100%; --wick-origin:calc(100% - 6px);
}
.cgex-loading-range-candle:is(.cgex-loading-range-3,.cgex-loading-range-4,.cgex-loading-range-7,.cgex-loading-range-8) {
  color:var(--cgex-ui-red, #e095a1);
}
.cgex-loading-range-1 { left:10px; top:56px; --wick-clip-bottom:6px; }
.cgex-loading-range-2 { left:27px; top:24px; --wick-clip-top:6px; }
.cgex-loading-range-3 { left:44px; top:24px; --wick-clip-top:6px; }
.cgex-loading-range-4 { left:61px; top:56px; --wick-clip-bottom:6px; }
.cgex-loading-range-5 { left:78px; top:56px; --wick-clip-bottom:6px; }
.cgex-loading-range-6 { left:95px; top:24px; --wick-clip-top:6px; }
.cgex-loading-range-7 { left:112px; top:24px; --wick-clip-top:6px; }
.cgex-loading-range-8 { left:129px; top:56px; --wick-clip-bottom:6px; }
.cgex-loading-range-1 :is(i,b) { animation-name:cgex-range-one; }
.cgex-loading-range-2 :is(i,b) { animation-name:cgex-range-two; }
.cgex-loading-range-3 :is(i,b) { animation-name:cgex-range-three; }
.cgex-loading-range-4 :is(i,b) { animation-name:cgex-range-four; }
.cgex-loading-range-5 :is(i,b) { animation-name:cgex-range-five; }
.cgex-loading-range-6 :is(i,b) { animation-name:cgex-range-six; }
.cgex-loading-range-7 :is(i,b) { animation-name:cgex-range-seven; }
.cgex-loading-range-8 :is(i,b) { animation-name:cgex-range-eight; }
@keyframes cgex-bear-one {
  0%,5% { transform:scaleY(0); opacity:0; }
  17%,85% { transform:scaleY(1); opacity:1; }
  97%,100% { transform:scaleY(1); opacity:0; }
}
@keyframes cgex-bear-two {
  0%,20% { transform:scaleY(0); opacity:0; }
  32%,85% { transform:scaleY(1); opacity:1; }
  97%,100% { transform:scaleY(1); opacity:0; }
}
@keyframes cgex-bear-three {
  0%,35% { transform:scaleY(0); opacity:0; }
  47%,85% { transform:scaleY(1); opacity:1; }
  97%,100% { transform:scaleY(1); opacity:0; }
}
@keyframes cgex-bull {
  0%,53% { transform:scaleY(0); opacity:0; }
  57% { transform:scaleY(.08); opacity:1; }
  73%,85% { transform:scaleY(1); opacity:1; }
  97%,100% { transform:scaleY(1); opacity:0; }
}
@keyframes cgex-breakout {
  0%,53% { transform:scaleY(0); opacity:0; }
  56% { transform:scaleY(.08); opacity:1; }
  66% { transform:scaleY(.2); opacity:1; }
  78%,85% { transform:scaleY(1); opacity:1; }
  97%,100% { transform:scaleY(1); opacity:0; }
}
@keyframes cgex-range-one {
  0%,3% { transform:scaleY(0); opacity:0; }
  12%,94% { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(1); opacity:0; }
}
@keyframes cgex-range-two {
  0%,14% { transform:scaleY(0); opacity:0; }
  23%,94% { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(1); opacity:0; }
}
@keyframes cgex-range-three {
  0%,25% { transform:scaleY(0); opacity:0; }
  34%,94% { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(1); opacity:0; }
}
@keyframes cgex-range-four {
  0%,36% { transform:scaleY(0); opacity:0; }
  45%,94% { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(1); opacity:0; }
}
@keyframes cgex-range-five {
  0%,47% { transform:scaleY(0); opacity:0; }
  56%,94% { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(1); opacity:0; }
}
@keyframes cgex-range-six {
  0%,58% { transform:scaleY(0); opacity:0; }
  67%,94% { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(1); opacity:0; }
}
@keyframes cgex-range-seven {
  0%,69% { transform:scaleY(0); opacity:0; }
  78%,94% { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(1); opacity:0; }
}
@keyframes cgex-range-eight {
  0%,80% { transform:scaleY(0); opacity:0; }
  89%,94% { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(1); opacity:0; }
}
@keyframes cgex-range-upper {
  0%,14%,34%,58%,78%,100% { opacity:.45; }
  23%,67% { opacity:1; }
}
@keyframes cgex-range-lower {
  0%,36%,56%,80%,100% { opacity:.45; }
  45%,89% { opacity:1; }
}
@keyframes cgex-support {
  0%,43%,70%,100% { opacity:.5; }
  49%,57% { opacity:1; }
}
@keyframes cgex-touch {
  0%,44% { transform:scale(.3); opacity:0; }
  48% { transform:scale(.7); opacity:.9; }
  61%,100% { transform:scale(2.8); opacity:0; }
}
/* The browser's initial placeholder is covered by our matching candle loader. */
body:has(#cgex-loading-bootstrap) ._dash-loading { visibility:hidden; }
@media (prefers-reduced-motion:reduce) {
  .cgex-loading-chart *, .cgex-loading-candle :is(i,b) { animation:none; }
  .cgex-loading-touch { display:none; }
}