/* =========================================================
   FUTURES-AUSBILDUNG · orderflow.css
   Heatmap frame, DOM ladder, Times & Sales
   ========================================================= */

/* ---------- shared frame ---------- */
.of-frame{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(23,35,56,.45), rgba(17,25,46,.35));
  overflow:hidden;
}
.of-frame .corner{
  position:absolute;width:10px;height:10px;border:1px solid var(--text-3);opacity:.45;
  pointer-events:none;
}
.of-frame .corner.tl{top:6px;left:6px;border-right:0;border-bottom:0}
.of-frame .corner.tr{top:6px;right:6px;border-left:0;border-bottom:0}
.of-frame .corner.bl{bottom:6px;left:6px;border-right:0;border-top:0}
.of-frame .corner.br{bottom:6px;right:6px;border-left:0;border-top:0}

/* ---------- HEATMAP (hero) ---------- */
.heatmap-frame{
  position:relative;
  aspect-ratio: 4 / 5;
  width:100%;
  max-width:520px;
  margin-left:auto;
}
.heatmap-frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.heatmap-frame .axis-label{
  position:absolute;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);
  pointer-events:none;
}
.heatmap-frame .axis-label.tl{top:14px;left:14px;color:var(--text-2)}
.heatmap-frame .axis-label.tr{top:14px;right:14px}
.heatmap-frame .axis-label.bl{bottom:14px;left:14px}
.heatmap-frame .axis-label.br{bottom:14px;right:14px}

@media (max-width:980px){
  .heatmap-frame{max-width:100%;aspect-ratio: 16 / 11}
}

/* Ambient (between sections) */
.ambient-band{
  position:relative;height:160px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-deep);
  overflow:hidden;
}
.ambient-band canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.ambient-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, var(--bg-deep) 0%, transparent 18%, transparent 82%, var(--bg-deep) 100%),
             linear-gradient(180deg, rgba(11,18,32,.4) 0%, transparent 25%, transparent 75%, rgba(11,18,32,.4) 100%);
}
.ambient-band .label{
  position:absolute;left:24px;top:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-3);z-index:2;
}
.ambient-band .label .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-right:8px;vertical-align:middle;
  animation:ofPulse 2.4s ease-in-out infinite;
}
.ambient-band .sim{
  position:absolute;right:24px;bottom:12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  color:var(--text-3);z-index:2;
}
@keyframes ofPulse{
  0%,100%{opacity:.35}
  50%{opacity:1}
}

/* ---------- DOM LADDER ---------- */
.ladder{
  border:1px solid var(--line-strong);
  background:var(--bg-card);
  font-family:var(--mono);
  position:relative;
  user-select:none;
}
.ladder-head{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap:0;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);
  background:rgba(11,18,32,.5);
  align-items:center;
}
.ladder-head .sym{color:var(--text-1);letter-spacing:.16em;font-weight:500}
.ladder-head .lbl{text-align:center}
.ladder-head .lbl.px{color:var(--text-2)}
.ladder-head .sim{text-align:right;color:var(--text-3);font-size:9px}
.ladder-body{
  display:flex;flex-direction:column;
  background:var(--bg-card);
}
.ladder-row{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom:1px solid rgba(30,42,68,.5);
  position:relative;
  --flash:0;
  transition:background-color 200ms var(--ease);
}
.ladder-row:last-child{border-bottom:0}
.ladder-row.is-mid{
  background:rgba(255,255,255,0.04);
  border-top:1px solid var(--accent-line);
  border-bottom:1px solid var(--accent-line);
}
.ladder-row .cell{
  position:relative;
  padding:7px 12px;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  display:flex;align-items:center;
  overflow:hidden;
}
.ladder-row .cell.bid{justify-content:flex-end;color:var(--text-1)}
.ladder-row .cell.ask{justify-content:flex-start;color:var(--text-1)}
.ladder-row .cell.px{
  justify-content:center;color:var(--text-2);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  font-weight:500;
}
.ladder-row.is-mid .cell.px{color:var(--text-1)}
.ladder-row .cell.bid .bar,
.ladder-row .cell.ask .bar{
  position:absolute;top:0;bottom:0;
  background:rgba(255,255,255,0.10);
  border-top:1px solid rgba(255,255,255,0);
  transform-origin:right center;
  transform:scaleX(0);
  transition:transform 240ms var(--ease);
  width:100%;
  z-index:0;
}
.ladder-row .cell.bid .bar{
  right:0;transform-origin:right center;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.16) 100%);
}
.ladder-row .cell.ask .bar{
  left:0;transform-origin:left center;
  background:linear-gradient(270deg, transparent 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.16) 100%);
}
.ladder-row .cell .num{position:relative;z-index:1}

