/* ===========================================================
   Animation — theo cơ chế byaku.site:
   JS thêm class kích hoạt (vd .fadeUp) khi phần tử vào viewport.
   Trạng thái ban đầu đặt ở class ...Trigger; hiệu ứng ở class kích hoạt.
   =========================================================== */

/* Token chung: chuyển động chậm & mềm (tinh thần byaku) */
:root {
  --rv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rv-dur: 1.1s;          /* reveal chữ/khối */
  --rv-dur-img: 1.5s;      /* ảnh focus chậm hơn chút */
}

/* ---- fadeUp: trượt lên + hiện ---- */
.fadeUpTrigger {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--rv-dur) ease, transform var(--rv-dur) var(--rv-ease);
  will-change: opacity, transform;
}
.fadeUpTrigger.fadeUp {
  opacity: 1;
  transform: translateY(0);
}

/* ---- fadeIn: chỉ hiện ---- */
.fadeInTrigger {
  opacity: 0;
  transition: opacity var(--rv-dur) ease;
}
.fadeInTrigger.fadeIn {
  opacity: 1;
}

/* ---- blurIn: mờ → nét + hiện (cho chữ/khối) ---- */
.blurTrigger,
.blurInTrigger {
  opacity: 0;
  filter: blur(12px);
  transition: opacity var(--rv-dur) ease, filter var(--rv-dur) ease;
}
.blurTrigger.blur,
.blurInTrigger.blurIn {
  opacity: 1;
  filter: blur(0);
}

/* ---- blur-image: ảnh mờ → nét, hơi zoom ---- */
.blurImageTrigger {
  filter: blur(14px);
  transform: scale(1.06);
  transition: filter var(--rv-dur-img) ease, transform var(--rv-dur-img) ease;
  will-change: filter, transform;
}
.blurImageTrigger.blur-image {
  filter: blur(0);
  transform: scale(1);
}

/* ---- stagger: dùng cho list/grid (JS gắn delay) ---- */
.staggerTrigger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s ease, transform 0.9s var(--rv-ease);
}
.staggerTrigger.is-on > * {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Reveal tiêu đề theo TỪNG KÝ TỰ ---- */
/* #2 ink-wipe (mực loang từ trên xuống) + blur→nét + #1 đan hướng chẵn/lẻ */
.char {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(var(--dir, 12px)) scale(0.9);
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.7s ease, filter 0.7s ease,
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              clip-path 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.char:nth-child(even) { --dir: -12px; }   /* #1: ký tự chẵn trồi từ TRÊN xuống */
.is-charon .char {
  opacity: 1;
  filter: blur(0);
  transform: none;
  clip-path: inset(0 0 0 0);
  transition-delay: calc(var(--ci, 0) * 0.08s);   /* đổ lần lượt từng chữ */
}

/* #3 shimmer: vệt sáng lướt qua sau khi chữ hiện xong */
.title-fx { position: relative; }
.title-fx::after {
  content: "";
  position: absolute;
  inset: -8%;
  background: linear-gradient(115deg,
    transparent 47.5%, rgba(255, 255, 255, 0.1) 50%, transparent 52.5%);
  opacity: 0;
  pointer-events: none;
}
.title-fx.is-charon::after {
  animation: titleShimmer 1.6s ease 1.2s 1 both;
}
@keyframes titleShimmer {
  0%   { opacity: 0; transform: translateX(-40%); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(40%); }
}

/* Tôn trọng người dùng tắt motion */
@media (prefers-reduced-motion: reduce) {
  .fadeUpTrigger,
  .fadeInTrigger,
  .blurTrigger,
  .blurInTrigger,
  .blurImageTrigger,
  .staggerTrigger > *,
  .char {
    transition: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
  }
  .title-fx.is-charon::after { animation: none !important; }
}