/* ============================================================
   OPUS Motion — hệ thống chuyển động dùng chung (thuần CSS)
   Nạp SAU css/style.css. Chỉ dùng transform/opacity (êm, không layout-thrash).

   AN TOÀN NỘI DUNG: .reveal mặc định LUÔN HIỂN THỊ (opacity:1). Chỉ khi
   assets/motion.js thực sự chạy được (và không ở chế độ reduced-motion) mới
   thêm class "js-anim" vào <html> — lúc đó phần tử .reveal CHƯA có .in mới
   bị ẩn nhẹ chờ hiệu ứng. Nếu JS lỗi/không chạy, mọi thứ vẫn hiện bình thường.
   ============================================================ */

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
html.js-anim .reveal:not(.in) {
  opacity: 0;
  transform: translateY(20px);
}

/* ---------- Header: cuộn xuống thêm bóng, mượt ---------- */
.site-header { transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.35s var(--ease); }
.site-header.scrolled { box-shadow: 0 6px 22px rgba(0, 78, 136, 0.10); }
.site-header.scrolled .brand-logo { transform: scale(0.94); }
.brand-logo { transition: transform 0.35s var(--ease); }

/* ---------- Nút CTA — micro-interaction (bổ sung hover sẵn có) ---------- */
@media (hover: hover) {
  .btn { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), filter 0.25s var(--ease); }
  .btn-glow:hover { filter: brightness(1.05); }
}
.btn:active { transform: translateY(1px) scale(0.99); }

/* ---------- Thẻ / chip / bước — hover nhấc + viền phát sáng teal ---------- */
@media (hover: hover) {
  .step, .tier-pill, .spec-pill, .audience-card, .faq-item {
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .step:hover, .tier-pill:hover {
    transform: translateY(-4px);
    border-color: rgba(19, 183, 229, 0.55);
    box-shadow: 0 14px 32px rgba(0, 78, 136, 0.14);
  }
  .spec-pill:hover { border-color: rgba(19, 183, 229, 0.55); transform: translateY(-2px); }
  .day-chip:hover { box-shadow: 0 6px 16px rgba(19, 183, 229, 0.22); }
  .cal-cell:not(:disabled):hover { border-color: rgba(19, 183, 229, 0.55); box-shadow: 0 10px 24px rgba(0, 78, 136, 0.14); }
}

/* ---------- Hero: panel nổi nhẹ (float) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .holo-card { animation: opus-float 6.5s ease-in-out infinite; }
}
@keyframes opus-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ---------- Hero: nội dung xuất hiện tuần tự khi load (CSS-only, luôn kết thúc ở trạng thái hiện) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-content > .chip         { animation: opus-rise 0.6s var(--ease) both 0.05s; }
  .hero-content > h1            { animation: opus-rise 0.6s var(--ease) both 0.15s; }
  .hero-content > .hero-lead    { animation: opus-rise 0.6s var(--ease) both 0.25s; }
  .hero-content > .hero-actions { animation: opus-rise 0.6s var(--ease) both 0.35s; }
  .hero-content > .hero-points  { animation: opus-rise 0.6s var(--ease) both 0.45s; }
  .hero-visual                  { animation: opus-rise 0.75s var(--ease) both 0.3s; }
}
@keyframes opus-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Ảnh: carousel hover zoom rất nhẹ + chuyển mượt ---------- */
.gallery-slide img { transition: transform 0.6s var(--ease), opacity 0.8s var(--ease); }
@media (hover: hover) {
  .gallery-frame:hover .gallery-slide.active img { transform: scale(1.035); }
}

/* ---------- prefers-reduced-motion: tắt mọi chuyển động (an toàn kép — JS đã không gate .reveal khi reduce) ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js-anim .reveal:not(.in) { opacity: 1 !important; transform: none !important; }
  .hero-content > *, .hero-visual { animation: none !important; opacity: 1 !important; transform: none !important; }
  .holo-card { animation: none !important; }
  .gallery-slide img { transition: none !important; }
  .gallery-frame:hover .gallery-slide.active img { transform: none !important; }
  html { scroll-behavior: auto !important; }
}