/* =========================================================
   RED DZAO — ANIMATIONS
   Motion FX Library: chỉ dùng transform/opacity, nhẹ và phục vụ storytelling
   ========================================================= */

/* ---- 01. Reveal chung khi cuộn vào khung nhìn (IntersectionObserver) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-story), transform var(--dur-slow) var(--ease-story);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="scale"] { transform: translateY(0) scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }

[data-reveal="clip"] {
  clip-path: inset(0 0 100% 0);
  transform: none;
}
[data-reveal="clip"].is-visible { clip-path: inset(0 0 0% 0); }

[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }

/* ---- 02. Mountain Parallax (Hero) ---- */
.hero__layer {
  transition: transform 60ms linear;
  will-change: transform;
}

/* ---- 03. Mist Drift ---- */
.hero__mist {
  position: absolute;
  inset: -10% -20%;
  background: radial-gradient(ellipse at 30% 60%, rgba(245,235,221,0.75), transparent 60%),
              radial-gradient(ellipse at 75% 40%, rgba(245,235,221,0.55), transparent 55%);
  animation: rd-mist-drift 28s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}

@keyframes rd-mist-drift {
  0%   { transform: translateX(-3%) translateY(0); }
  100% { transform: translateX(3%) translateY(-2%); }
}

/* ---- 04. Lantern Glow ---- */
.rd-lantern {
  position: relative;
}
.rd-lantern::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(217,154,61,0.35), transparent 65%);
  animation: rd-glow-pulse 3.6s ease-in-out infinite;
  z-index: -1;
}
@keyframes rd-glow-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ---- 05. Textile Reveal (dệt hoa văn thổ cẩm) ---- */
.rd-textile-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms var(--ease-story);
}
.rd-textile-reveal.is-visible {
  clip-path: inset(0 0% 0 0);
}

/* ---- 09. Menu Card Swipe hint (chỉ báo có thể vuốt) ---- */
.rd-swipe-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
  animation: rd-swipe-nudge 1.8s ease-in-out infinite;
}
@keyframes rd-swipe-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

/* ---- 11. Chapter Progress fill (điều khiển bằng JS qua biến CSS) ---- */
.chapter-nav__thread-fill {
  height: var(--thread-progress, 0%);
}

/* ---- Slow Zoom cho ảnh hero ---- */
.rd-slow-zoom {
  animation: rd-zoom 22s ease-in-out infinite alternate;
}
@keyframes rd-zoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.06); }
}

/* Giảm/ tắt animation khi người dùng yêu cầu */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .hero__mist,
  .rd-lantern::after,
  .rd-swipe-hint,
  .rd-slow-zoom,
  .rd-portrait__coin {
    animation: none !important;
  }
  .hero__layer { transform: none !important; }
}