/* ============================================================================
   RV MOTION — mỗi nhóm chọn đúng 1 hiệu ứng theo tài liệu.
   Chỉ animate transform và opacity. Không dùng transition: all.
   ========================================================================== */

/* ---------- ta1 · Text Reveal cho tiêu đề lớn ---------- */
.rv-tr { display: inline-block; overflow: hidden; padding-block: .12em; vertical-align: bottom; }
.rv-tr__w { display: inline-block; transform: translate3d(0, 110%, 0); opacity: 0;
            transition: transform 760ms var(--rv-ease), opacity 560ms var(--rv-ease);
            transition-delay: calc(var(--rv-i, 0) * 65ms); }
.rv-tr.is-in .rv-tr__w { transform: translate3d(0, 0, 0); opacity: 1; }
html:not(.js) .rv-tr__w, .rv-motion-off .rv-tr__w { transform: none; opacity: 1; transition: none; }

/* ---------- ia1 · Image Scale In ---------- */
.rv-img { overflow: hidden; }
.rv-img > img { transform: scale(1.06); opacity: 0;
                transition: transform 900ms var(--rv-ease), opacity 620ms var(--rv-ease); }
.rv-img.is-in > img { transform: scale(1); opacity: 1; }
.rv-motion-off .rv-img > img { transform: none; opacity: 1; transition: none; }

/* ---------- btn4 · Fill Effect cho nút viền ---------- */
.btn-outline, .btn-ghost, .btn-outline-light { position: relative; overflow: hidden; z-index: 0; }
.btn-outline::before, .btn-ghost::before, .btn-outline-light::before {
  content: ''; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--rv-ease);
}
.btn-outline::before { background: var(--navy); }
.btn-ghost::before { background: var(--navy); }
.btn-outline-light::before { background: var(--white); }
.btn-outline:hover::before, .btn-ghost:hover::before, .btn-outline-light:hover::before { transform: scaleX(1); }
.btn-ghost:hover { color: var(--white); border-color: var(--navy); background: transparent; }
.btn-outline:hover { background: transparent; }
.btn-outline-light:hover { background: transparent; }

/* ---------- mi1 · Ripple ---------- */
.rv-ripple { position: absolute; border-radius: 50%; pointer-events: none;
             background: currentColor; opacity: .28; transform: scale(0);
             animation: rv-ripple 620ms var(--rv-ease) forwards; }
@keyframes rv-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- lg2 · Card Hover Lift ---------- */
.card, .post-card, .project-card, .step {
  transition: transform 380ms var(--rv-ease), box-shadow 380ms var(--rv-ease);
  will-change: auto;
}
@media (hover: hover) {
  .card:hover, .post-card:hover, .project-card:hover { transform: translate3d(0, -6px, 0); box-shadow: 0 18px 40px rgba(16,39,72,.12); }
}

/* ---------- lg3 · Filter Animation ---------- */
.rv-filtering { opacity: 0; transform: translate3d(0, 10px, 0);
                transition: opacity 240ms var(--rv-ease), transform 240ms var(--rv-ease); }

/* ---------- ls2 · Bouncing Dots khi gửi form ---------- */
.rv-dots { display: inline-flex; align-items: center; gap: 5px; }
.rv-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor;
             animation: rv-bounce 900ms var(--rv-ease) infinite; }
.rv-dots i:nth-child(2) { animation-delay: 140ms; }
.rv-dots i:nth-child(3) { animation-delay: 280ms; }
@keyframes rv-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

/* ---------- Công tắc "Giảm chuyển động" ---------- */
.rv-motion-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 90;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--white); color: var(--navy);
  font-family: var(--rv-body); font-size: 13px; cursor: pointer;
  opacity: 0; transform: translate3d(0, 10px, 0); pointer-events: none;
  transition: opacity .3s var(--rv-ease), transform .3s var(--rv-ease), border-color .2s var(--rv-ease);
  box-shadow: 0 6px 18px rgba(16,39,72,.10);
}
.rv-motion-toggle.show { opacity: 1; transform: none; pointer-events: auto; }
.rv-motion-toggle:hover { border-color: var(--navy); }
.rv-motion-toggle svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .rv-motion-toggle { left: 12px; bottom: 74px; font-size: 12px; min-height: 36px; padding: 0 11px; } }

/* Khi người dùng bật "Giảm chuyển động" */
.rv-motion-off *, .rv-motion-off *::before, .rv-motion-off *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
.rv-motion-off { scroll-behavior: auto; }
.rv-motion-off [data-reveal], .rv-motion-off .reveal { opacity: 1 !important; transform: none !important; }

/* Banner mới: chữ ký góc phải không xoay, hiện lên cùng nhóm chữ hero */
.hero-sign { opacity: 0; transform: translate3d(0, 14px, 0); }
body.is-ready .hero-sign { opacity: 1; transform: none; transition: opacity 1000ms var(--m-ease) 1000ms, transform 1000ms var(--m-ease) 1000ms; }
body.is-ready .hero .hero-sign .hero-tagline { transform: none; opacity: 1; transition: none; }
.hero .hero-eyebrow { opacity: 0; transform: translate3d(0, 14px, 0); }
body.is-ready .hero .hero-eyebrow { opacity: 1; transform: none; transition: opacity 600ms var(--m-ease) 120ms, transform 600ms var(--m-ease) 120ms; }