/* ============================================================
   Nhà hàng Chay — Warm Botanical Editorial Dining
   ============================================================ */

:root {
  /* Warm earth palette */
  --brand-cream: #F5F1E6;
  --brand-warm-cream: #EDE4D4;
  --brand-beige: #D7C7B0;
  --brand-sand: #CDBCA7;
  --brand-wood: #9D8870;
  --brand-mocha: #5A4B44;
  --brand-dark-brown: #3F332D;

  /* Emerald — Xanh Phú Quý */
  --brand-green-950: #082115;
  --brand-green-900: #0E2D1D;
  --brand-green-800: #123622;
  --brand-green-700: #1C4B2E;
  --brand-green-600: #255234;

  /* Gold & leaf */
  --brand-gold: #A2835A;
  --brand-muted-gold: #8D8250;
  --brand-leaf: #8ACB45;

  /* PROMPT 02 — token tinh chỉnh theo ảnh xanh phú quý (có kiểm soát, không đổi palette gốc)
     emerald sâu hơn (không neon) · gold sang hơn (không gắt) · lotus pink rất nhạt */
  --brand-emerald-mystic: #0A2A1A;   /* emerald sâu, dùng cho lớp nền/đổ bóng */
  --brand-emerald-velvet: #14422B;   /* emerald nhung, sáng vừa cho accent trên nền tối */
  --brand-gold-soft: #C9A878;        /* gold ấm, dịu cho viền/divider */
  --brand-gold-glow: rgba(216, 184, 136, 0.28); /* quầng gold rất nhẹ cho glow/hover */
  --brand-lotus-pink-muted: #D9B6A6; /* hồng sen trầm, chỉ dùng nhấn rất nhỏ */

  /* Text */
  --text-primary: #3F332D;
  --text-secondary: #6B5B50;
  --text-muted: #8A7A6C;

  /* On-dark text */
  --gold-bright: #D8B888;
  --cream-on-dark: #EDE7D8;

  /* Borders & shadow */
  --border-soft: rgba(90, 75, 68, 0.14);
  --border-green: rgba(162, 131, 90, 0.28);
  --shadow-soft: 0 24px 80px rgba(63, 51, 45, 0.12);
  --shadow-green: 0 28px 90px rgba(8, 33, 21, 0.26);

  /* Fonts */
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --mx: 0;
  --my: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--brand-cream);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--brand-green-700);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; display: block; }

/* ---------- Plaster texture (warm cream sections) ---------- */
.plaster {
  position: relative;
}
.plaster::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 12% 6%, rgba(215,199,176,0.40), transparent 55%),
    radial-gradient(100% 70% at 92% 0%, rgba(205,188,167,0.30), transparent 50%),
    radial-gradient(90% 90% at 50% 110%, rgba(237,228,212,0.6), transparent 60%);
  z-index: 0;
}

/* ---------- Velvet emerald texture ---------- */
.velvet {
  background:
    radial-gradient(130% 90% at 78% 12%, rgba(37,82,52,0.55), transparent 60%),
    radial-gradient(120% 100% at 10% 100%, rgba(8,33,21,0.85), transparent 55%),
    linear-gradient(160deg, var(--brand-green-900), var(--brand-green-950));
  position: relative;
}
.velvet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 3px, transparent 3px 7px);
  mix-blend-mode: overlay;
}

/* ---------- Reveal animation (transform-only: robust when timeline frozen) ---------- */
.reveal {
  transform: translateY(26px);
  transition: transform 0.8s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.reveal.is-visible {
  transform: translateY(0);
}

/* Gold line draw */
.goldline {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.goldline.is-visible { transform: scaleX(1); }

/* Hero entrance (transform-only) */
@keyframes heroRise {
  from { transform: translateY(30px); }
  to   { transform: translateY(0); }
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes glowDrift {
  0%, 100% { opacity: 0.55; transform: translate(0,0) scale(1); }
  50% { opacity: 0.85; transform: translate(2%, -3%) scale(1.06); }
}

.tw-cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  vertical-align: -0.15em;
  background: var(--brand-green-800);
  margin-left: 3px;
  animation: blink 1s step-end infinite;
}

/* Pill buttons */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), background .35s ease, box-shadow .35s ease, color .35s ease, border-color .35s ease;
  white-space: nowrap;
}
.pill:hover { transform: translateY(-2px); }