/* ----- BBO highlight (best ask + best bid rows bracket the spread) ----- */
.ladder-row.is-best-ask{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-top: 1px solid var(--accent-line);
}
.ladder-row.is-best-bid{
  background: linear-gradient(0deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-bottom: 1px solid var(--accent-line);
}
.ladder-row.is-best-ask .cell.px,
.ladder-row.is-best-bid .cell.px{ color: var(--text-1); font-weight:600; }

/* Wall: subtle highlight on the side cell that holds the wall */
.ladder-row.is-wall .cell.bid .num,
.ladder-row.is-wall .cell.ask .num{
  color: var(--text-1);
  font-weight: 600;
}
.ladder-row.is-wall .cell.bid .bar,
.ladder-row.is-wall .cell.ask .bar{
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.22) 100%);
}

/* flash overlays */
.ladder-row.flash-buy .cell.ask{
  background:rgba(255,255,255,calc(0.20 * var(--flash)));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,calc(0.4 * var(--flash)));
}
.ladder-row.flash-sell .cell.bid{
  background:rgba(255,255,255,calc(0.20 * var(--flash)));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,calc(0.4 * var(--flash)));
}

.ladder-foot{
  display:flex;align-items:center;gap:18px;
  padding:10px 14px;
  border-top:1px solid var(--line);
  background:rgba(11,18,32,.5);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);
}
.ladder-foot .grow{flex:1}
.ladder-foot .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-right:8px;vertical-align:middle;opacity:.85;
}
.ladder-foot .dot.sell{background:var(--text-3)}
.ladder-foot .ts em{
  font-style:normal;color:var(--text-1);font-weight:500;margin-left:6px;
  letter-spacing:.04em;
}
.ladder-foot .ts em.neg{color:var(--text-2)}

/* ---------- TIMES & SALES ---------- */
.ts{
  border:1px solid var(--line-strong);
  background:var(--bg-card);
  font-family:var(--mono);
  display:flex;flex-direction:column;
  min-height:420px;
}
.ts-head{
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(11,18,32,.5);
}
.ts-head .ttl{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-2);font-weight:500;
}
.ts-head .cols{
  display:grid;grid-template-columns: 1.2fr .7fr .6fr 1fr 1fr;
  gap:0;margin-top:8px;
  font-size:9px;letter-spacing:.18em;color:var(--text-3);
}
.ts-list{
  list-style:none;margin:0;padding:0;
  flex:1;overflow:hidden;position:relative;
}
.ts-row{
  display:grid;grid-template-columns: 1.2fr .7fr .6fr 1fr 1fr;
  gap:0;
  padding:5px 14px;
  font-size:11px;font-variant-numeric:tabular-nums;
  color:var(--text-2);
  border-bottom:1px solid rgba(30,42,68,.4);
  align-items:center;
  opacity:0;transform:translateY(-6px);
  transition:opacity 240ms var(--ease), transform 240ms var(--ease), background-color 240ms var(--ease);
}
.ts-row.in{opacity:1;transform:none}
.ts-row .t{color:var(--text-3)}
.ts-row .s{color:var(--text-3);letter-spacing:.06em}
.ts-row .d{color:var(--text-2);text-align:center;font-size:10px}
.ts-row .p{color:var(--text-1);font-weight:500}
.ts-row .z{color:var(--text-2);text-align:right}
.ts-row.buy .d{color:var(--text-1)}
.ts-row.sell .d{color:var(--text-3);opacity:.8}
.ts-row.mid{background:rgba(255,255,255,0.025)}
.ts-row.mid .z{color:var(--text-1)}
.ts-row.big{
  background:rgba(255,255,255,0.06);
  border-bottom-color:var(--accent-line);
}
.ts-row.big .z{color:var(--text-1);font-weight:600}
.ts-row.big .p{color:var(--accent)}
.ts-foot{
  display:flex;justify-content:space-between;
  padding:8px 14px;
  border-top:1px solid var(--line);
  background:rgba(11,18,32,.5);
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);
}

