/* =========================================================
   MyTech — Нүүр хуудасны нэмэлт загвар ба motion
   (Tailwind-аар хийхэд төвөгтэй анимациуд энд)
   ========================================================= */

/* ---------- 1. SETUP SLIDER ---------- */
.setup-slider {
  position: relative;
  border-radius: 1.75rem;
  padding: 2px;                       /* RGB хүрээний зузаан */
  overflow: hidden;
  isolation: isolate;
}

/* Эргэлдэх RGB хүрээ: том conic-gradient-ийг эргүүлж, padding-ийн зайгаар харуулна */
.setup-slider::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -2;
  background: conic-gradient(from 0deg, #ff0040, #ff6a1a, #ffe600, #00ff88, #00c8ff, #7a3cff, #ff00d4, #ff0040);
  animation: rgb-spin 6s linear infinite;
}
@keyframes rgb-spin { to { transform: rotate(360deg); } }

.setup-viewport {
  position: relative;
  overflow: hidden;
  border-radius: calc(1.75rem - 2px);
  background: #0b0b0d;
  touch-action: pan-y;
}
.setup-track {
  display: flex;
  will-change: transform;
  transition: transform .8s cubic-bezier(.65, 0, .25, 1);
}
.setup-track.no-anim { transition: none; }

.setup-slide {
  --c1: #ff6a1a;                      /* слайд бүрийн RGB өнгө (home.js-ээс) */
  --c2: #e3261b;
  position: relative;
  flex: 0 0 100%;
  min-height: 420px;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 80% 60%, color-mix(in srgb, var(--c1) 45%, transparent), transparent 70%),
    radial-gradient(50% 60% at 20% 100%, color-mix(in srgb, var(--c2) 40%, transparent), transparent 70%),
    linear-gradient(135deg, #0b0b0d 0%, #141416 55%, #0b0b0d 100%);
}
/* Фото (ачаалагдвал) — идэвхтэй слайд дээр аажуухан томорно (Ken Burns) */
.setup-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .35;
  mix-blend-mode: screen;
  transform: scale(1.05);
  transition: transform 6s ease-out;
}
.setup-slide.is-active .setup-photo { transform: scale(1.15); }

/* Текст орж ирэх motion */
.setup-copy > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.setup-slide.is-active .setup-copy > * { opacity: 1; transform: none; }
.setup-slide.is-active .setup-copy > *:nth-child(2) { transition-delay: .12s; }
.setup-slide.is-active .setup-copy > *:nth-child(3) { transition-delay: .24s; }
.setup-slide.is-active .setup-copy > *:nth-child(4) { transition-delay: .36s; }
.setup-slide.is-active .setup-copy > *:nth-child(5) { transition-delay: .48s; }

/* Шал дээрх RGB гэрлийн туяа */
.setup-floor {
  position: absolute; left: -10%; right: -10%; bottom: -40px; height: 120px;
  background: linear-gradient(90deg, var(--c2), var(--c1), var(--c2));
  filter: blur(40px);
  opacity: .55;
  animation: floor-breathe 3.5s ease-in-out infinite;
}
@keyframes floor-breathe { 50% { opacity: .25; } }

