/* ============================================================
   DJ Bank — Visualizations & motion
   Diagrams, charts and animation. Reveal is driven by the
   `.in` class added by the IntersectionObserver in main.js.
   All motion is disabled under prefers-reduced-motion (base.css).
   ============================================================ */

/* ---------- Number count-up / pop ---------- */
.count { font-variant-numeric: tabular-nums; }
.pop {
  display: inline-block;
  transform: scale(.5); opacity: 0;
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .5s ease;
}
.in .pop { transform: scale(1); opacity: 1; }

/* ============================================================
   Hero graphic — premium animated SVG centerpiece
   Draw-in curves/flows trigger off the `.in` class already applied
   to `.hero-card.reveal` by the scroll-reveal observer. A slow,
   subtle continuous loop (pulse ring / particles / flow dots) starts
   only after the entrance completes — never before, never frantic.
   ============================================================ */
.hero-card.graphic { padding-bottom: 26px; }
.hg-label {
  font-size: var(--fs-small); font-weight: 700; letter-spacing: -0.01em;
  opacity: .9; position: relative; z-index: 1;
}
.hg-stage {
  position: relative; margin-top: 20px;
  aspect-ratio: 420 / 220;
}
.hg-svg { width: 100%; height: 100%; display: block; overflow: visible; }

.hg-grid line { stroke: rgba(255,255,255,.08); stroke-width: 1; }

.hg-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hg-path.base {
  stroke: rgba(255,255,255,.3); stroke-width: 2; stroke-dasharray: 4 6;
  opacity: 0; transition: opacity .6s ease .1s;
}
.hg-path.curve {
  stroke: url(#heroCurveGrad); stroke-width: 4;
  stroke-dasharray: 520; stroke-dashoffset: 520;
  filter: drop-shadow(0 6px 14px rgba(140,210,245,.45));
  transition: stroke-dashoffset 1.5s cubic-bezier(.22,1,.36,1) .35s;
}
.hg-path.projection {
  stroke: rgba(191,230,255,.55); stroke-width: 2.5; stroke-dasharray: 3 6;
  opacity: 0; transition: opacity .7s ease 1.5s;
}
.in .hg-path.base { opacity: 1; }
.in .hg-path.curve { stroke-dashoffset: 0; }
.in .hg-path.projection { opacity: 1; }

.hg-dot { opacity: 0; transform-origin: center; transition: opacity .4s ease 1.7s; }
.in .hg-dot { opacity: 1; }
.hg-ring { opacity: 0; transform-origin: center; }
.in .hg-ring { animation: hg-pulse 2.4s ease-out 1.9s infinite; }
@keyframes hg-pulse {
  0%   { opacity: .55; transform: scale(.6); }
  70%  { opacity: 0;   transform: scale(2.2); }
  100% { opacity: 0;   transform: scale(2.2); }
}

.hg-iconbox { fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.22); stroke-width: 1.5; }
.hg-icon { stroke: #fff; }

.hg-flowdot { opacity: 0; transition: opacity .5s ease 1.2s; }
.in .hg-flowdot { opacity: 1; }

.hg-badge {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease .5s, transform .5s ease .5s;
}
.in .hg-badge { opacity: 1; transform: none; }
.hg-badge-main {
  background: rgba(255,255,255,.14); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-pill); padding: 10px 18px;
  font-size: var(--fs-h4); font-weight: 800; letter-spacing: -0.02em; color: #fff;
}
.hg-badge-main .u { font-size: .5em; font-weight: 700; margin-left: 3px; color: var(--dj-sky); }
.hg-badge-masked {
  background: rgba(255,255,255,.1); border: 1px dashed rgba(255,255,255,.35);
  border-radius: var(--r-pill); padding: 7px 12px;
  font-size: var(--fs-caption); font-weight: 700; color: rgba(255,255,255,.92);
  transition-delay: .8s;
}
.hg-badge-masked svg { width: 13px; height: 13px; opacity: .85; }
.hg-tag {
  position: absolute; z-index: 2;
  font-size: var(--fs-caption); font-weight: 600; color: rgba(255,255,255,.75);
  opacity: 0; transition: opacity .5s ease .9s;
}
.in .hg-tag { opacity: 1; }
.hg-tag.big { font-size: var(--fs-h4); font-weight: 800; color: #fff; }

.hg-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hg-particle {
  position: absolute; bottom: 14%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dj-sky); opacity: 0;
}
.in .hg-particle { animation: hg-float 7s ease-in infinite; }
@keyframes hg-float {
  0%   { opacity: 0; transform: translateY(0) scale(.8); }
  10%  { opacity: .8; }
  85%  { opacity: 0; }
  100% { transform: translateY(-120px) scale(1.1); opacity: 0; }
}

