:root{--jade-950:#082824;--jade-900:#0b332e;--jade-800:#12463e;--jade-700:#1b5b50;--ivory:#f5eedf;--paper:#fff9ed;--brass:#916843;--brass-light:#d7ba98;--brass-glow:#b78a4a;--img-radius:clamp(10px,1.4vw,18px);--cinnabar:#9f3f35;--ink:#18201d;--muted:#68716c;--line:rgba(199,150,78,.32);--shadow:0 24px 70px rgba(4,31,27,.16);--display:"Cormorant Garamond",Georgia,serif;--body:"Be Vietnam Pro",Arial,sans-serif;--shell:min(1180px,calc(100% - 32px))}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.7;text-rendering:optimizeLegibility}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}:focus-visible{outline:3px solid #4285f4;outline-offset:3px}.skip-link{position:fixed;z-index:1000;left:16px;top:12px;padding:10px 14px;background:#fff;color:#000;transform:translateY(-160%)}.skip-link:focus{transform:none}
.site-header{position:sticky;z-index:60;top:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;min-height:76px;padding:10px max(16px,calc((100vw - 1180px)/2));border-bottom:1px solid rgba(199,150,78,.52);background:rgba(8,40,36,.96);color:var(--paper);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:10px;font:600 28px/1 var(--display);color:var(--paper)}.brand img{width:46px;height:46px;object-fit:contain;border-radius:50%}.site-header nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:600}.site-header nav a:not(.nav-cta){border-bottom:1px solid transparent}.site-header nav a:hover{border-color:var(--brass)}.nav-cta{padding:9px 16px;border:1px solid var(--brass);border-radius:999px;color:var(--brass-light)}.menu-toggle{display:none;border:1px solid var(--brass);background:transparent;padding:8px 12px;border-radius:999px;color:var(--paper)}
h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.025em}h1{font-size:clamp(50px,7vw,90px);line-height:.94;font-weight:600}h2{font-size:clamp(40px,5.6vw,68px);line-height:1;font-weight:600}h3{font-size:30px;line-height:1.08}.eyebrow{margin-bottom:16px;color:var(--brass);font:700 12px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase}
/* Vàng đồng đậm (--brass) đọc rõ trên nền giấy. Trên nền xanh sẫm phải dùng
   sắc sáng hơn, nếu không nhãn chìm vào nền. Gom mọi mục nền tối vào một chỗ. */