.pill-primary {
  background: var(--brand-green-900);
  color: var(--brand-cream);
  border: 1px solid rgba(162,131,90,.38);
}
.pill-primary:hover {
  background: var(--brand-green-950);
  box-shadow: var(--shadow-green);
}
.pill-secondary {
  background: transparent;
  color: var(--brand-dark-brown);
  border: 1px solid rgba(90,75,68,.22);
}
.pill-secondary:hover { background: var(--brand-warm-cream); }

.pill-outline-green {
  background: transparent;
  color: var(--brand-green-800);
  border: 1px solid var(--brand-green-700);
}
.pill-outline-green:hover {
  background: var(--brand-green-900);
  color: var(--brand-cream);
}

.pill-ghost {
  background: rgba(255,255,255,0.4);
  color: var(--text-secondary);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(8px);
}
.pill-ghost:hover { background: rgba(255,255,255,0.7); color: var(--text-primary); }

/* On dark CTAs */
.pill-gold {
  background: linear-gradient(135deg, #C9A268, var(--brand-gold));
  color: var(--brand-green-950);
  border: 1px solid rgba(216,184,136,.5);
}
.pill-gold:hover { box-shadow: 0 18px 50px rgba(162,131,90,.4); }

.pill-cream-outline {
  background: transparent;
  color: var(--cream-on-dark);
  border: 1px solid rgba(216,184,136,.42);
}
.pill-cream-outline:hover { background: rgba(216,184,136,.12); }

/* Eyebrow */
.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* Card hover */
.lift {
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .45s ease, background .45s ease;
}
.lift:hover { transform: translateY(-6px); }

/* No-scrollbar utility for menu pills */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Section padding helper */
.section {
  position: relative;
  padding: clamp(72px, 9vw, 140px) clamp(20px, 5vw, 80px);
}
.wrap { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.wrap-wide { max-width: 1320px; margin: 0 auto; position: relative; z-index: 1; }

/* Image hover scale (desktop, non-touch) */
@media (hover: hover) and (pointer: fine) {
  .img-zoom img { transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
  .img-zoom:hover img { transform: scale(1.05); }
}

/* =========================================================
   PROMPT 02 — TYPOGRAPHY & SECTION SYSTEM
   Mục tiêu:
   - Đồng bộ heading cùng cấp
   - Đồng bộ spacing section
   - Không phá layout cũ (class chung thêm SONG SONG với class section hiện có)
   ========================================================= */
/* Eyebrow/kicker cùng cấp — tái dùng .eyebrow, thêm alias .section-kicker */
.section-kicker { /* kế thừa .eyebrow; để trống nhằm đánh dấu vai trò "kicker" cùng cấp */ }

/* Heading cấp section (H2) — dùng được thay cho .xxx-h2 khi cần đồng bộ */
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(34px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--brand-dark-brown);
  text-wrap: balance;
}
/* Câu dẫn dưới heading */
.section-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--text-secondary);
  text-wrap: pretty;
}
/* Đoạn nội dung thường trong section */
.section-copy {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--text-secondary);
  text-wrap: pretty;
}
/* Tiêu đề & nội dung card cùng loại */
.card-title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.15;
  color: var(--brand-dark-brown);
}
.card-copy {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
/* Khung panel/card dùng chung spacing + radius + hover nhất quán */
.brand-panel {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.44);
  border: 1px solid var(--border-soft);
}
.brand-card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--border-soft);
}
/* Đường gold mảnh dùng chung (divider/accent) */
.brand-gold-line {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--brand-gold-soft), transparent);
}
.hero-tw,
.story-body,
.exp-body,
.menu-sub,
.space-caption,
.final-body,
.footer-blurb {
  text-wrap: pretty;
}
.no-break { white-space: nowrap; }