.hg-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; position: relative; z-index: 1; }
.hg-chip {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: -0.01em;
  color: #fff; background: rgba(255,255,255,.12);
  border-radius: var(--r-pill); padding: 8px 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.hg-chip svg { width: 14px; height: 14px; color: var(--dj-sky); }
.hero-card.reveal.in .hc-row.reveal-row:nth-child(2) { transition-delay: .1s; }
.hero-card.reveal.in .hc-row.reveal-row:nth-child(3) { transition-delay: .2s; }

/* ---------- Process-flow diagram ---------- */
.flow { display: grid; gap: 12px; }
@media (min-width: 860px) {
  .flow {
    grid-auto-flow: column;
    grid-auto-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch; gap: 0;
  }
}
.flow-step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 24px 18px; text-align: center; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i, 0) * 130ms);
}
.in .flow-step { opacity: 1; transform: none; }
.flow-ico {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: var(--bg-blue-50); color: var(--dj-blue); margin-bottom: 14px;
}
.flow-ico svg { width: 26px; height: 26px; }
.flow-no {
  font-size: var(--fs-caption); font-weight: 800; letter-spacing: -0.01em;
  color: var(--dj-blue); margin-bottom: 6px;
}
.flow-step h4 { font-size: var(--fs-body); font-weight: 700; letter-spacing: -0.01em; }
.flow-step p { margin-top: 6px; font-size: var(--fs-small); color: var(--ink-2); }
.flow-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--dj-blue); padding: 4px 8px;
  opacity: 0; transition: opacity .4s ease;
  transition-delay: calc(var(--i, 0) * 130ms + 60ms);
}
.in .flow-arrow { opacity: .55; }
.flow-arrow svg { width: 26px; height: 26px; }
@media (max-width: 859px) {
  .flow-arrow { transform: rotate(90deg); }
}

/* ---------- Comparison bar chart (deposit) ---------- */
.chartcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px 24px 28px; box-shadow: var(--shadow-md);
}
.chartcard .chart-cap {
  text-align: center; font-size: var(--fs-small); color: var(--ink-2);
  margin-bottom: 26px;
}
.chartcard .chart-cap b { color: var(--dj-blue); font-weight: 800; }
.bars { display: flex; align-items: flex-end; justify-content: center; gap: 30px; }
.bar { flex: 1; max-width: 140px; text-align: center; }
.bar .track { height: 200px; display: flex; align-items: flex-end; }
.bar .col {
  position: relative; width: 100%; height: 6px; min-height: 6px;
  border-radius: 14px 14px 0 0;
  transition: height 1.3s cubic-bezier(.22,1,.36,1);
}
.in .bar .col { height: var(--h); }
.bar.base .col { background: linear-gradient(180deg, #cdd8ec, #dde5f3); }
.bar.dj .col { background: linear-gradient(180deg, var(--dj-blue), var(--dj-blue-soft)); box-shadow: 0 12px 26px rgba(0,70,255,.28); }
.bar .amt {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 8px; white-space: nowrap;
  font-size: var(--fs-h4); font-weight: 800; letter-spacing: -0.02em; color: var(--ink);
}
.bar.dj .amt { color: var(--dj-blue); }
.bar .lab { margin-top: 14px; font-size: var(--fs-small); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.bar .sub { display: block; font-size: var(--fs-caption); color: var(--ink-3); margin-top: 3px; font-weight: 500; }
.bar.dj .lab { color: var(--dj-blue); }
.chart-badge {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 auto;
  background: var(--bg-blue-50); color: var(--dj-blue);
  font-weight: 800; letter-spacing: -0.01em; font-size: var(--fs-small);
  padding: 9px 16px; border-radius: var(--r-pill);
}

/* ---------- Wait-time comparison (loan cash flow) ---------- */
.waitcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 24px; box-shadow: var(--shadow-md);
}
.wc-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 12px; }
.wc-row + .wc-row { margin-top: 20px; }
.wc-name { font-size: var(--fs-small); font-weight: 700; letter-spacing: -0.01em; }
.wc-row.bad .wc-name { color: var(--ink-2); }
.wc-row.good .wc-name { color: var(--dj-blue); }
.wc-bar { position: relative; height: 26px; border-radius: var(--r-pill); background: var(--bg-soft); overflow: hidden; }
.wc-bar span {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--r-pill);
  transition: width 1.3s cubic-bezier(.22,1,.36,1);
}
.in .wc-row.bad .wc-bar span { width: 100%; transition-duration: 1.6s; }
.in .wc-row.good .wc-bar span { width: 9%; }
.wc-row.bad .wc-bar span { background: repeating-linear-gradient(45deg, #f0b5ac, #f0b5ac 8px, #f6cfc8 8px, #f6cfc8 16px); }
.wc-row.good .wc-bar span { background: linear-gradient(90deg, var(--dj-blue), var(--dj-blue-soft)); }
.wc-days { font-size: var(--fs-small); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.wc-row.bad .wc-days { color: #c0492f; }
.wc-row.good .wc-days { color: var(--dj-blue); }
.waitcard .wc-foot { margin-top: 22px; text-align: center; font-size: var(--fs-small); color: var(--ink-2); }
.waitcard .wc-foot b { color: var(--dj-blue); font-weight: 800; }

/* ---------- Concept: revenue → limit (loan) ---------- */
.formula {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  margin-top: 30px;
}
.formula .fx {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 22px; text-align: center; min-width: 150px; box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i,0) * 140ms);
}
.in .formula .fx { opacity: 1; transform: none; }
.formula .fx .k { font-size: var(--fs-caption); color: var(--ink-3); font-weight: 600; }
.formula .fx .v { font-size: var(--fs-h4); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-top: 4px; }
.formula .fx.hl .v { color: var(--dj-blue); }
.formula .op { font-size: var(--fs-h3); font-weight: 800; color: var(--dj-blue); opacity: 0; transition: opacity .4s ease; transition-delay: calc(var(--i,0) * 140ms + 70ms); }
.in .formula .op { opacity: 1; }