/* ============================================================
   SƠN MÀI HƯỜNG ĐÔNG · HERO V2 · 27/08/2026

   Trang trong: Layer 1 màu → Layer 2 tranh route → lớp bảo vệ chữ → nội dung.
   Trang chủ: home-content vẫn bắt đầu sau Hero theo bàn giao v1.
   Motion chỉ dùng opacity/transform và nằm trong page-transition.css.
   ============================================================ */

/* Layer 1 tiếp tục nối nền các section sau Hero. Layer 2 không còn lặp ở đây
   trên trang trong; chỉ trang chủ có .subpage-artwork trong khung này. */
.subpage-content-frame {
  position: relative;
  isolation: isolate;
  --lacquer-layer-1-duration: 420ms;
  --lacquer-layer-2-delay: var(--lacquer-layer-1-duration);
  --lacquer-layer-2-duration: 620ms;
}

.subpage-content-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 30% at 8% 12%,
      color-mix(in srgb, var(--lacquer-son) 10%, transparent), transparent 72%),
    radial-gradient(ellipse 56% 28% at 94% 62%,
      color-mix(in srgb, var(--lacquer-gold) 12%, transparent), transparent 74%),
    linear-gradient(112deg, transparent 18%,
      color-mix(in srgb, var(--lacquer-ink) 2.5%, transparent) 50%, transparent 78%);
  opacity: .62;
}

body:not(.home-page)::before { opacity: .2; }

/* Tranh nội dung riêng của trang chủ. */
.subpage-artwork {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  width: 100%;
  height: min(100%, var(--art-height, 92vh));
  opacity: var(--art-opacity, .09);
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  animation: lacquer-artwork-reveal var(--lacquer-layer-2-duration)
    cubic-bezier(.22, 1, .36, 1) var(--lacquer-layer-2-delay) both;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}

.home-page .subpage-content-frame::before {
  animation: lacquer-atmosphere-reveal var(--lacquer-layer-1-duration)
    cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes lacquer-atmosphere-reveal {
  from { opacity: 0; }
  to { opacity: .62; }
}

@keyframes lacquer-artwork-reveal {
  from { opacity: 0; }
  to { opacity: var(--art-opacity, .09); }
}

.subpage-artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--art-position, center top);
}

.subpage-content-frame > :not(.subpage-artwork) {
  position: relative;
  z-index: 2;
}

.subpage-content-frame > :is(.card-detail, .not-found, .news-section, .library-page) {
  background: transparent;
}

/* Chữ phụ sau Hero vẫn phải đạt AA trên Layer 1. */
.subpage-content-frame {
  --muted: #736051;
  --brown: #815C35;
  --gold-ink: #7F5D00;
}

.subpage-content-frame :is(.tarot-card, .news-grid article, .filters) {
  --muted: #7A6656;
  --brown: #8B6339;
  --gold-ink: #8B6600;
}

[data-page-art="home-content"] { --art-opacity: .09; --art-position: center top; }

/* --- Hero trang trong ------------------------------------------------ */

.lacquer-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --hero-layer-opacity: .76;
}

/* Layer 1: màu son/vàng xuất hiện trước tranh. */
.lacquer-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--hero-layer-opacity);
  background:
    radial-gradient(ellipse 72% 94% at 8% 18%,
      color-mix(in srgb, var(--lacquer-son) 17%, transparent), transparent 72%),
    radial-gradient(ellipse 64% 88% at 92% 72%,
      color-mix(in srgb, var(--lacquer-gold) 20%, transparent), transparent 74%),
    linear-gradient(112deg,
      color-mix(in srgb, var(--paper-band) 40%, transparent),
      transparent 54%,
      color-mix(in srgb, var(--lacquer-ink) 5%, transparent));
}

.subpage-hero-artwork {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: var(--hero-art-opacity, .13);
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

.subpage-hero-artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-art-position, center top);
}

/* Hero đầu trang hiển thị tranh nguyên vẹn ở opacity 1 trên toàn khung.
   Không dùng mask: opacity không còn bị hạ riêng xuống 23%/18%/13% ở vùng copy.
   Chi tiết lá và bài viết tiếp tục dùng opacity/lớp bảo vệ riêng của chúng. */
.page-hero.lacquer-hero {
  --hero-art-opacity: 1;
  /* Chỉ đậm lại trong Hero trang trong. Cùng họ nâu, chỉ hạ độ sáng đủ để giữ
     AA trên nền tranh đậm hơn — không đổi sang màu khác. */
  --brown: #5E3F19;
  --ink-soft: #463122;
}

.page-hero.lacquer-hero .subpage-hero-artwork {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Giữ nguyên khổ copy hiện tại để đợt tăng độ rõ tranh không làm đổi layout. */
.page-hero.lacquer-hero > :is(h1, p) {
  max-width: min(900px, 52%);
}

/* Lớp bảo vệ chữ chỉ nằm ở vùng copy. Nó trong suốt dần về phía motif chính,
   không phải một tấm kem đục phủ toàn tranh. */
.lacquer-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--paper-band) 64%, transparent) 0%,
    color-mix(in srgb, var(--paper-band) 46%, transparent) 42%,
    transparent 76%);
}