/* ---------- DUAL ladder grid (ES + NQ) ---------- */
.market-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  gap:24px;
  align-items:stretch;
}
.market-grid > *{min-width:0}
@media (max-width:980px){
  .market-grid{grid-template-columns:1fr;gap:18px}
}

/* section heading for orderflow band */
.orderflow-section .head{margin-bottom:48px}
.orderflow-section h2{max-width:680px}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .ambient-band canvas{display:none}
  .ladder-row .cell.bid .bar,
  .ladder-row .cell.ask .bar{transition:none}
  .ladder-body.shift-up .cell.bid .num,
  .ladder-body.shift-up .cell.bid .bar,
  .ladder-body.shift-up .cell.ask .num,
  .ladder-body.shift-up .cell.ask .bar,
  .ladder-body.shift-down .cell.bid .num,
  .ladder-body.shift-down .cell.bid .bar,
  .ladder-body.shift-down .cell.ask .num,
  .ladder-body.shift-down .cell.ask .bar{ animation:none }
}

/* ==========================================================
   Section 02 · Orderflow — Background Engine wie Hero
   Höhe folgt dem Text (kein min-height), absolute BG füllt.
   ========================================================== */
.orderflow-section--immersive{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.orderflow-bg{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
}
.orderflow-bg-inner{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  gap:0;
  opacity:.46;
  filter: saturate(.95) contrast(1);
}
.of-bg-strip{
  flex:1 1 0;
  min-height:0;
  position:relative;
  overflow:hidden;
}
.of-bg-strip-track{
  display:flex;
  gap:14px;
  height:100%;
  width:max-content;
  animation: of-bg-scroll 240s linear infinite;
  will-change: transform;
}
.of-bg-strip[data-strip="1"] .of-bg-strip-track{
  animation-duration: 280s;
  animation-direction: reverse;
}
.of-bg-strip[data-strip="2"] .of-bg-strip-track{
  animation-duration: 220s;
}
.of-bg-strip[data-strip="3"] .of-bg-strip-track{
  animation-duration: 300s;
  animation-direction: reverse;
}
.of-bg-strip[data-strip="4"] .of-bg-strip-track{
  animation-duration: 260s;
}
.of-bg-strips--static .of-bg-strip-track{
  animation: none;
}
.of-bg-card{
  flex:0 0 auto;
  height:100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(8,12,22,.6);
}
.of-bg-card img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
@keyframes of-bg-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.orderflow-bg-mask{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(8,12,22,.78) 0%, rgba(8,12,22,.6) 45%, rgba(8,12,22,.28) 80%, rgba(8,12,22,.1) 100%),
    linear-gradient(180deg, rgba(8,12,22,.45) 0%, rgba(8,12,22,.15) 30%, rgba(8,12,22,.15) 70%, rgba(8,12,22,.45) 100%);
}
.orderflow-bg-vignette{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(140% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
}
.orderflow-fg{
  position:relative;
  z-index:1;
}
@media (max-width:1180px){
  .orderflow-bg-inner{ opacity:.4; }
}
@media (max-width:720px){
  .orderflow-bg-inner{ opacity:.32; }
  .of-bg-strip[data-strip="3"],
  .of-bg-strip[data-strip="4"]{ display:none; }
  .orderflow-bg-mask{
    background:
      radial-gradient(95% 70% at 50% 50%, rgba(8,12,22,.92) 0%, rgba(8,12,22,.78) 50%, rgba(8,12,22,.55) 100%);
  }
}