/*
 * Lớp chuyển động — chỉ dùng transform và opacity.
 * Không chạm width/height/top/left vì những thuộc tính đó bắt trình duyệt
 * tính lại bố cục mỗi khung hình, gây giật trên máy yếu.
 */

/* ---------- Hiện từng dòng tiêu đề ---------- */

.line-reveal {
  display: block;
  overflow: hidden;
}

.line-reveal > span {
  display: block;
  transform: translateY(110%);
  transition: transform var(--motion-slow) var(--motion-ease);
  transition-delay: var(--line-delay, 0ms);
}

.motion-ready .line-reveal.is-visible > span,
.line-reveal.is-visible > span {
  transform: translateY(0);
}

/* ---------- Ảnh trôi chậm hơn trang khi cuộn ---------- */

.parallax-media {
  will-change: transform;
}

.parallax-media > * {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

/* ---------- Nền hero sáng dần theo vị trí cuộn ---------- */

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 72% 30%,
    rgba(216, 181, 107, calc(var(--hero-glow, 0) * 0.16)),
    transparent 28rem
  );
  transition: background var(--motion-base) linear;
}

/* ---------- Số đếm lên ---------- */

.count-up {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Nút hút nhẹ theo con trỏ ---------- */

.magnetic {
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition: transform var(--motion-fast) var(--motion-ease);
}

/* ---------- Viền vàng chạy quanh thẻ khi rê chuột ---------- */

@media (hover: hover) and (pointer: fine) {
  .problem-grid article,
  .module-grid article {
    position: relative;
    overflow: hidden;
  }

  .problem-grid article::before,
  .module-grid article::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--premium-gold), transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--motion-base) var(--motion-ease);
  }

  .problem-grid article:hover::before,
  .module-grid article:hover::before {
    transform: scaleX(1);
  }
}

/* ---------- Tôn trọng người tắt hiệu ứng ---------- */

@media (prefers-reduced-motion: reduce) {
  .line-reveal > span {
    transform: none;
    transition: none;
  }

  .parallax-media > * {
    transform: none;
  }

  .hero::after {
    display: none;
  }

  .magnetic {
    transform: none;
    transition: none;
  }

  .problem-grid article::before,
  .module-grid article::before {
    display: none;
  }
}

/* Máy cấu hình thấp thường không có con trỏ chính xác.
   Tắt bớt phần nặng để cuộn không giật trên điện thoại. */
@media (pointer: coarse) {
  .parallax-media > * {
    transform: none;
  }

  .hero::after {
    display: none;
  }
}