/* =========================================================
   PROMPT 02 — LUXURY SCROLL MOTION SYSTEM
   Mục tiêu:
   - Sticky header shrink
   - Reveal xuống/lên (logic ở hooks; transform-only ở .reveal)
   - Stagger cards
   - Hover sang trọng
   - Motion-safe mobile
   ========================================================= */
/* Sticky header shrink: khi cuộn xuống, padding + logo nhỏ lại mượt */
.nav-root { transition: background .4s ease, border-color .4s ease, box-shadow .4s ease; }
.nav-root .nav-inner { transition: padding .35s cubic-bezier(.22,.61,.36,1); }
.nav-root .nav-logo img { transition: height .35s cubic-bezier(.22,.61,.36,1); }
.nav-root.scrolled { box-shadow: 0 10px 30px rgba(63, 51, 45, 0.08); }
.nav-root.scrolled .nav-inner { padding-top: 9px; padding-bottom: 9px; }
.nav-root.scrolled .nav-logo img { height: 34px; }

/* Stagger helper (delay theo --i nếu muốn dùng inline) */
.stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* Hover sang trọng cho ảnh/card dùng class .lux-hover */
.lux-hover {
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.lux-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(63, 51, 45, 0.16);
  border-color: var(--brand-gold);
}

/* Motion-safe trên mobile/touch: giảm animation vô hạn & zoom (đỡ tải GPU) */
@media (hover: none), (pointer: coarse) {
  .exp-glow, .final-glow { animation: none !important; }
  .hero-frame { animation: none !important; }
  .lotus-mark { animation-duration: 12s; }
}

/* =========================================================
   PROMPT 02 — LOTUS BOTANICAL ORNAMENT
   Mục tiêu:
   - Tạo điểm nhấn hoa sen tinh tế
   - Hợp nhà hàng chay
   - Không che nội dung, không gây overflow
   ========================================================= */
.lotus-mark {
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 0 10px var(--brand-gold-glow));
}
.lotus-mark .lotus-petal {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: lotusDraw 2.4s cubic-bezier(.22,.61,.36,1) forwards;
}
/* vẽ cánh lệch pha để có cảm giác "nở" dần */
.lotus-mark .lotus-petal:nth-child(2) { animation-delay: .12s; }
.lotus-mark .lotus-petal:nth-child(3) { animation-delay: .24s; }
.lotus-mark .lotus-petal:nth-child(4) { animation-delay: .36s; }
.lotus-mark .lotus-petal:nth-child(5) { animation-delay: .48s; }
.lotus-mark .lotus-petal:nth-child(6) { animation-delay: .60s; }
.lotus-mark .lotus-petal:nth-child(7) { animation-delay: .72s; }
@keyframes lotusDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes lotusFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* =========================================================
   PROMPT 03 — UNIQUE SECTION MOTION MAP
   Mục tiêu:
   - Mỗi section có motion riêng (không lặp slide-up/fade-in quá nhiều)
   - Vẫn giữ hệ thẩm mỹ nền chủ đạo; chỉ transform/opacity/clip-path
   - Toàn bộ là JS-rendered SPA → dùng opacity an toàn (không có kịch bản "no-JS")
   ========================================================= */
/* soft: fade-up dịu (dùng cho heading/lead chung) */
.reveal.reveal-soft { opacity: 0; transform: translateY(16px); transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .7s ease; }
.reveal.reveal-soft.is-visible { opacity: 1; transform: none; }

/* arch: mở từ dưới lên như vòm cửa (gallery / hero image wrapper) */
.reveal.reveal-arch { opacity: 0; clip-path: inset(22% 0 0 0); transform: translateY(12px); transition: clip-path 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1), opacity .8s ease; }
.reveal.reveal-arch.is-visible { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }

/* route: trượt từ trái như "bước đi theo lộ trình" (Visit info cards) */
.reveal.reveal-route { opacity: 0; transform: translateX(-22px); transition: transform .7s cubic-bezier(.22,.61,.36,1), opacity .6s ease; }
.reveal.reveal-route.is-visible { opacity: 1; transform: none; }

