/* ==== cta.css — «Тасалбар авах» товчны анхаарал татах хөдөлгөөн (батлагдсан: A · Долгио, 2026-10-25) ====
   Товчноос машины өнгөтэй (--cyan) гэрлийн цагираг гадагш тархаж, товч зөөлөн «амьсгална».
   Хамаарах товчнууд:
     .cta      — нүүрний «Тасалбар авах» (#hBuy), худалдан авах хуудасны төлбөрийн товч (#bGo)
     .c-btn    — сугалааны карт дээрх «Тасалбар авах» (.off-оос бусад); машины өнгөөр дүүргэсэн товч (pages.css)
   ⚠ .c-btn-ийн ::after картыг бүхэлд нь дардаг болгодог (pages.css) — тиймээс position, pseudo өгөхгүй;
     цагиргийг товчны өөрийн box-shadow-оор хийнэ.
   Хулгана очиход зогсоно; «хөдөлгөөн багасгах» тохиргоотой төхөөрөмжид хөдлөхгүй.
   Бусад хувилбарууд (B · Гялбаа, C · Сэгсрэлт): cta-variants.css                                   */

.cta { animation: ctaBreath 2.4s ease-in-out infinite, ctaRing 2.4s cubic-bezier(.2,.7,.3,1) infinite; }
/* Картын хар товч: машины өнгөт хүрээ, гэрэл хэвээр үлдэж, гадна нь долгио тархана (--car = тухайн машин) */
.c-btn:not(.off) { animation: ctaBreath 2.4s ease-in-out infinite, ctaRingCard 2.4s cubic-bezier(.2,.7,.3,1) infinite; }
/* Карт дээрх товчнууд бүгд нэг зэрэг лугшихгүйн тулд дарааллаар нь бага зэрэг хоцроно */
.card:nth-child(3n+2) .c-btn { animation-delay: -.8s, -.8s; }
.card:nth-child(3n+3) .c-btn { animation-delay: -1.6s, -1.6s; }

@keyframes ctaRingCard {
  0%       { box-shadow: 0 0 0 1.5px var(--car, var(--cyan)), 0 0 18px -4px var(--car, var(--cyan)), 0 0 0 1.5px color-mix(in srgb, var(--car, var(--cyan)) 75%, transparent); }
  70%,100% { box-shadow: 0 0 0 1.5px var(--car, var(--cyan)), 0 0 18px -4px var(--car, var(--cyan)), 0 0 0 14px color-mix(in srgb, var(--car, var(--cyan)) 0%, transparent); }
}
@keyframes ctaBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes ctaRing {
  0%       { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 70%, transparent), 0 8px 24px -10px color-mix(in srgb, var(--cyan) 80%, transparent); }
  70%,100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--cyan) 0%, transparent), 0 8px 24px -10px color-mix(in srgb, var(--cyan) 80%, transparent); }
}

.cta:hover, .cta:focus-visible, .c-btn:hover, .c-btn:focus-visible, .card:hover .c-btn { animation-play-state: paused; }

/* Утсан дээр: цагираг арай жижиг (дэлгэцийн ирмэгээс хальж харагдахгүй) */
@media (max-width: 560px) {
  @keyframes ctaRing {
    0%       { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 70%, transparent), 0 8px 24px -10px color-mix(in srgb, var(--cyan) 80%, transparent); }
    70%,100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--cyan) 0%, transparent), 0 8px 24px -10px color-mix(in srgb, var(--cyan) 80%, transparent); }
  }
  @keyframes ctaRingCard {
    0%       { box-shadow: 0 0 0 1.5px var(--car, var(--cyan)), 0 0 18px -4px var(--car, var(--cyan)), 0 0 0 1.5px color-mix(in srgb, var(--car, var(--cyan)) 75%, transparent); }
    70%,100% { box-shadow: 0 0 0 1.5px var(--car, var(--cyan)), 0 0 18px -4px var(--car, var(--cyan)), 0 0 0 9px color-mix(in srgb, var(--car, var(--cyan)) 0%, transparent); }
  }
}
@media (prefers-reduced-motion: reduce) { .cta, .c-btn { animation: none !important; } }

/* «Тун удахгүй» картын явцын мөр: судал зөөлөн гүйнэ — «бэлтгэгдэж байна» гэсэн мэдрэмж (pages.css .soon-bar) */
.soon-bar span { animation: soonStripe 1.6s linear infinite; }
@keyframes soonStripe { to { background-position: 22.6px 0; } }
/* Тэмдгийн цэг аажуу анивчина */
.c-soon::before, .soon-pill::before { animation: soonDot 1.8s ease-in-out infinite; }
@keyframes soonDot { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .soon-bar span, .c-soon::before { animation: none !important; } }