/* Micro-interactions және scroll-reveal анимациялары (жеңіл нұсқа: тек opacity/transform, blur жоқ) */

/* ===== Scroll reveal: бағыты әртүрлі, бірақ жеңіл (blur жоқ) ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* Сол/оң жақтан келу — екі колонкалы блоктарда бағыт беру үшін */
[data-reveal="left"] {
  transform: translateX(-22px);
}

[data-reveal="right"] {
  transform: translateX(22px);
}

/* Суреттерге арналған нұсқа: ұсақ scale, blur жоқ */
[data-reveal="scale"] {
  transform: scale(0.95);
  transition-duration: 0.6s;
}

[data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* Реттелетін кідіріс: колонкалар арасында уақыт айырмашылығы жасау үшін */
[data-reveal][data-reveal-delay="1"] { transition-delay: 140ms; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 260ms; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 380ms; }

/* Карточка топтары: кезекпен пайда болу — таза CSS, JS-сыз */
[data-reveal-group] [data-reveal-item] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-reveal-group="scale"] [data-reveal-item] {
  transform: scale(0.95);
}

[data-reveal-group].is-inview [data-reveal-item] {
  opacity: 1;
  transform: none;
}

[data-reveal-group].is-inview [data-reveal-item]:nth-child(2) { transition-delay: 70ms; }
[data-reveal-group].is-inview [data-reveal-item]:nth-child(3) { transition-delay: 140ms; }
[data-reveal-group].is-inview [data-reveal-item]:nth-child(4) { transition-delay: 210ms; }
[data-reveal-group].is-inview [data-reveal-item]:nth-child(5) { transition-delay: 280ms; }
[data-reveal-group].is-inview [data-reveal-item]:nth-child(6) { transition-delay: 350ms; }
[data-reveal-group].is-inview [data-reveal-item]:nth-child(n + 7) { transition-delay: 400ms; }

/* Оң жақ баған топтары: сол жақ мазмұннан кейін басталады */
[data-reveal-group="right"].is-inview [data-reveal-item] { transition-delay: 220ms; }
[data-reveal-group="right"].is-inview [data-reveal-item]:nth-child(2) { transition-delay: 290ms; }
[data-reveal-group="right"].is-inview [data-reveal-item]:nth-child(3) { transition-delay: 360ms; }
[data-reveal-group="right"].is-inview [data-reveal-item]:nth-child(4) { transition-delay: 430ms; }

/* prefers-reduced-motion: анимацияны толық өшіру */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-group],
  [data-reveal-group] [data-reveal-item] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== Card hover: нәзік көтерілу ===== */
.feature-card,
.media-card,
.news-card,
.step-card,
.person-card,
.gallery-tile {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover,
.media-card:hover,
.news-card:hover,
.step-card:hover,
.person-card:hover,
.gallery-tile:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: var(--shadow-card);
}

/* Карточка ішіндегі иконканың өте кішкентай қозғалысы */
.feature-card .icon-circle,
.media-card__caption .icon {
  transition: transform 0.3s ease;
}

.feature-card:hover .icon-circle {
  transform: translateY(-2px) scale(1.05);
}

.media-card:hover .media-card__caption .icon {
  transform: scale(1.12);
}

/* ===== Батырма/сілтемедегі көрсеткі: жай ғана оңға жылжу ===== */
.icon--arrow {
  transition: transform 0.3s ease;
}

.btn:hover .icon--arrow,
.link-more:hover .icon--arrow {
  transform: translateX(6px);
}

/* Негізгі CTA батырмаларының нәзік фон/shadow өзгерісі */
.btn--accent {
  transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn--accent:hover {
  box-shadow: 0 6px 18px rgba(253, 208, 53, 0.35);
}

.btn--dark:hover {
  box-shadow: 0 6px 18px rgba(5, 86, 58, 0.28);
}

/* round-btn ішіндегі chevron иконканың нәзік жылжуы */
.round-btn .icon {
  transition: transform 0.3s ease;
}

.round-btn:hover .icon {
  transform: scale(1.1);
}

/* to-top батырмасының жоғары көрсеткіші */
.to-top .icon {
  transition: transform 0.3s ease;
}

.to-top:hover .icon {
  transform: translateY(-3px);
}