/* DIRA Gents — motion system
 * Keyframes + utility classes used across the app to make every state
 * change feel intentional. All animations honour prefers-reduced-motion.
 */

/* ── Keyframes ───────────────────────────────────────────────────────── */

@keyframes dira-shimmer {
  0%   { background-position: -480px 0; }
  100% { background-position: 480px 0; }
}

@keyframes dira-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dira-slide-up {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes dira-slide-down {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(0, 14px, 0); }
}

@keyframes dira-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes dira-sheet-up {
  from { transform: translate3d(0, 100%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@keyframes dira-ripple {
  to { transform: scale(2.4); opacity: 0; }
}

@keyframes dira-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(0, 102, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0); }
}

@keyframes dira-check-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes dira-spin {
  to { transform: rotate(360deg); }
}

/* ── Utility classes ─────────────────────────────────────────────────── */

.fade-in   { animation: dira-fade-in   var(--motion-base) var(--ease-out) both; }
.slide-up  { animation: dira-slide-up  var(--motion-base) var(--ease-out) both; }
.scale-in  { animation: dira-scale-in  var(--motion-base) var(--ease-out) both; }
.pulse-ring { animation: dira-pulse-ring 1.6s var(--ease-out) infinite; }

/* Stagger helper: add to a container, children appear one-by-one */
.stagger > * { animation: dira-slide-up var(--motion-base) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 40ms;  }
.stagger > *:nth-child(2) { animation-delay: 90ms;  }
.stagger > *:nth-child(3) { animation-delay: 140ms; }
.stagger > *:nth-child(4) { animation-delay: 190ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 290ms; }

/* ── Press / press-target ────────────────────────────────────────────── */
/* Adds a subtle lift on hover and a depress on active. */
.press {
  transition: transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out),
              filter var(--motion-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.press:hover  { transform: translateY(-1px); }
.press:active { transform: translateY(0) scale(0.97); filter: brightness(0.98); }

/* ── Ripple ─────────────────────────────────────────────────────────── */
/* The container needs position:relative + overflow:hidden. The ripple
 * span is injected by motion.js inside the container at click coordinates.
 */
.ripple-host { position: relative; overflow: hidden; }
.ripple-host > .ripple {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  opacity: 1;
  animation: dira-ripple 600ms var(--ease-out) forwards;
}
body.theme-light .ripple-host > .ripple {
  background: rgba(0, 102, 255, 0.22);
}

/* ── Skeleton shimmer ────────────────────────────────────────────────── */
.skel {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%
  );
  background-size: 480px 100%;
  animation: dira-shimmer 1.2s linear infinite;
}
body.theme-light .skel::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.06) 50%,
    transparent 100%
  );
  background-size: 480px 100%;
}

/* Pre-shaped skeletons */
.skel-line { height: 12px; border-radius: 6px; }
.skel-line.lg { height: 18px; }
.skel-line.xl { height: 28px; }
.skel-card { height: 140px; }
.skel-row  { height: 48px; }

/* ── Glass surface helper ────────────────────────────────────────────── */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
.glass-hi {
  background: var(--glass-hi);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

/* ── Chart primitives (used by charts.js) ────────────────────────────── */

.d-ring {
  position: relative;
  display: grid;
  place-items: center;
}
.d-ring-label {
  position: absolute;
  font-family: "Space Grotesk", sans-serif;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.d-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--glass-stroke);
  overflow: hidden;
  margin-top: 8px;
}
.d-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: 999px;
  background: var(--brand-grad);
  box-shadow: 0 0 12px rgba(0,102,255,0.45);
}

/* ── Reduced motion — respect the OS preference ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}