.bar-tx {
  width: 0%;
  animation: fill-bar 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  --tw-bar-end: 32%;
}
.bar-rx {
  width: 0%;
  animation: fill-bar 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  --tw-bar-end: 18%;
}
@keyframes fill-bar {
  from {
    width: 0%;
  }
  to {
    width: var(--tw-bar-end, 50%);
  }
}
.bar-cpu {
  width: 0%;
  animation: fill-bar 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
  --tw-bar-end: 18%;
}
.bar-temp {
  width: 0%;
  animation: fill-bar 1.8s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
  --tw-bar-end: 30%;
}

.sparkline-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw-sparkline 2s ease 0.5s forwards;
}
@keyframes draw-sparkline {
  from {
    stroke-dashoffset: 200;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* glass card */
.glass-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
  0 8px 32px rgba(0, 0, 0, 0.225),
  inset 0 1px 0 rgba(255, 255, 255, 0.06),
  0 0 0 1px rgba(255, 255, 255, 0.015);
}

/* shine pseudo */
.shine-card {
  position: relative;
  overflow: hidden;
}
.shine-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.055),
    transparent
  );
  animation: shine-sweep 5s ease infinite;
  pointer-events: none;
}
.shine-card-delayed::after {
  animation-delay: 2.5s;
}

/* glow-green / glow-blue as box-shadow animation */
.dot-glow-green {
  animation: glow-green 2.5s ease-in-out infinite;
  border-radius: 9999px;
}
.dot-glow-blue {
  animation: glow-blue 2.5s ease-in-out infinite 1.2s;
  border-radius: 9999px;
}

/* animation delays */
.delay-150 {
  animation-delay: 150ms;
}
.delay-1500 {
  animation-delay: 1500ms;
}
  @keyframes spin-sf  { to { transform: rotate(360deg); } }
  @keyframes spin-sfr { to { transform: rotate(-360deg); } }
  @keyframes float-s  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
  @keyframes float-d  { 0%,100%{transform:translateY(0) rotate(6deg)} 50%{transform:translateY(-8px) rotate(6deg)} }
  @keyframes bounce-s { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
  @keyframes pulse-s  { 0%,100%{opacity:1} 50%{opacity:.6} }
  @keyframes grad-x   { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
  @keyframes blink    { 0%,100%{opacity:1} 50%{opacity:0} }
  @keyframes fill-bar { from{width:0} to{width:var(--w)} }
  @keyframes count-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
  @keyframes temp-flicker { 0%,100%{color:#fb923c} 50%{color:#f97316} }
  @keyframes slide-in { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
  @keyframes tflops-float { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-8px) rotate(-3deg)} }

  .spin-sf   { animation: spin-sf  0.4s linear infinite; }
  .spin-sfr  { animation: spin-sfr 0.4s linear infinite; }
  .float-s   { animation: float-s  4s ease-in-out infinite; }
  .float-d   { animation: float-d  3.5s ease-in-out infinite .5s; }
  .bounce-s  { animation: bounce-s 3s ease-in-out infinite; }
  .pulse-s   { animation: pulse-s  3s ease-in-out infinite; }
  .grad-x    { animation: grad-x   3s ease infinite; background-size:200% 200%; }
  .blink     { animation: blink    1s step-end infinite; }
  .temp-f    { animation: temp-flicker 2s ease-in-out infinite; }
  .slide-in  { animation: slide-in .6s ease forwards; opacity:0; }
  .tflops-f  { animation: tflops-float 4s ease-in-out infinite 1s; }
  .si-1 { animation-delay:.0s }
  .si-2 { animation-delay:.1s }
  .si-3 { animation-delay:.2s }
@keyframes glow-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.glow-pulse { animation: glow-pulse 4s ease-in-out infinite; }
.float-slow { animation: float-slow 6s ease-in-out infinite; }
.slide-up { animation: slide-up 0.5s ease forwards; }
.gpu-tab-btn.active {
  background: #b8e64c;
  color: #000;
  border-color: #b8e64c;
}
.gpu-plan-group { display: none; }
.gpu-plan-group.active { display: block; }