/* ---------- 1б. CSS-ээр зурсан RGB PC (зураг ачаалагдаагүй ч харагдана) ---------- */
.rig {
  position: relative;
  width: 210px; height: 300px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 0 40px color-mix(in srgb, var(--c1) 55%, transparent),
              inset 0 0 30px color-mix(in srgb, var(--c1) 25%, transparent);
  animation: rig-glow 4s ease-in-out infinite;
}
@keyframes rig-glow {
  50% { box-shadow: 0 0 60px color-mix(in srgb, var(--c2) 60%, transparent),
                    inset 0 0 40px color-mix(in srgb, var(--c2) 30%, transparent); }
}
.rig-fans { position: absolute; left: 18px; top: 22px; display: grid; gap: 12px; }
.fan {
  width: 64px; height: 64px; border-radius: 50%;
  background:
    radial-gradient(circle, #0b0b0d 0 22%, transparent 23%),
    conic-gradient(from 0deg, var(--c1), var(--c2), var(--c1), var(--c2), var(--c1));
  -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 19% 46%, transparent 47% 52%, #000 53%);
          mask: radial-gradient(circle, transparent 0 18%, #000 19% 46%, transparent 47% 52%, #000 53%);
  filter: drop-shadow(0 0 10px var(--c1));
  animation: rgb-spin 1.6s linear infinite;
}
.rig-gpu {
  position: absolute; right: 14px; top: 120px;
  width: 104px; height: 34px; border-radius: 6px;
  background: linear-gradient(90deg, #1c1c20, #2a2a30);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 2px 0 var(--c1), 0 0 18px color-mix(in srgb, var(--c1) 60%, transparent);
}
.rig-gpu::after {                      /* GPU дээрх гэрлийн зурвас */
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--c2), var(--c1), var(--c2));
  background-size: 200% 100%;
  animation: strip-flow 2.4s linear infinite;
}
.rig-cpu {
  position: absolute; right: 30px; top: 40px;
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px solid var(--c1);
  box-shadow: 0 0 22px var(--c1), inset 0 0 14px var(--c1);
  animation: rig-glow 3s ease-in-out infinite;
}
.rig-strip {
  position: absolute; left: 12px; right: 12px; bottom: 14px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c1));
  background-size: 200% 100%;
  animation: strip-flow 3s linear infinite;
}
@keyframes strip-flow { to { background-position: 200% 0; } }

/* Дэлгэц + гар (setup мэдрэмж) */
.desk-monitor {
  position: relative;
  width: 260px; height: 160px; border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 35%, #0b0b0d), #0b0b0d 60%, color-mix(in srgb, var(--c2) 35%, #0b0b0d));
  border: 3px solid #1c1c20;
  box-shadow: 0 0 50px color-mix(in srgb, var(--c1) 35%, transparent);
}
.desk-monitor::after {                 /* дэлгэцийн хөл */
  content: ""; position: absolute; left: 50%; bottom: -26px; width: 60px; height: 24px;
  transform: translateX(-50%);
  background: linear-gradient(#1c1c20, #0b0b0d);
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
}
.desk-keyboard {
  width: 220px; height: 16px; margin-top: 34px; border-radius: 4px;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c1));
  background-size: 200% 100%;
  animation: strip-flow 2s linear infinite;
  box-shadow: 0 0 20px color-mix(in srgb, var(--c1) 70%, transparent);
  opacity: .9;
}

/* Явцын зурвас (дараагийн слайд хүртэл) */
.setup-progress { height: 3px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.setup-progress > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #e3261b, #ff6a1a, #ffb347);
}
.setup-progress > span.run { animation: progress-fill var(--dur, 5s) linear forwards; }
.setup-slider.is-paused .setup-progress > span.run { animation-play-state: paused; }
@keyframes progress-fill { to { width: 100%; } }

/* ---------- 2. АНГИЛЛЫН ИКОН КАРТ ---------- */
.cat-card svg { transition: transform .25s ease, color .25s ease; }
.cat-card:hover svg, .cat-card:focus-visible svg { transform: translateY(-3px) scale(1.08); }

/* ---------- 3. ТӨЛБӨРИЙН ТҮНШҮҮД ---------- */
.partner-card { transition: transform .2s ease, box-shadow .2s ease; }
.partner-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px -10px rgba(255,106,26,.45); }

/* ---------- Хөдөлгөөн багасгах тохиргоотой хэрэглэгчид ---------- */
@media (prefers-reduced-motion: reduce) {
  .setup-slider::before, .fan, .rig, .rig-cpu, .rig-strip, .rig-gpu::after,
  .desk-keyboard, .setup-floor { animation: none !important; }
  .setup-track { transition-duration: .01s; }
  .setup-photo, .setup-copy > * { transition: none !important; }
  .setup-copy > * { opacity: 1; transform: none; }
}

/* ---------- 1в. Слайд дээрх бодит PC-ийн зураг ---------- */
.setup-shot {
  width: min(100%, 300px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1.25rem;
  border: 2px solid color-mix(in srgb, var(--c1) 75%, transparent);
  box-shadow: 0 0 48px color-mix(in srgb, var(--c1) 55%, transparent),
              0 18px 40px rgba(0, 0, 0, .55);
}
@media (min-width: 1024px) { .setup-shot { width: min(100%, 340px); } }