.hero .eyebrow,.featured .eyebrow,.immortals-section .eyebrow{color:var(--brass-light)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 22px;border:1px solid transparent;border-radius:999px;font-size:14px;font-weight:700;transition:transform .2s ease,background .2s ease}.button:hover{transform:translateY(-2px)}.primary{background:var(--jade-800);color:#fff}.ghost{border-color:var(--jade-800);color:var(--jade-800)}.brass{background:var(--brass-glow);color:var(--jade-950)}.center{text-align:center}
.drum-watermark,.lac-watermark{position:relative;isolation:isolate;overflow:hidden}.drum-watermark:before,.lac-watermark:after{position:absolute;z-index:-1;content:"";pointer-events:none;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.055}.drum-watermark:before{width:min(760px,70vw);aspect-ratio:1;right:-16%;top:8%;background-image:url("/assets/img/trong-dong.png")}.lac-watermark:after{width:min(560px,66vw);aspect-ratio:3/2;left:-10%;bottom:-5%;background-image:url("/assets/img/chim-lac.png");opacity:.045}
.hero{min-height:calc(100svh - 76px);display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,400px);align-items:center;gap:clamp(42px,8vw,110px);padding:clamp(70px,10vw,130px) max(16px,calc((100vw - 1180px)/2));background:linear-gradient(90deg,rgba(4,28,25,.93) 0%,rgba(4,28,25,.70) 44%,rgba(4,28,25,.40) 100%),url("/assets/img/default-og.webp") center/cover;color:var(--paper)}.hero:before{right:9%;top:3%;width:min(720px,55vw);opacity:.22}.hero:after{left:36%;bottom:3%;opacity:.08}.hero-copy{max-width:700px}.hero-copy h1{margin-bottom:24px}.hero-copy>p:not(.eyebrow){max-width:650px;color:#d7e2db;font-size:18px}.hero-waitlist{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:10px;max-width:590px;margin:28px 0 14px;padding:12px;border:1px solid rgba(232,201,140,.42);background:rgba(8,40,36,.86)}.hero-waitlist label{display:grid;gap:5px;color:var(--brass-light);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.hero-waitlist input{min-height:48px;padding:10px 12px;border:1px solid rgba(232,201,140,.38);background:#0a332e;color:#fff}.hero-waitlist .form-status{grid-column:1/-1;margin:0;color:#d7e2db;font-size:12px}.hero-actions{display:flex;flex-wrap:wrap;gap:24px;margin:18px 0;color:var(--brass-light);font-size:13px}.hero-actions a{border-bottom:1px solid rgba(232,201,140,.4)}.proof{display:flex;gap:32px;margin:38px 0 0;padding:24px 0 0;border-top:1px solid rgba(232,201,140,.25)}.proof div{display:grid}.proof dt{font:600 36px/1 var(--display);color:var(--brass-light)}.proof dd{margin:6px 0 0;color:#aebcb5;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.hero-card{position:relative;width:min(100%,360px);margin:0;justify-self:end;padding:14px 14px 18px;border:1px solid var(--brass);background:#092f2a;box-shadow:var(--shadow);transform:rotate(1deg)}.hero-card>span{display:block;padding:4px 2px 10px;color:var(--brass-light);font-size:11px;letter-spacing:.16em}.hero-card img{width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid rgba(255,249,237,.5);border-radius:var(--img-radius)}.hero-card figcaption{padding:14px 4px 0;color:#d6dfd9;font:500 13px/1.5 var(--body)}
.section-heading{width:var(--shell);display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end;margin:0 auto 48px}.section-heading>p:last-child{color:var(--muted)}.section-heading.light{color:var(--paper)}.section-heading.light p:last-child{color:#c8d6ce}.story-section,.news-section,.library-page,.about-grid{padding:clamp(80px,10vw,140px) max(16px,calc((100vw - 1180px)/2))}.story-section{background:var(--paper)}.story-panels{width:var(--shell);display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:auto;background:var(--line);border:1px solid var(--line)}.story-panels article{padding:36px;background:var(--paper)}.story-panels span{color:var(--cinnabar);font:600 40px/1 var(--display)}.story-panels p{color:var(--muted)}
.featured{padding:clamp(80px,10vw,140px) max(16px,calc((100vw - 1180px)/2));background:var(--jade-900);color:var(--paper)}.featured:before{opacity:.08;right:32%;top:2%}.card-grid{width:var(--shell);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 auto 48px}.tarot-card{min-width:0;padding:12px 12px 20px;border:1px solid rgba(232,201,140,.34);background:var(--jade-950);color:var(--paper);transition:transform .2s ease,border-color .2s ease}.tarot-card:hover{transform:translateY(-5px);border-color:var(--brass-light)}.tarot-card img{width:100%;aspect-ratio:2/3;object-fit:cover;background:#0f3c35;border-radius:var(--img-radius)}.tarot-card>span{display:block;margin:15px 0 4px;color:var(--brass-light);font-size:11px;letter-spacing:.12em;text-transform:uppercase}.tarot-card h2,.tarot-card h3{margin-bottom:3px;font-size:27px}.tarot-card p{margin:0;color:#afc0b6;font-size:13px}
.news-section{background:var(--ivory)}.news-grid{width:var(--shell);display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:auto}.news-grid article{border:1px solid var(--line);background:var(--paper)}.news-grid article>img{width:100%;aspect-ratio:16/9;object-fit:cover}.news-grid article>div{padding:24px}.news-grid h2,.news-grid h3{font-size:28px}.news-grid p:last-child{color:var(--muted)}
.waitlist{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:clamp(80px,10vw,130px) max(16px,calc((100vw - 1180px)/2));background:var(--cinnabar);color:var(--paper)}.waitlist:before{opacity:.08}.waitlist>div{max-width:600px}.waitlist-form{display:grid;gap:12px}.waitlist-form label{display:grid;gap:8px;font-size:13px;font-weight:600}.waitlist-form input{width:100%;min-height:54px;padding:12px 16px;border:1px solid rgba(255,255,255,.6);border-radius:0;background:rgba(255,255,255,.94);color:var(--ink)}.form-status{min-height:26px;margin:0}.site-footer{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:24px;align-items:center;padding:46px max(16px,calc((100vw - 1180px)/2));background:#061f1c;color:#bccbc3;font-size:12px}.site-footer img{opacity:.7}.site-footer strong{color:var(--paper);font:600 24px var(--display)}
.page-hero{padding:clamp(90px,12vw,160px) max(16px,calc((100vw - 1180px)/2));background:var(--jade-900);color:var(--paper)}.page-hero>h1,.page-hero>p{max-width:900px}.page-hero>p:last-child{color:#c9d6cf;font-size:18px}.filters{width:var(--shell);display:grid;grid-template-columns:1.4fr 2fr 1fr auto;gap:16px;align-items:end;margin:0 auto 38px;padding:20px;border:1px solid var(--line);background:var(--paper)}.filters label{display:grid;gap:8px;font-size:12px;font-weight:700}.filters input,.filters select{min-height:46px;padding:9px 12px;border:1px solid #b9b2a6;background:#fff}.filters fieldset{display:flex;gap:8px;margin:0;padding:0;border:0}.filters legend{position:absolute;width:1px;height:1px;overflow:hidden}.filters button{min-height:46px;padding:8px 12px;border:1px solid var(--line);background:transparent;color:var(--jade-900)}.filters button[aria-pressed="true"]{background:var(--jade-800);color:#fff}.filters p{margin:0}.library-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.empty-state{text-align:center}.pagination{display:flex;gap:8px;justify-content:center;margin:42px auto}.pagination a{padding:8px 13px;border:1px solid var(--line)}.pagination a[aria-current="page"]{background:var(--jade-800);color:#fff}
.card-detail{display:grid;grid-template-columns:minmax(280px,430px) 1fr;gap:clamp(50px,8vw,110px);align-items:center;padding:clamp(70px,9vw,120px) max(16px,calc((100vw - 1180px)/2));background:var(--jade-950);color:var(--paper)}.card-art{padding:12px;border:1px solid var(--brass);background:#0d3b34}.card-art img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--img-radius)}.card-art>span{display:block;padding:10px 4px 0;color:var(--brass-light);font-size:11px;text-transform:uppercase}.card-intro h1{margin-bottom:8px}.card-original{color:#b9c9c0;font-size:19px}.card-intro .lead{color:#cbd8d1}.keyword-list{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.keyword-list span{padding:7px 11px;border:1px solid rgba(232,201,140,.35);border-radius:999px;color:var(--brass-light);font-size:12px}.share-row{display:flex;flex-wrap:wrap;gap:8px}.share-row button{padding:8px 12px;border:1px solid currentColor;background:transparent;color:inherit}.meaning-section{display:grid;grid-template-columns:1fr 1fr;gap:1px;padding:clamp(70px,8vw,110px) max(16px,calc((100vw - 1180px)/2));background:var(--line)}.meaning-section>div{padding:clamp(28px,5vw,60px);background:var(--paper)}.meaning-section p:not(.eyebrow){color:var(--muted)}.story-detail,.post-detail{max-width:860px;margin:auto;padding:clamp(70px,9vw,120px) 16px}.story-detail h2,.post-detail h1{font-size:clamp(44px,7vw,72px)}.story-detail p,.prose p{font-size:18px}.symbol-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.symbol-list article{padding:20px;border:1px solid var(--line);background:var(--paper)}blockquote{margin:34px 0 0;padding:28px;border-left:4px solid var(--cinnabar);background:var(--paper);font:600 26px/1.25 var(--display)}.card-pagination{width:var(--shell);display:grid;grid-template-columns:1fr auto 1fr;gap:20px;margin:0 auto 70px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.card-pagination a:last-child{text-align:right}.inline-waitlist{padding:70px max(16px,calc((100vw - 780px)/2));background:#dfe9e3}.post-detail header>img{width:100%;margin:34px 0;aspect-ratio:16/9;object-fit:cover}.post-detail .lead{font-size:21px;color:var(--muted)}.prose a{text-decoration:underline;color:var(--jade-700)}.about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.about-grid article{padding:34px;border:1px solid var(--line);background:var(--paper)}.not-found{min-height:70vh;padding:clamp(100px,14vw,180px) max(16px,calc((100vw - 900px)/2));background:var(--jade-950);color:var(--paper)}
@media(max-width:900px){.site-header{grid-template-columns:1fr auto}.menu-toggle{display:block}.site-header nav{position:absolute;top:76px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;padding:18px 16px 24px;background:var(--ivory);border-bottom:1px solid var(--line)}.site-header nav[data-open]{display:flex}.hero{grid-template-columns:1fr;padding-top:70px;background:linear-gradient(180deg,rgba(4,28,25,.90) 0%,rgba(4,28,25,.66) 60%,rgba(4,28,25,.5) 100%),url("/assets/img/default-og.webp") center/cover}.hero-card{justify-self:center;width:min(300px,78vw)}.section-heading,.waitlist{grid-template-columns:1fr}.card-grid{grid-template-columns:repeat(2,1fr)}.news-grid{grid-template-columns:1fr}.story-panels{grid-template-columns:1fr}.filters{grid-template-columns:1fr 1fr}.library-grid{grid-template-columns:repeat(3,1fr)}.card-detail{grid-template-columns:1fr}.card-art{width:min(420px,100%);margin:auto}.site-footer{grid-template-columns:1fr 1fr}.site-footer>span{text-align:right}}
@media(max-width:620px){h1{font-size:49px}h2{font-size:40px}.proof{gap:18px}.proof dt{font-size:30px}.card-grid,.library-grid,.about-grid,.meaning-section,.symbol-list{grid-template-columns:1fr 1fr}.filters{grid-template-columns:1fr}.filters fieldset{display:grid;grid-template-columns:1fr 1fr}.card-pagination{grid-template-columns:1fr;}.card-pagination a:last-child{text-align:left}.site-footer{grid-template-columns:1fr}.site-footer>span{text-align:left}.waitlist{gap:30px}}
@media(max-width:430px){.card-grid,.library-grid,.about-grid,.meaning-section,.symbol-list{grid-template-columns:1fr}.hero{padding-inline:16px}.hero-card{width:88vw}.proof{display:grid;grid-template-columns:repeat(3,1fr)}.tarot-card{padding:10px 10px 18px}.filters fieldset{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(max-width:620px){.hero-waitlist{grid-template-columns:1fr}.hero-waitlist .form-status{grid-column:auto}}

/* ============================================================
   Cinematic motion — dust, mist, bronze sweep, hero reveal.
   Additive only: no existing selector above is changed. Every
   rule here is inert under prefers-reduced-motion (see block
   above, which now also zeroes `animation`).
   ============================================================ */

.hero-dust {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-mist {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(ellipse at 42% 46%, rgb(232 201 140 / 10%), transparent 34%),
    radial-gradient(ellipse at 74% 68%, rgb(232 201 140 / 8%), transparent 30%);
  filter: blur(1.5rem);
  animation: mistBreath 11s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes mistBreath {
  from { opacity: .42; transform: translate3d(-1%, 0, 0) scale(1); }
  to   { opacity: .78; transform: translate3d(1%, -1%, 0) scale(1.03); }
}

@keyframes drumTurn { to { transform: rotate(360deg); } }

.drum-watermark::before {
  animation: drumTurn 260s linear infinite;
}

/* Ánh đồng quét viền — bronze edge sweep on the primary CTAs. */
.button.brass,
.nav-cta {
  position: relative;
  overflow: hidden;
}

.button.brass::after,
.nav-cta::after {
  content: "";
  position: absolute;
  inset: -40% -120%;
  background: linear-gradient(100deg, transparent 42%, rgb(255 249 237 / 55%) 50%, transparent 58%);
  transform: translateX(-120%);
  transition: transform .85s cubic-bezier(.2, .6, .2, 1);
  pointer-events: none;
}

.button.brass:hover::after,
.button.brass:focus-visible::after,
.nav-cta:hover::after,
.nav-cta:focus-visible::after {
  transform: translateX(120%);
}

/* One-time reveal on load. Pure CSS, no JS dependency: plays
   automatically and exactly once per page load (animation-fill-mode
   `both` applies the "from" state immediately, even during the delay, so
   there's no flash of the final state before it animates in). This is
   deliberately not JS-driven — a class toggled from a script would depend
   on that script loading, running without error, and (if timed via
   requestAnimationFrame) the tab actually compositing frames, none of
   which are guaranteed.

   The animation sits on the stage, not on .hero-card: the card carries
   `transform: rotate(1deg)`, and a keyframe ending at `transform: none`
   with fill-mode `both` would flatten that tilt for good. */
/* Dịch trái bằng margin chứ không phải transform: .hero-stage đang chạy
   heroReveal vốn đã animate transform, thêm translateX vào đó sẽ bị keyframe
   ghi đè. Khoảng dịch chặn theo 8vw để màn hình hẹp không đẩy mặt trống ra
   ngoài mép trái. */
.hero-stage {
  position: relative;
  width: min(100%, 440px);
  justify-self: end;
  animation: heroReveal .9s 120ms cubic-bezier(.2, .7, .2, 1) both;
}

/* Chỉ áp dụng ở bố cục hai cột. Dưới 900px hero về một cột, mặt trống đã
   chiếm trọn bề ngang nên dịch trái sẽ đẩy nó lòi ra ngoài mép. Cột phải vốn
   chặn ở 400px nên phải nới thêm, nếu không mặt trống không to lên được. */
@media (min-width: 901px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, calc(440px + 2cm));
  }

  .hero-stage {
    margin-right: 2cm;
  }
}

/* Trống đồng + quầng sáng + tia là một cụm "mặt trời" tách khỏi .hero-stage,
   định vị tuyệt đối trong .hero và do JS đưa vào đúng tâm mặt trời của tranh
   nền (ảnh dùng cover nên vị trí đổi theo màn hình — CSS thuần không tính được).
   width là +10% so với mặt trống cũ (440 -> 484). */
.hero-sun {
  position: absolute;
  z-index: 0;
  width: min(120vh, 160vw);
  aspect-ratio: 1;
  pointer-events: none;
}

/* Quầng sáng ở tâm mặt trời. Phủ đúng hộp vuông của cụm nên tâm quầng luôn
   trùng tâm trống dù kích thước đổi theo màn hình. */
.hero-sun::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 244 214 / 72%) 0%, rgb(232 201 140 / 38%) 4.5%, rgb(199 150 78 / 12%) 9%, transparent 15%);
  mix-blend-mode: screen;
  animation: drumGlow 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes drumGlow {
  0%, 100% { opacity: .55; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* Tia sáng tỏa từ tâm mặt trời. Nan quạt mảnh bằng repeating-conic, rồi mask
   hình vành khuyên để tia mạnh ở giữa và tan dần ra rìa — khớp hoa văn tia
   sẵn có trên mặt trống thay vì phủ đè lên nó. Quay ngược chiều mặt trống cho
   hai lớp không dính vào nhau thành một khối cứng. */
.hero-sun::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgb(232 201 140 / 0) 0deg, rgb(232 201 140 / 15%) 1.4deg, rgb(232 201 140 / 0) 4.5deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 5%, rgb(0 0 0 / .55) 20%, transparent 44%);
  mask: radial-gradient(circle at 50% 50%, #000 5%, rgb(0 0 0 / .55) 20%, transparent 44%);
  mix-blend-mode: screen;
  animation: drumRays 90s linear infinite reverse;
  pointer-events: none;
}

@keyframes drumRays { to { transform: rotate(360deg); } }

/* Quầng sáng lệch tâm chồng trên nền — kỹ thuật nền của trang tham chiếu, đưa
   vào hero tối bằng sắc đồng ấm thay cho coral. Đặt sau nội dung (z-index 0)
   nên chữ và lá bài vẫn nổi trên nó. overflow ẩn để quầng không tràn ra ngoài. */
.hero { position: relative; overflow: hidden; }

.hero::after {
  content: "";
  position: absolute;
  right: -6%;
  top: -14%;
  width: min(760px, 62vw);
  aspect-ratio: 1;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%, rgb(183 138 74 / .30), rgb(183 138 74 / .10) 38%, transparent 68%);
  pointer-events: none;
}

.hero-copy, .hero-stage { position: relative; z-index: 1; }

/* Nghiêng theo chuột (hiệu ứng 1): khung dựng phối cảnh, JS chỉ xoay
   .hero-carousel. Cố ý không đặt lên .hero-stage vì nó đang giữ heroReveal với
   fill:both — mọi transform gán tay sẽ bị keyframe ghi đè. */
.hero-stage { perspective: 1100px; }
.hero-carousel { transition: transform .25s ease; transform-style: preserve-3d; }

/* Hiện dần khi cuộn (hiệu ứng 5). Lớp .reveal chỉ do JS gắn khi được phép
   chuyển động, nên trang không JS hoặc bật giảm chuyển động luôn thấy đủ nội
   dung, không bị kẹt ẩn. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease var(--reveal-delay, 0ms), transform .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms); }
.reveal-in { opacity: 1; transform: none; }

/* Dấu "bản thử nghiệm" — toàn bộ tranh minh họa hiện là bản nháp AI, chưa phải
   art cuối. Dán bằng CSS ::before ở góc trên phải mỗi khung ảnh (và .proto-stamp
   cho ảnh nền hero vốn là background, không có khung). Khi thay tranh thật, xóa
   trọn khối này là hết dấu — không phải sửa từng tệp ảnh. */
.hero-card, .immortals-grid a, .tarot-card, .card-art,
.houses-figure, .lac-figure, .news-grid article { position: relative; }

.hero-card::before, .immortals-grid a::before, .tarot-card::before,
.card-art::before, .houses-figure::before, .lac-figure::before,
.news-grid article::before, .proto-stamp {
  content: "Bản thử nghiệm";
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  background: #c62828;
  color: #fff;
  font: 700 10px/1.2 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgb(0 0 0 / .35);
  pointer-events: none;
}

/* Trống đồng lùi thành nền mờ chìm dưới phông cảnh — theo trang tham chiếu:
   opacity 0.5, blend screen nên chỉ cộng sáng nét vàng lên tranh, không đục
   thành đĩa đặc. Vẫn xoay chậm để nền sống. Lá bài vẫn dùng bề ngang mặt trống
   làm thước đo 40%, nên kích thước carousel không đổi. */
.hero-drum {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  opacity: .5;
  filter: saturate(.9) contrast(1.03);
  mix-blend-mode: screen;
  /* Hoa văn trống đồng có vòng tròn vàng ngoài cùng. Ở cỡ tràn màn, vòng đó
     thành một đường tròn lớn cắt ngang hero, đọc ra như viền cứng thay vì hoa
     văn chìm. Mask cho mép tan dần từ 46% bán kính trở ra, nên trống đồng hòa
     vào phông cảnh và không còn ranh giới nào. */
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 40%, rgb(0 0 0 / .55) 58%, transparent 76%);
  mask: radial-gradient(circle at 50% 50%, #000 40%, rgb(0 0 0 / .55) 58%, transparent 76%);
  animation: drumSpin 180s linear infinite;
}

/* Trống đồng đã tách ra thành .hero-sun, nên carousel không còn phủ lên nó mà
   nằm theo luồng thường trong cột phải, tự cao bằng thẻ. Các lá xếp chồng cùng
   một ô lưới để mờ chồng khi chuyển. */
.hero-carousel {
  display: grid;
  justify-items: center;
}

.hero-carousel .hero-card {
  grid-area: 1 / 1;
  width: 48%;
  margin: 0;
  padding: 8px 8px 12px;
  border: 1px solid var(--brass-light);
  border-radius: calc(var(--img-radius) + 4px);
  background: #092f2a;
  /* Vệt sáng mảnh ở mép trên làm thẻ như được rọi từ trên — kỹ thuật mượn từ
     trang tham chiếu, chồng lên bóng đổ sẵn có. */
  box-shadow: inset 0 1px 0 rgb(232 201 140 / .45), var(--shadow);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  display: grid;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  /* Mờ chồng: lá đi và lá đến cùng đổi độ mờ và tỷ lệ trong một khoảng, nên
     hai hình chồng lên nhau ở giữa chuyển cảnh thay vì tắt hẳn rồi mới hiện. */
  transform: rotate(1deg) scale(.96);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .9s;
}

.hero-carousel .hero-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: rotate(1deg) scale(1);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}

.hero-card img {
  width: 100%;
  height: auto;
}

.hero-card-label,
.hero-card-power,
.hero-card-cue {
  font: 700 9px/1.3 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-light);
}

.hero-card-name {
  font: 600 15px/1.2 var(--display, var(--body));
  color: var(--paper);
}

.hero-card-cue {
  opacity: 0;
  transition: opacity .3s ease;
}

.hero-card:hover .hero-card-cue,
.hero-card:focus-visible .hero-card-cue {
  opacity: 1;
}

.hero-card:focus-visible {
  outline: 2px solid var(--brass-light);
  outline-offset: 3px;
}

/* Ánh sáng quét chậm qua mặt lá đang hiện. Đặt trên phần tử con để không
   đụng vào transform của thẻ, và chỉ chạy ở lá active cho đỡ tốn. */
.hero-card.is-active img {
  position: relative;
}

.hero-card.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgb(232 201 140 / 22%) 50%, transparent 60%);
  background-size: 300% 100%;
  animation: cardSheen 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cardSheen {
  0%, 100% { background-position: 160% 0; }
  55% { background-position: -60% 0; }
}

@keyframes drumSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

/* Hit area stays 44px for touch while the visible dot stays small. */
.hero-dots button {
  width: 44px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.hero-dots button::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  transition: background-color .3s ease, transform .3s ease;
}

.hero-dots button[aria-current="true"]::before {
  background: var(--brass);
  transform: scale(1.25);
}

.hero-dots button:focus-visible {
  outline: 2px solid var(--brass-light);
  outline-offset: 2px;
}

@keyframes heroReveal {
  from { opacity: 0; filter: blur(14px); transform: translateY(16px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

/* Hiệu ứng mở đầu page: từng dòng chữ hero trượt vào từ phải và hiện dần theo
   bậc, học từ hero-slide-in của trang tham chiếu. fill:both giữ trạng thái đầu
   ngay trong lúc chờ, nên không lóe nội dung trước khi chạy. Dưới prefers-
   reduced-motion, luật *{animation:none} toàn cục tắt hết và chữ hiện luôn ở
   opacity mặc định 1 — không kẹt ẩn. */
/* Bóng chữ mềm để tiêu đề đọc rõ trên nền phong cảnh sáng hơn — theo trang
   tham chiếu. Giúp cả desktop lẫn mobile khi chữ chạm vùng cảnh. */
.hero h1 { text-shadow: 0 .3rem 2rem rgba(0, 15, 13, .55); }

.hero-copy > * { animation: heroEnter .85s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > *:nth-child(1) { animation-delay: .10s; }
.hero-copy > *:nth-child(2) { animation-delay: .20s; }
.hero-copy > *:nth-child(3) { animation-delay: .30s; }
.hero-copy > *:nth-child(4) { animation-delay: .40s; }
.hero-copy > *:nth-child(5) { animation-delay: .50s; }
.hero-copy > *:nth-child(6) { animation-delay: .60s; }

@keyframes heroEnter {
  from { opacity: 0; transform: translate3d(1.25rem, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* Bảng kể chuyện của từng vị. Dùng <dialog> để trình duyệt lo sẵn phần khoá
   tiêu điểm, phím Esc và lớp nền mờ — ít mã hơn và đúng hành vi hơn tự dựng. */
.story-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid var(--brass);
  background: var(--jade-950);
  color: var(--paper);
  overflow: auto;
  position: relative;
}

.story-dialog::backdrop {
  background: rgb(8 40 36 / 78%);
  backdrop-filter: blur(3px);
}

.story-dialog h2 {
  margin: 6px 0 4px;
}

.story-power {
  margin: 0 0 20px;
  color: var(--brass-light);
  font: 700 11px/1.3 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.story-panel p {
  margin: 0 0 14px;
}

.story-source {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: #d6dfd9;
  font-size: 13px;
}

.story-actions {
  margin-top: 22px;
}

.story-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: var(--brass-light);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.story-close:focus-visible {
  outline: 2px solid var(--brass-light);
}

/* Pha thêm 5% đen vào nền mọi mục dưới hero, để màn hình đầu sáng hơn phần
   còn lại. Dùng color-mix thay vì gõ tay mã màu mới: các biến gốc vẫn là một
   nguồn duy nhất, đổi bảng màu thương hiệu thì phần tối này đổi theo. */
.story-section { background: color-mix(in srgb, var(--paper) 95%, #000); }
.featured { background: color-mix(in srgb, var(--jade-900) 95%, #000); }
.news-section { background: color-mix(in srgb, var(--ivory) 95%, #000); }
.houses-section { background: color-mix(in srgb, var(--paper) 95%, #000); }
.waitlist { background: color-mix(in srgb, var(--cinnabar) 95%, #000); }

.immortals-section {
  padding: clamp(80px, 10vw, 140px) max(16px, calc((100vw - 1180px) / 2));
  background: color-mix(in srgb, var(--jade-950) 95%, #000);
  color: var(--paper);
}

.immortals-section .section-heading .eyebrow {
  color: var(--brass-light);
}

.immortals-grid {
  width: var(--shell);
  margin: 44px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.immortals-grid a {
  display: grid;
  gap: 6px;
  text-align: center;
  color: inherit;
  text-decoration: none;
}

.immortals-grid img {
  width: 100%;
  height: auto;
  border: 1px solid var(--brass-light);
  border-radius: var(--img-radius);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.immortals-grid a:hover img,
.immortals-grid a:focus-visible img {
  transform: translateY(-6px);
}

.immortal-roman,
.immortal-card,
.immortal-power {
  font: 700 10px/1.4 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-light);
}

.immortal-name {
  font: 600 17px/1.25 var(--display, var(--body));
}

.immortals-note {
  width: var(--shell);
  margin: 40px auto 0;
  color: #d6dfd9;
  font-size: 14px;
}

.lac-figure {
  width: var(--shell);
  margin: 48px auto 0;
  text-align: center;
}

.lac-figure img {
  width: min(100%, 720px);
  height: auto;
}

.lac-figure figcaption {
  margin-top: 12px;
  color: var(--brass);
  font: 700 11px/1.2 var(--body);
  letter-spacing: .18em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .immortals-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Nền nằm ở khối pha tối phía trên, không đặt lại ở đây kẻo ghi đè mất. */
.houses-section {
  padding: clamp(80px, 10vw, 140px) max(16px, calc((100vw - 1180px) / 2));
}

.houses-figure {
  width: var(--shell);
  margin: 40px auto 0;
  text-align: center;
}

.houses-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--img-radius);
}

.houses-figure figcaption {
  margin-top: 16px;
  color: var(--brass);
  font: 700 12px/1.2 var(--body);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Ba lớp cinematic — ánh sáng quét, mặt trống xoay, mờ chồng — đều tắt ở đây.
   Người bật chế độ giảm chuyển động vẫn thấy đủ nội dung, chỉ không thấy
   chuyển động; lá đang hiện giữ nguyên độ nghiêng 1 độ của thiết kế. */
@media (prefers-reduced-motion: reduce) {
  .hero-stage { animation: none; opacity: 1; filter: none; transform: none; }
  .hero-stage::before { animation: none; opacity: .8; transform: none; }
  .hero-drum { animation: none; }
  .hero-carousel .hero-card { transition: none; transform: rotate(1deg); }
  .hero-carousel .hero-card.is-active::after { animation: none; background: none; }
  .hero-dots button::before { transition: none; }
  .immortals-grid img { transition: none; }
  .hero-card-cue { opacity: 1; }
}