/* Showcase frames — charts & KPIs (no code/video) */

.code-showcase-frame--dash {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.code-showcase-frame--dash .showcase-dash {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem 1.15rem;
  font-family: var(--font-body);
  color: #e2e8f0;
  min-height: 0;
}

.showcase-dash__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.showcase-dash__title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.9);
}

.showcase-dash__live {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5eead4;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.showcase-dash__live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 8px #5eead4;
  animation: dash-pulse 1.8s ease-in-out infinite;
}

@keyframes dash-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.showcase-dash__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.showcase-dash__kpi {
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.showcase-dash--active .showcase-dash__kpi {
  animation:
    dash-kpi-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards,
    dash-kpi-glow 3s ease-in-out 0.6s infinite alternate;
}

.showcase-dash--active .showcase-dash__kpi:nth-child(2) {
  animation-delay: 0.07s;
}

.showcase-dash--active .showcase-dash__kpi:nth-child(3) {
  animation-delay: 0.14s;
}

@keyframes dash-kpi-pop {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dash-kpi-glow {
  from {
    border-color: rgba(148, 163, 184, 0.1);
    box-shadow: inset 0 0 0 transparent;
  }
  to {
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: inset 0 0 12px rgba(148, 163, 184, 0.06);
  }
}

.showcase-dash__kpi-val {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
  color: #f8fafc;
}

.showcase-dash__kpi-label {
  font-size: 0.62rem;
  color: #94a3b8;
  margin-top: 0.2rem;
  line-height: 1.2;
}

.showcase-dash__charts {
  flex: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0.75rem;
  min-height: 0;
}

.showcase-dash__panel {
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.1);
  min-height: 0;
  overflow: hidden;
}

.showcase-dash__panel-title {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 0.45rem;
  flex-shrink: 0;
}

.showcase-dash__svg {
  flex: 1;
  width: 100%;
  min-height: 88px;
  display: block;
  overflow: visible;
}

.showcase-dash__grid-line {
  stroke: rgba(148, 163, 184, 0.12);
  stroke-width: 1;
}

.showcase-dash--active .showcase-dash__grid-line {
  animation: dash-grid-shimmer 3.2s ease-in-out infinite;
}

.showcase-dash--active .showcase-dash__grid-line:nth-child(2) {
  animation-delay: 0.35s;
}

.showcase-dash--active .showcase-dash__grid-line:nth-child(3) {
  animation-delay: 0.7s;
}

@keyframes dash-grid-shimmer {
  0%,
  100% {
    stroke: rgba(148, 163, 184, 0.1);
    opacity: 0.65;
  }
  50% {
    stroke: rgba(148, 163, 184, 0.28);
    opacity: 1;
  }
}

.showcase-dash__baseline {
  stroke: rgba(148, 163, 184, 0.22);
  stroke-width: 1;
}

.showcase-dash--active .showcase-dash__baseline {
  animation: dash-baseline-pulse 2.8s ease-in-out infinite;
}

@keyframes dash-baseline-pulse {
  0%,
  100% {
    stroke: rgba(148, 163, 184, 0.18);
  }
  50% {
    stroke: rgba(148, 163, 184, 0.38);
  }
}

/* SVG transforms: fill-box keeps bars anchored to their geometry */
.showcase-dash__bar-v,
.showcase-dash__bar-h {
  transform-box: fill-box;
}

.showcase-dash__bar-v {
  transform-origin: 50% 100%;
  transform: scaleY(0);
}

.showcase-dash__bar-h {
  transform-origin: 0% 50%;
  transform: scaleX(0);
}

.showcase-dash__bar-track {
  fill: rgba(148, 163, 184, 0.14);
}

.showcase-dash--active .showcase-dash__bar-v {
  animation:
    dash-bar-grow-y 1s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    dash-bar-breathe-y 2.6s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s), calc(1s + var(--delay, 0s));
}

.showcase-dash--active .showcase-dash__bar-h {
  animation:
    dash-bar-grow-x 1s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    dash-bar-breathe-x 2.8s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s), calc(1s + var(--delay, 0s));
}

@keyframes dash-bar-grow-y {
  to { transform: scaleY(1); }
}

@keyframes dash-bar-grow-x {
  to { transform: scaleX(1); }
}