/* quote: nghiêng rất nhẹ rồi thẳng lại (Reviews) */
.reveal.reveal-quote { opacity: 0; transform: translateY(18px) rotate(-1.2deg); transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .7s ease; }
.reveal.reveal-quote.is-visible { opacity: 1; transform: none; }

/* step: dùng cho Experience "ritual steps" (marker gold sáng lên khi vào) */
.reveal.reveal-step { opacity: 0; transform: translateY(20px); transition: transform .75s cubic-bezier(.22,.61,.36,1), opacity .65s ease; }
.reveal.reveal-step.is-visible { opacity: 1; transform: none; }

/* directional (Story cards): card 1 trái-dưới, card 3 phải-dưới */
.reveal.reveal-from-left { opacity: 0; transform: translate(-24px, 18px); transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .7s ease; }
.reveal.reveal-from-left.is-visible { opacity: 1; transform: none; }
.reveal.reveal-from-right { opacity: 0; transform: translate(24px, 18px); transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .7s ease; }
.reveal.reveal-from-right.is-visible { opacity: 1; transform: none; }

/* =========================================================
   PROMPT 03 — NHÀ HÀNG CHAY LOTUS PRELOADER
   Mục tiêu:
   - Tạo hiệu ứng mở trang bằng hoa sen + logo
   - Nền emerald sang trọng
   - Prompt 04: hiển thị lâu hơn để thấy rõ lotus, tổng thời gian vẫn dưới 5s
   - Không che click sau khi load
   ========================================================= */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(216,184,136,0.16), transparent 70%),
    radial-gradient(120% 90% at 80% 10%, rgba(37,82,52,0.55), transparent 60%),
    linear-gradient(160deg, var(--brand-green-900), var(--brand-green-950));
  opacity: 1;
  transition: opacity .7s ease, visibility .7s ease;
}
.preloader::after { /* texture nhẹ bằng gradient, không dùng ảnh */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 3px, transparent 3px 7px);
  mix-blend-mode: overlay;
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 24px; max-width: 90vw;
}
/* hoa sen gold to hơn, sang hơn lotus trong modal: thêm shimmer gold nhẹ */
.preloader-lotus { filter: drop-shadow(0 0 16px rgba(216,184,136,0.45)); }
.preloader-lotus .lotus-petal { stroke: var(--gold-bright); animation-duration: 1s; }
/* logo nâu đặt trong khung cream để đọc rõ trên nền tối */
.preloader-logo-card {
  margin-top: 22px; background: var(--brand-cream); border-radius: 14px;
  padding: 12px 20px; box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  opacity: 0; transform: translateY(8px);
  animation: preloadLogoIn .7s cubic-bezier(.22,.61,.36,1) .55s forwards;
}
.preloader-logo-card img { height: 40px; object-fit: contain; display: block; }
.preloader-name {
  margin-top: 16px; font-family: var(--font-heading); font-size: 20px; letter-spacing: 0.02em;
  color: var(--gold-bright); opacity: 0; animation: preloadTextIn .6s ease .8s forwards;
}
.preloader-tag {
  margin-top: 8px; font-size: 13px; letter-spacing: 0.04em; color: rgba(237,231,216,0.7);
  opacity: 0; animation: preloadTextIn .6s ease 1s forwards;
}
@keyframes preloadLogoIn { to { opacity: 1; transform: translateY(0); } }
@keyframes preloadTextIn { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { transform: none; }
  /* PROMPT 03 — variant reveals hiện ngay khi reduced-motion */
  .reveal[class*="reveal-"] { opacity: 1; transform: none; clip-path: none; }
  .goldline { transform: scaleX(1); }
  .lotus-mark .lotus-petal { stroke-dashoffset: 0; }
}

@media (max-width: 420px) {
  .no-break { white-space: normal; }
}

