/* =============================================================
   animations.css — Хөдөлгөөн ба илчлэлт
   ============================================================= */

/* ===== Keyframes ======================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: .75; }
}
@keyframes loaderSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ===== Hero эхлэлийн дараалал =========================== */
.hero__motto  { animation: fadeUp .8s var(--ease) both; }
.hero h1      { animation: fadeUp .8s var(--ease) .12s both; }
.hero__sub    { animation: fadeUp .8s var(--ease) .24s both; }
.hero__actions{ animation: fadeUp .8s var(--ease) .36s both; }
.hero__stats  { animation: fadeIn 1s var(--ease) .6s both; }

/* ===== Scroll reveal (animation.js удирдана) ============ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left  { opacity: 0; transform: translateX(-36px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right { opacity: 0; transform: translateX(36px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

.reveal-scale { opacity: 0; transform: scale(.95); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

/* Дараалсан саатал (stagger) */
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }
.reveal[data-delay="5"] { transition-delay: .5s; }

/* ===== Hover micro-interactions ======================== */
.hover-lift { transition: transform var(--tic) var(--ease), box-shadow var(--tic) var(--ease); }
.hover-lift:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.hover-zoom { overflow: hidden; }
.hover-zoom img { transition: transform .6s var(--ease); }
.hover-zoom:hover img { transform: scale(1.06); }

.underline-grow { position: relative; }
.underline-grow::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px; background: var(--gold-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.underline-grow:hover::after { transform: scaleX(1); }

/* Зөөлөн хөвөх (гоёл чимэглэлийн элемент) */
.floaty { animation: floaty 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; }
  .hero__motto, .hero h1, .hero__sub, .hero__actions, .hero__stats { animation: none !important; opacity: 1 !important; }
}