/* assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Glass + subtle grain */
.glass {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(
    135deg,
    rgba(193, 232, 255, 0.55),
    rgba(125, 160, 202, 0.16)
  );
}
.glass-dark {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: linear-gradient(
    135deg,
    rgba(7, 32, 76, 0.62),
    rgba(84, 131, 179, 0.12)
  );
}
.grain:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  border-radius: inherit;
  mix-blend-mode: soft-light;
}

/* Micro-interactions */
.card {
  transition: transform 280ms cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 280ms,
    filter 280ms, border-color 280ms;
  will-change: transform, box-shadow;
}
.card:hover {
  transform: translateY(-7px);
}
.card:active {
  transform: scale(1.03);
}
.card.active-glow {
  box-shadow: 0 0 0 1px rgba(193, 232, 255, 0.25), 0 0 34px rgba(84, 131, 179, 0.55) !important;
}
.btn {
  position: relative;
  overflow: hidden;
  transition: filter 250ms, transform 250ms, background-position 350ms;
  background-size: 160% 160%;
  background-position: 0% 50%;
}
.btn:hover {
  background-position: 100% 50%;
  filter: brightness(1.04);
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.ripple {
  position: absolute;
  border-radius: 9999px;
  transform: scale(0);
  animation: ripple 650ms ease-out;
  background: rgba(193, 232, 255, 0.35);
  pointer-events: none;
}
@keyframes ripple {
  to {
    transform: scale(4.2);
    opacity: 0;
  }
}

/* Chart animations */
.chart-bar {
  transform-origin: bottom;
  animation: barIn 900ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
@keyframes barIn {
  from {
    transform: scaleY(0);
    opacity: 0.35;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}
.chart-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: lineDraw 1100ms ease-out forwards;
}
@keyframes lineDraw {
  to {
    stroke-dashoffset: 0;
  }
}
.fadeUp {
  animation: fadeUp 700ms ease-out both;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Focus ring */
.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(193, 232, 255, 0.55), 0 0 0 1px rgba(84, 131, 179, 0.55);
}