/* =========================================================
   PROMPT 06 — GLOBAL ICON SIZE TUNING
   Mục tiêu:
   - Icon rõ hơn (tăng nhẹ ~15–20%)
   - Không phá spacing/button/nav
   ========================================================= */
:root { --icon-sm: 15px; --icon-md: 18px; --icon-lg: 24px; }
/* leaf accents */
.fc-eyebrow svg, .footer-tag svg, .reviews-hint svg { width: var(--icon-sm); height: var(--icon-sm); }
.story-sign svg, .exp-mark svg, .menu-note svg, .dm-note svg { width: var(--icon-md); height: var(--icon-md); }
/* mũi tên trong CTA/link + copy icon */
.mc-more svg, .info-link svg, .pill svg { width: 16px; height: 16px; }
.dish-close svg { width: var(--icon-lg); height: var(--icon-lg); }
/* dot/marker nhẹ rõ hơn */
.badge-dot { width: 7px; height: 7px; }

/* =========================================================
   PROMPT 08 — STORY LOTUS BACKDROP PANEL
   Mục tiêu:
   - Ảnh hoasen lớn bên trái Story, vượt nhẹ lên Hero, tạo chiều sâu
   - Nằm sau chữ nhưng KHÔNG che chữ (có scrim bảo vệ readability)
   ========================================================= */
.story-lotus-photo {
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px) scale(.985);
  transition: opacity 1.3s ease, transform 1.3s cubic-bezier(.22,.61,.36,1);
  overflow: hidden; /* PROMPT 08d — chỉ để clip scale, KHÔNG viền/khung (mask làm mờ rìa) */
}
.story-lotus-photo.is-visible { opacity: 0.5; transform: none; }
.story-lotus-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  filter: sepia(0.1) saturate(0.9) brightness(1.05) contrast(0.96);
  /* PROMPT 08d — bỏ border/khung, mask hòa tan ảnh vào nền kem
     (đậm ở mép phải, mờ dần các rìa trái/trên/dưới về phía nội dung) */
  -webkit-mask-image: radial-gradient(135% 108% at 100% 48%, #000 0%, #000 36%, rgba(0,0,0,0.35) 66%, transparent 92%);
          mask-image: radial-gradient(135% 108% at 100% 48%, #000 0%, #000 36%, rgba(0,0,0,0.35) 66%, transparent 92%);
  animation: lotusBackdropFloat 11s ease-in-out infinite;
}
@keyframes lotusBackdropFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.015); }
}

/* =========================================================
   PROMPT 06 — REAL BUDDHA PHOTO ORNAMENT FOR VISIT
   Mục tiêu:
   - Dùng ảnh thật assets/adidaphat.jpg
   - Hòa ảnh vào nền nền chủ đạo bằng mask/filter/opacity
   - Không che nội dung/CTA (z-index thấp hơn .wrap, pointer-events none)
   ========================================================= */
.visit-buddha-photo {
  position: absolute; z-index: 0; pointer-events: none;
  opacity: 0;
  transform: translateY(12px) scale(.99);
  transition: opacity 1.3s ease, transform 1.3s cubic-bezier(.22,.61,.36,1);
}
.visit-buddha-photo.is-visible { opacity: 0.3; transform: none; }
.visit-buddha-photo img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  /* tan dần vào nền: mờ ở rìa */
  -webkit-mask-image: radial-gradient(circle at 50% 44%, #000 0%, #000 44%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 44%, #000 0%, #000 44%, transparent 78%);
  /* breathing glow rất nhẹ qua brightness (không đụng opacity fade-in của container) */
  animation: buddhaGlow 12s ease-in-out infinite;
}
@keyframes buddhaGlow {
  0%, 100% { filter: sepia(0.18) saturate(0.92) brightness(1.05) contrast(0.96); }
  50%      { filter: sepia(0.16) saturate(0.94) brightness(1.12) contrast(0.96); }
}

/* Reduced-motion: tắt float/glow, hiện static (đã có khối * ở trên xử lý phần lớn) */
@media (prefers-reduced-motion: reduce) {
  .story-lotus-photo img,
  .visit-buddha-photo img { animation: none; }
}