@keyframes dash-bar-breathe-y {
  from { transform: scaleY(0.82); }
  to { transform: scaleY(1); }
}

@keyframes dash-bar-breathe-x {
  from { transform: scaleX(0.78); }
  to { transform: scaleX(1); }
}

.showcase-dash__line-draw {
  stroke-dasharray: var(--line-len, 420);
  stroke-dashoffset: var(--line-len, 420);
}

.showcase-dash--active .showcase-dash__line-draw {
  animation:
    dash-line-draw 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    dash-line-flow 3.5s linear 1.95s infinite;
  animation-delay: 0.15s, 1.95s;
}

@keyframes dash-line-draw {
  to {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--line-len, 420);
  }
}

@keyframes dash-line-flow {
  0% {
    stroke-dasharray: 16 12;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 16 12;
    stroke-dashoffset: -56;
  }
}

.showcase-dash__area-fill {
  opacity: 0;
}

.showcase-dash--active .showcase-dash__area-fill {
  animation:
    dash-area-in 1.4s ease-out 0.35s forwards,
    dash-area-breathe 3s ease-in-out 1.6s infinite alternate;
}

@keyframes dash-area-in {
  to { opacity: 0.9; }
}

@keyframes dash-area-breathe {
  from { opacity: 0.55; }
  to { opacity: 0.95; }
}

.showcase-dash__line-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.showcase-dash--active .showcase-dash__line-dot {
  animation:
    dash-dot-in 0.4s ease-out 1.5s forwards,
    dash-dot-pulse 2s ease-in-out 1.9s infinite;
}

@keyframes dash-dot-in {
  to { opacity: 1; }
}

@keyframes dash-dot-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    transform: scale(1.35);
    filter: drop-shadow(0 0 6px #a78bfa);
  }
}

.showcase-dash__donut-center {
  opacity: 0;
}

.showcase-dash--cyan .showcase-dash__kpi-val { color: #22d3ee; }
.showcase-dash--violet .showcase-dash__kpi-val { color: #c4b5fd; }
.showcase-dash--violet .showcase-dash__live { color: #a78bfa; }
.showcase-dash--violet .showcase-dash__live::before { background: #a78bfa; box-shadow: 0 0 8px #a78bfa; }
.showcase-dash--green .showcase-dash__kpi-val { color: #86efac; }
.showcase-dash--green .showcase-dash__live { color: #86efac; }
.showcase-dash--green .showcase-dash__live::before { background: #86efac; box-shadow: 0 0 8px #86efac; }

.showcase-dash__donut-seg {
  opacity: 0.35;
  stroke-linecap: round;
}

.showcase-dash--active .showcase-dash__donut-seg {
  animation:
    dash-donut-seg 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    dash-donut-pulse 3.2s ease-in-out 1.15s infinite alternate;
  animation-delay: var(--delay, 0s), calc(1.15s + var(--delay, 0s));
}

@keyframes dash-donut-seg {
  from {
    opacity: 0.2;
    stroke-dashoffset: var(--donut-from, 80);
  }
  to {
    opacity: 1;
    stroke-dashoffset: var(--donut-to, 0);
  }
}

@keyframes dash-donut-pulse {
  from {
    opacity: 0.72;
    filter: drop-shadow(0 0 0 transparent);
  }
  to {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.45));
  }
}

.showcase-dash--active .showcase-dash__donut-center {
  animation:
    dash-fade-in 0.5s ease-out 0.9s forwards,
    dash-donut-center-pulse 2.4s ease-in-out 1.4s infinite alternate;
}

@keyframes dash-donut-center-pulse {
  from {
    opacity: 0.85;
  }
  to {
    opacity: 1;
  }
}

@keyframes dash-fade-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-dash__bar-v,
  .showcase-dash__bar-h,
  .showcase-dash__line-draw,
  .showcase-dash__donut-seg,
  .showcase-dash__area-fill,
  .showcase-dash__line-dot,
  .showcase-dash__donut-center,
  .showcase-dash__kpi,
  .showcase-dash__grid-line,
  .showcase-dash__baseline,
  .showcase-dash__live::before {
    animation: none !important;
    transform: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .showcase-dash__bar-v {
    transform: scaleY(1);
  }

  .showcase-dash__bar-h {
    transform: scaleX(1);
  }
}