/* ═══ SGEO Design System v3.7.1 static adapter — Анимации и утилиты ═══
 Подключение: @import '@sgeo/ui-kit/src/animations/animations.css'; */

/* ── Keyframes ── */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes livePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
50% { box-shadow: 0 0 0 4px rgba(52,211,153,0); }
}
@keyframes barGrow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes drawLine {
from { stroke-dashoffset: 1000; }
to { stroke-dashoffset: 0; }
}
@keyframes subtleBreathe {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.8; }
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes toastSlideIn {
from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes toastSlideOut {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(100%); }
}
@keyframes barChartGrow {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}

/* ── Анимации ── */
.animate-fadeInUp {
  animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-fadeIn {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-barGrow {
  transform-origin: left;
  animation: barGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-livePulse {
  animation: livePulse 2s ease-in-out infinite;
}
.animate-subtleBreathe {
  animation: subtleBreathe 3s ease-in-out infinite;
}
.animate-shimmer {
  animation: shimmer 1.5s ease-in-out infinite;
}
.animate-toastSlideIn {
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-toastSlideOut {
  animation: toastSlideOut 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-drawLine {
  stroke-dasharray: 1000;
  animation: drawLine 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

/* ── Stagger delays ── */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.4s; }

/* ── Accent lines (верхний градиент на карточках) ── */
.accent-line-primary::before,
.accent-line-green::before,
.accent-line-amber::before,
.accent-line-red::before,
.accent-line-neutral::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
  z-index: 2;
  pointer-events: none;
}
.accent-line-primary::before {
  background: linear-gradient(90deg, hsl(var(--primary)) 0%, hsl(210 70% 55%) 100%);
}
.accent-line-green::before {
  background: linear-gradient(90deg, #059669 0%, #34d399 100%);
}
.accent-line-amber::before {
  background: linear-gradient(90deg, #d97706 0%, #fbbf24 100%);
}
.accent-line-red::before {
  background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
}
.accent-line-neutral::before {
  background: linear-gradient(90deg, #9ca3af 0%, #d1d5db 100%);
}

/* ── Card glow ── */
.card-glow::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 40px;
  opacity: 0.04;
  border-radius: 0 0 50% 50%;
  pointer-events: none;
}
.card-glow-primary::after { background: hsl(var(--primary)); }
.card-glow-green::after { background: #059669; }
.card-glow-amber::after { background: #d97706; }
.card-glow-red::after { background: #dc2626; }

/* ── Sidebar ── */
.sidebar-dark {
  background: linear-gradient(180deg, #141720 0%, #10131a 100%);
}
.sidebar-dark-border::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
}

/* ── Info tooltip trigger ── */
.info-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--av-border));
  color: hsl(var(--muted-foreground));
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  position: relative;
  user-select: none;
}
.info-trigger:hover {
  background: hsl(var(--primary) / 0.06);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  transform: scale(1.1);
}

/* ── Section divider ── */
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, hsl(var(--av-border)) 0%, transparent 100%);
}

/* ── Status strip ── */
.status-strip {
  display: flex;
  gap: 28px;
  padding: 14px 28px;
  background: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--av-border));
  border-radius: 14px;
}
@media (max-width: 768px) {
  .status-strip {
    padding: 10px 12px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .status-strip::-webkit-scrollbar { display: none; }
  .status-strip > * { white-space: nowrap; flex-shrink: 0; }
}

/* ── Rank badge ── */
.rank-num {
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: hsl(var(--muted));
  font-size: 11px;
  font-weight: 700;
  color: hsl(var(--muted-foreground));
}

/* ── Language tag ── */
.lang-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--av-border));
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Tabular nums ── */
.tabular-nums {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.animate-fadeInUp,
.animate-fadeIn,
.animate-barGrow,
.animate-livePulse,
.animate-subtleBreathe,
.animate-drawLine,
.animate-shimmer,
.animate-toastSlideIn,
.animate-toastSlideOut {
  animation-duration: 0.001ms !important;
  animation-delay: 0ms !important;
}
}