/* Hero đầu trang không phủ gradient kem lên tranh. Các Hero chi tiết bên dưới
   vẫn dùng ::after riêng theo vị trí copy của chúng. */
.page-hero.lacquer-hero::after {
  background: none;
}

.lacquer-hero > :not(.subpage-hero-artwork) {
  position: relative;
  z-index: 3;
}

/* Chi tiết lá đặt copy ở cột phải; lớp bảo vệ chữ cũng phải đổi phía. */
.card-detail.lacquer-hero::after {
  background: linear-gradient(270deg,
    color-mix(in srgb, var(--paper) 70%, transparent) 0%,
    color-mix(in srgb, var(--paper) 48%, transparent) 46%,
    transparent 78%);
}

/* Header bài viết có ảnh bìa nằm dưới copy, nên gradient tan theo trục dọc. */
.post-detail > header.lacquer-hero::after {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--paper) 68%, transparent) 0%,
    color-mix(in srgb, var(--paper) 44%, transparent) 38%,
    transparent 72%);
}

/* Độ rõ cuối: desktop .12–.14. Mỗi route giữ nhịp sáng/tối riêng của master. */
[data-page-art="tarot-la-gi"]       { --hero-art-opacity: .14;  --hero-art-position: center top; }
[data-page-art="la-bai"]            { --hero-art-opacity: .135; --hero-art-position: center top; }
[data-page-art="trai-bai"]          { --hero-art-opacity: .13;  --hero-art-position: center center; }
[data-page-art="huyen-su"]          { --hero-art-opacity: .14;  --hero-art-position: center top; }
[data-page-art="healing"]           { --hero-art-opacity: .14;  --hero-art-position: center top; }
[data-page-art="chuyen-huong-dong"] { --hero-art-opacity: .12;  --hero-art-position: center top; }
[data-page-art="cua-hang"]          { --hero-art-opacity: .135; --hero-art-position: center bottom; }

/* Tablet: .095–.11. */
@media (max-width: 1023px) {
  [data-page-art="home-content"]      { --art-opacity: .075; }
  [data-page-art="tarot-la-gi"]       { --hero-art-opacity: .11;  --hero-art-position: right 38% top 0%; }
  [data-page-art="la-bai"]            { --hero-art-opacity: .105; --hero-art-position: left 30% top 0%; }
  [data-page-art="trai-bai"]          { --hero-art-opacity: .10;  --hero-art-position: center bottom; }
  [data-page-art="huyen-su"]          { --hero-art-opacity: .11;  --hero-art-position: left 22% top 0%; }
  [data-page-art="healing"]           { --hero-art-opacity: .11;  --hero-art-position: right 24% top 0%; }
  [data-page-art="chuyen-huong-dong"] { --hero-art-opacity: .095; --hero-art-position: left 18% top 0%; }
  [data-page-art="cua-hang"]          { --hero-art-opacity: .10;  --hero-art-position: right 20% bottom 0%; }

  /* Giữ nguyên khổ copy tablet của layout hiện tại. */
  .page-hero.lacquer-hero > :is(h1, p) { max-width: min(900px, 56%); }
}

/* Mobile: .07–.08; gradient theo chiều dọc để bảo vệ cột chữ. */
@media (max-width: 767px) {
  [data-page-art="home-content"]      { --art-opacity: .055; }
  [data-page-art="tarot-la-gi"]       { --hero-art-opacity: .08; }
  [data-page-art="la-bai"]            { --hero-art-opacity: .075; }
  [data-page-art="trai-bai"]          { --hero-art-opacity: .075; }
  [data-page-art="huyen-su"]          { --hero-art-opacity: .08; }
  [data-page-art="healing"]           { --hero-art-opacity: .08; }
  [data-page-art="chuyen-huong-dong"] { --hero-art-opacity: .07; }
  [data-page-art="cua-hang"]          { --hero-art-opacity: .075; }

  /* Mobile dùng lại trọn bề ngang như layout hiện tại. */
  .page-hero.lacquer-hero > :is(h1, p) { max-width: none; }

  .lacquer-hero::after,
  .card-detail.lacquer-hero::after {
    background: radial-gradient(ellipse 120% 68% at 24% 30%,
      color-mix(in srgb, var(--paper-band) 58%, transparent) 0%,
      color-mix(in srgb, var(--paper-band) 32%, transparent) 54%,
      transparent 84%);
  }
}

@media print {
  .subpage-content-frame::before,
  .subpage-artwork,
  .subpage-hero-artwork,
  .lacquer-hero::before,
  .lacquer-hero::after { display: none; }
}

@media (forced-colors: active) {
  .subpage-content-frame::before,
  .subpage-artwork,
  .subpage-hero-artwork,
  .lacquer-hero::before,
  .lacquer-hero::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .subpage-content-frame::before,
  .subpage-artwork { animation: none; }
}