/* ═══════════════════════════════════════════════════════════════
   NFS Auto Design System — ARROWS & POINTERS PACK
   6 систем · 16 иконок · анимированные SVG-стрелки
   ═══════════════════════════════════════════════════════════════ */

/* Маппинг переменных на дизайн-систему NFS */
.nfs-arrows-pack {
  --white: var(--nfs-white, #fff);
  --bg: var(--nfs-bg, #F0F3F8);
  --surface: var(--nfs-surface, #fff);
  --blue: var(--nfs-blue, #1A5FD9);
  --blue2: var(--nfs-blue2, #2B6FE8);
  --blue3: var(--nfs-blue3, #3B7FFF);
  --blue-g: var(--nfs-blue-g, linear-gradient(150deg, #3B7FFF, #1A5FD9, #1248B0));
  --blue-glow: var(--nfs-blue-glow, rgba(26, 95, 217, .28));
  --blue-light: var(--nfs-blue-light, rgba(26, 95, 217, .08));
  --red: var(--nfs-red, #C92222);
  --red2: var(--nfs-red2, #E03030);
  --green: var(--nfs-green, #14A34A);
  --green2: var(--nfs-green2, #22C55E);
  --amber: var(--nfs-amber, #D97706);
  --amber2: var(--nfs-amber2, #F59E0B);
  --ch1: var(--nfs-ch1, #F4F6FA);
  --ch2: var(--nfs-ch2, #E0E5F0);
  --ch3: var(--nfs-ch3, #B8C0D4);
  --ch4: var(--nfs-ch4, #7A86A0);
  --ch5: var(--nfs-ch5, #3A4260);
  --dark: var(--nfs-dark, #0D1117);
  --dark2: var(--nfs-dark2, #111827);
  --dark3: var(--nfs-dark3, #1A2035);
  --t1: var(--nfs-t1, #0D1117);
  --t2: var(--nfs-t2, #2A3450);
  --t3: var(--nfs-t3, #5A6480);
  --t4: var(--nfs-t4, #9AA0B8);
  --b1: var(--nfs-b1, rgba(58, 66, 96, .07));
  --b2: var(--nfs-b2, rgba(58, 66, 96, .12));
  --mono: 'Share Tech Mono', 'Courier New', monospace;
  --ff: 'Montserrat', system-ui, sans-serif;
  font-family: var(--ff);
  color: var(--t1);
}

/* ── ANIMATIONS ── */
@keyframes nfs-arr-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes nfs-arr-chase-r {
  0% { opacity: 0; transform: translateX(-10px); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateX(10px); }
}

@keyframes nfs-arr-chase-d {
  0% { opacity: 0; transform: translateY(-10px); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px); }
}

@keyframes nfs-arr-chase-l {
  0% { opacity: 0; transform: translateX(10px); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-10px); }
}

@keyframes nfs-arr-chase-u {
  0% { opacity: 0; transform: translateY(10px); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes nfs-arr-bounce-r {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

@keyframes nfs-arr-bounce-d {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@keyframes nfs-arr-bounce-u {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes nfs-arr-pulse-dot {
  0%, 100% { opacity: .4; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes nfs-arr-trace {
  from { stroke-dashoffset: 120; }
  to { stroke-dashoffset: 0; }
}

@keyframes nfs-arr-trace-long {
  from { stroke-dashoffset: 300; }
  to { stroke-dashoffset: 0; }
}

@keyframes nfs-arr-neon-pulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(59, 127, 255, .5)); }
  50% { filter: drop-shadow(0 0 10px rgba(59, 127, 255, .9)); }
}

@keyframes nfs-arr-spin-slow {
  to { transform: rotate(360deg); }
}

@keyframes nfs-arr-flag-flutter {
  0%, 100% { transform: skewX(0deg) scaleX(1); }
  33% { transform: skewX(-3deg) scaleX(.97); }
  66% { transform: skewX(3deg) scaleX(1.02); }
}

/* ── LAYOUT ── */
.nfs-arrows-pack .sec {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--t4);
  margin: 24px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nfs-arrows-pack .sec::before {
  content: '';
  width: 3px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--blue) 33%, var(--red) 33% 66%, var(--ch3) 66%);
}

.nfs-arrows-pack .brand-strip {
  height: 2px;
  border-radius: 2px;
  margin: 20px 0;
  background: linear-gradient(90deg, transparent 0%, var(--blue) 10%, var(--blue3) 20%, #fff 28%, var(--blue3) 36%, var(--blue) 44%, var(--red) 52%, #ffaaaa 60%, var(--red) 68%, var(--ch3) 76%, #fff 84%, var(--ch3) 92%, transparent 100%);
  background-size: 300% 100%;
  animation: nfs-arr-shimmer 4s linear infinite;
}

.nfs-arrows-pack .card {
  background: linear-gradient(170deg, var(--white), var(--ch1));
  border: 0.5px solid var(--b1);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .9) inset;
}

.nfs-arrows-pack .dark-card {
  background: linear-gradient(155deg, var(--dark), var(--dark2));
  border: 0.5px solid rgba(26, 95, 217, .2);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
}

.nfs-arrows-pack .dark-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue) 20%, var(--blue3) 30%, #fff 38%, var(--blue3) 46%, var(--red) 58%, #ffaaaa 65%, var(--red) 72%, var(--ch3) 82%, #fff 89%, var(--ch3) 95%, transparent);
  background-size: 300% 100%;
  animation: nfs-arr-shimmer 3.5s linear infinite;
}

.nfs-arrows-pack .g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.nfs-arrows-pack .g3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.nfs-arrows-pack .row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.nfs-arrows-pack .col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.nfs-arrows-pack .lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--t4);
  text-align: center;
}

/* ── ARROW BASE CLASSES ── */
/* Chase arrows — sequential fade chase animation */
.nfs-arrows-pack .chase-group {
  display: flex;
  gap: 2px;
  align-items: center;
}

.nfs-arrows-pack .ca {
  animation-fill-mode: both;
}

.nfs-arrows-pack .chase-r .ca:nth-child(1) { animation: nfs-arr-chase-r 1.2s ease-in-out infinite 0s; }
.nfs-arrows-pack .chase-r .ca:nth-child(2) { animation: nfs-arr-chase-r 1.2s ease-in-out infinite .2s; }
.nfs-arrows-pack .chase-r .ca:nth-child(3) { animation: nfs-arr-chase-r 1.2s ease-in-out infinite .4s; }

.nfs-arrows-pack .chase-d .ca:nth-child(1) { animation: nfs-arr-chase-d 1.2s ease-in-out infinite 0s; }
.nfs-arrows-pack .chase-d .ca:nth-child(2) { animation: nfs-arr-chase-d 1.2s ease-in-out infinite .2s; }
.nfs-arrows-pack .chase-d .ca:nth-child(3) { animation: nfs-arr-chase-d 1.2s ease-in-out infinite .4s; }

.nfs-arrows-pack .chase-u .ca:nth-child(1) { animation: nfs-arr-chase-u 1.2s ease-in-out infinite 0s; }
.nfs-arrows-pack .chase-u .ca:nth-child(2) { animation: nfs-arr-chase-u 1.2s ease-in-out infinite .2s; }
.nfs-arrows-pack .chase-u .ca:nth-child(3) { animation: nfs-arr-chase-u 1.2s ease-in-out infinite .4s; }

.nfs-arrows-pack .chase-l .ca:nth-child(1) { animation: nfs-arr-chase-l 1.2s ease-in-out infinite .4s; }
.nfs-arrows-pack .chase-l .ca:nth-child(2) { animation: nfs-arr-chase-l 1.2s ease-in-out infinite .2s; }
.nfs-arrows-pack .chase-l .ca:nth-child(3) { animation: nfs-arr-chase-l 1.2s ease-in-out infinite 0s; }

/* Arrow button base */
.nfs-arrows-pack .arr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 9px;
  border: 0.5px solid var(--b2);
  background: linear-gradient(160deg, var(--white), var(--ch1));
  font-family: var(--ff);
  font-size: 12px;
  font-weight: 700;
  color: var(--t2);
  transition: all .2s;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .9) inset;
  position: relative;
  overflow: hidden;
}

.nfs-arrows-pack .arr-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .25) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  pointer-events: none;
  transition: background-position .4s;
}

.nfs-arrows-pack .arr-btn:hover::after {
  background-position: -200% center;
}

.nfs-arrows-pack .arr-btn:hover {
  border-color: rgba(26, 95, 217, .35);
  box-shadow: 0 0 0 3px var(--blue-glow);
}

.nfs-arrows-pack .arr-btn .arr-icon {
  animation: nfs-arr-bounce-r 1.4s ease-in-out infinite;
}

.nfs-arrows-pack .arr-btn.prev .arr-icon {
  animation: none;
}

/* Inline text arrow link */
.nfs-arrows-pack .arr-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  transition: gap .2s;
}

.nfs-arrows-pack .arr-link:hover {
  gap: 8px;
}

.nfs-arrows-pack .arr-link .ali {
  transition: transform .2s;
}

.nfs-arrows-pack .arr-link:hover .ali {
  transform: translateX(2px);
}

/* Large CTA arrow button */
.nfs-arrows-pack .arr-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  background: var(--blue-g);
  color: #fff;
  font-family: var(--ff);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 2px 12px rgba(26, 95, 217, .35), 0 1px 0 rgba(255, 255, 255, .2) inset, 0 0 0 1px rgba(59, 127, 255, .4);
  transition: transform .15s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}

.nfs-arrows-pack .arr-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .2) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  pointer-events: none;
  transition: background-position .4s;
}

.nfs-arrows-pack .arr-cta:hover::after {
  background-position: -200% center;
}

.nfs-arrows-pack .arr-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(59, 127, 255, .5), 0 0 20px rgba(59, 127, 255, .3), 0 6px 18px rgba(26, 95, 217, .35);
}

.nfs-arrows-pack .arr-cta .arr-icon {
  animation: nfs-arr-bounce-r 1.4s ease-in-out infinite;
}

/* Neon arrow (dark context) */
.nfs-arrows-pack .arr-neon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: nfs-arr-neon-pulse 2.5s ease-in-out infinite;
  cursor: pointer;
}

/* ── RESPONSIVE ── */
@media (max-width: 992px) {
  .nfs-arrows-pack .g2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nfs-arrows-pack .row {
    justify-content: center;
  }
}