/* ============================================================
   HƯỜNG ĐÔNG · KIRIGAMI SUB-PAGES V2 · 02/09/2026

   Lớp này mở rộng hệ sub-page hiện có. Tranh sơn mài route vẫn là nền;
   ảnh khung giấy và hiện vật thật tạo sân khấu 3D phía trước.
   ============================================================ */

:root {
  --kirigami-paper: #f2e8d4;
  --kirigami-paper-high: #fffaf0;
  --kirigami-jade: #1e3b34;
  --kirigami-cinnabar: #8f2f2d;
  --kirigami-gold: #e8c783;
  --kirigami-ink: #332318;
  --kirigami-shadow: rgb(16 9 5 / 38%);
  --kirigami-ease: cubic-bezier(.16, 1, .3, 1);
}

body:has(main[data-page-art]) {
  overflow-x: clip;
}

/* --- Sân khấu Hero -------------------------------------------------- */

[data-page-art] .page-hero.lacquer-hero {
  min-height: clamp(540px, 43vw, 660px);
  padding-block: clamp(70px, 7vw, 104px) clamp(96px, 9vw, 138px);
  perspective: 1400px;
}

[data-page-art] .page-hero.lacquer-hero > :is(.eyebrow, h1, p, nav) {
  position: relative;
  z-index: 6;
  width: min(650px, 43%);
  max-width: min(650px, 43%);
}

[data-page-art] .page-hero.lacquer-hero > .eyebrow {
  display: table;
  width: auto;
  max-width: min(620px, 42%);
  margin-bottom: 20px;
  padding: 11px 30px 10px 24px;
  clip-path: polygon(0 0, 94% 0, 100% 50%, 94% 100%, 0 100%, 3% 50%);
  border: 1px solid rgb(232 199 131 / 78%);
  background: var(--kirigami-paper);
  color: #795425;
  letter-spacing: .16em;
  text-shadow: none;
  box-shadow: 9px 11px 22px rgb(10 6 4 / 26%);
}

[data-page-art] .page-hero.lacquer-hero > h1 {
  font-size: clamp(62px, 6.1vw, 96px);
  line-height: .9;
}

[data-page-art] .page-hero.lacquer-hero > p:not(.eyebrow) {
  max-width: 34ch;
  font-size: clamp(18px, 1.45vw, 24px);
}

.kirigami-hero-depth {
  position: absolute !important;
  inset: 0;
  z-index: 3 !important;
  overflow: hidden;
  overflow: clip;
  contain: paint;
  pointer-events: none;
  transform-style: preserve-3d;
}

.kirigami-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 -10px 16px rgb(10 6 4 / 22%));
  transform: translateZ(72px);
  transform-origin: center bottom;
  transition: transform 500ms var(--kirigami-ease), filter 500ms ease;
}

.kirigami-stage {
  position: absolute;
  z-index: 3;
  top: 6%;
  right: 4%;
  bottom: 11%;
  width: 48%;
  transform: translate3d(var(--kirigami-shift-x, 0), var(--kirigami-shift-y, 0), 46px);
  transform-style: preserve-3d;
  transition: transform 520ms var(--kirigami-ease);
}

.kirigami-piece {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
}

.kirigami-piece img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 16px var(--kirigami-shadow));
  animation: kirigami-idle 6.8s ease-in-out calc(var(--kirigami-order, 0) * -1.1s) infinite alternate;
}

@media (hover: hover) {
  .page-hero.lacquer-hero:hover .kirigami-frame {
    filter: drop-shadow(0 -13px 20px rgb(10 6 4 / 28%));
    transform: translate3d(0, -2px, 76px) rotateX(1.2deg);
  }
}

@keyframes kirigami-idle {
  from { transform: translate3d(0, -2px, 0) rotate(-.18deg); }
  to { transform: translate3d(0, 3px, 0) rotate(.18deg); }
}

/* Tarot là gì · cửa vào bằng một lá bài và một tờ dẫn nhập. */
[data-kirigami-scene="tarot-la-gi"] .piece-card-back {
  top: 4%;
  right: 18%;
  width: 34%;
  height: 78%;
  transform: translateZ(58px) rotate(5deg);
}

[data-kirigami-scene="tarot-la-gi"] .piece-paper-round {
  right: 42%;
  bottom: 6%;
  width: 45%;
  aspect-ratio: 1;
  opacity: .88;
  transform: translateZ(26px) rotate(-7deg);
}

/* Bảo tàng · ba hiện vật đặt thành nhịp trung tâm. */
[data-kirigami-scene="la-bai"] .piece-card {
  top: 5%;
  width: 30%;
  height: 78%;
}

[data-kirigami-scene="la-bai"] .piece-card-left {
  left: 8%;
  transform: translateZ(32px) rotate(-8deg);
}

[data-kirigami-scene="la-bai"] .piece-card-centre {
  left: 35%;
  top: 0;
  transform: translateZ(70px);
}

[data-kirigami-scene="la-bai"] .piece-card-right {
  right: 5%;
  transform: translateZ(42px) rotate(8deg);
}

/* Trải bài · ba lá úp tạo thành một đường mở. */
[data-kirigami-scene="trai-bai"] .piece-spread {
  top: 14%;
  width: 29%;
  height: 69%;
}

[data-kirigami-scene="trai-bai"] .piece-spread-left {
  left: 6%;
  transform: translateZ(30px) rotate(-11deg) translateY(22px);
}

[data-kirigami-scene="trai-bai"] .piece-spread-centre {
  left: 35.5%;
  transform: translateZ(68px) translateY(-9px);
}

[data-kirigami-scene="trai-bai"] .piece-spread-right {
  right: 5%;
  transform: translateZ(42px) rotate(11deg) translateY(22px);
}

/* Healing · lá Sao phía sau và tứ chất như một vườn giấy. */
[data-kirigami-scene="healing"] .piece-healing-card {
  top: 1%;
  right: 10%;
  width: 31%;
  height: 73%;
  transform: translateZ(34px) rotate(5deg);
}

[data-kirigami-scene="healing"] .piece-healing-lotus {
  left: 1%;
  bottom: 0;
  width: 82%;
  height: 62%;
  transform: translateZ(66px);
}

/* Huyền sử · tranh nguồn nằm trong một lớp giấy, lá bài làm chú giải. */
[data-kirigami-scene="huyen-su"] .piece-history-landscape {
  top: 9%;
  right: 3%;
  width: 88%;
  height: 65%;
  padding: 10px;
  border: 1px solid var(--kirigami-gold);
  background: var(--kirigami-paper);
  clip-path: polygon(0 0, 96% 0, 100% 8%, 100% 100%, 4% 100%, 0 92%);
  transform: translateZ(22px) rotate(2deg);
}

[data-kirigami-scene="huyen-su"] .piece-history-landscape img {
  object-fit: cover;
}

[data-kirigami-scene="huyen-su"] .piece-history-card {
  right: 10%;
  bottom: -2%;
  width: 24%;
  height: 58%;
  transform: translateZ(76px) rotate(7deg);
}

/* Chuyện Hường Đông · lớp tài liệu và lá mẫu. */
[data-kirigami-scene="chuyen-huong-dong"] .piece-story-paper {
  top: 8%;
  right: 4%;
  width: 88%;
  height: 66%;
  padding: 10px;
  border: 1px solid var(--kirigami-gold);
  background: var(--kirigami-paper);
  clip-path: polygon(0 0, 94% 0, 100% 10%, 100% 100%, 6% 100%, 0 90%);
  transform: translateZ(24px) rotate(-2deg);
}

[data-kirigami-scene="chuyen-huong-dong"] .piece-story-paper img {
  object-fit: cover;
}

[data-kirigami-scene="chuyen-huong-dong"] .piece-story-card {
  right: 9%;
  bottom: -2%;
  width: 25%;
  height: 58%;
  transform: translateZ(74px) rotate(8deg);
}

/* Cửa hàng · ba phiên bản như ba bục trưng bày. */
[data-kirigami-scene="cua-hang"] .piece-pack {
  top: 17%;
  width: 48%;
  height: 62%;
  padding: 5px;
  border: 1px solid rgb(232 199 131 / 70%);
  background: var(--kirigami-paper-high);
  clip-path: polygon(0 0, 95% 0, 100% 8%, 100% 100%, 5% 100%, 0 92%);
}

[data-kirigami-scene="cua-hang"] .piece-pack img { object-fit: cover; }

[data-kirigami-scene="cua-hang"] .piece-pack-left {
  left: 0;
  transform: translateZ(24px) rotate(-5deg) translateY(30px);
}

[data-kirigami-scene="cua-hang"] .piece-pack-centre {
  left: 27%;
  top: 7%;
  transform: translateZ(70px);
}

[data-kirigami-scene="cua-hang"] .piece-pack-right {
  right: 0;
  transform: translateZ(36px) rotate(5deg) translateY(30px);
}

/* --- Kirigami đi xuyên suốt phần nội dung --------------------------- */

[data-page-art] .subpage-content-frame {
  background-color: var(--kirigami-paper-high);
}

[data-page-art] :is(.v2-card, .price-tier, .news-grid article, .museum-exhibit) {
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  border-color: rgb(174 130 65 / 42%);
  background: var(--kirigami-paper-high);
}

[data-page-art] :is(.v2-card, .price-tier, .news-grid article, .museum-exhibit):focus-within {
  transform: translateY(-5px) rotateX(.6deg);
}
@media (hover: hover) {
  [data-page-art] :is(.v2-card, .price-tier, .news-grid article, .museum-exhibit):hover {
    transform: translateY(-5px) rotateX(.6deg);
  }
}

[data-page-art] :is(.button, .museum-room-nav a, .museum-dialog-actions a, .museum-dialog-actions button) {
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
}

[data-page-art] :is(.section-visual, .section-card-fan, .museum-foreword, .museum-history-wing) {
  transform-style: preserve-3d;
}

[data-page-art] .section-visual::before,
[data-page-art] .section-card-fan::before {
  background: var(--kirigami-paper);
  transform: translate3d(10px, 10px, -18px) rotate(.5deg);
}

/* --- Entrance 5 lớp · 70ms stagger --------------------------------- */

:is(html.hd-first-load, html.is-changing.is-rendering) .kirigami-frame {
  animation: kirigami-frame-enter 1040ms var(--kirigami-ease) 280ms both;
}

:is(html.hd-first-load, html.is-changing.is-rendering) .kirigami-piece {
  animation: kirigami-piece-enter 980ms var(--kirigami-ease)
    calc(350ms + var(--kirigami-order, 0) * 70ms) both;
}

@keyframes kirigami-frame-enter {
  from { opacity: 0; transform: translate3d(0, 18px, 72px) scale(1.025); }
  to { opacity: 1; transform: translate3d(0, 0, 72px) scale(1); }
}

@keyframes kirigami-piece-enter {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}

@media (max-width: 1100px) {
  [data-page-art] .page-hero.lacquer-hero > :is(.eyebrow, h1, p, nav) {
    width: min(590px, 49%);
    max-width: min(590px, 49%);
  }

  .kirigami-stage {
    right: 12px;
    width: 50%;
  }
}

@media (max-width: 760px) {
  [data-page-art] .page-hero.lacquer-hero {
    min-height: 620px;
    justify-content: flex-start;
    padding: 78px 22px 154px;
  }

  [data-page-art] .page-hero.lacquer-hero > :is(.eyebrow, h1, p, nav) {
    width: 100%;
    max-width: 100%;
  }

  [data-page-art] .page-hero.lacquer-hero > .eyebrow {
    width: auto;
    max-width: 90%;
  }

  [data-page-art] .page-hero.lacquer-hero > h1 {
    font-size: clamp(53px, 15vw, 74px);
  }

  .kirigami-frame {
    height: 48%;
    top: auto;
    bottom: -1px;
    object-position: center bottom;
  }

  .kirigami-stage {
    top: auto;
    right: 12px;
    bottom: 4%;
    width: 61%;
    height: 42%;
    opacity: .7;
  }

  [data-kirigami-scene="la-bai"] .piece-card,
  [data-kirigami-scene="trai-bai"] .piece-spread {
    height: 82%;
  }

  [data-kirigami-scene="cua-hang"] .piece-pack {
    height: 70%;
  }

  [data-page-art="la-bai"] .page-hero.lacquer-hero {
    min-height: 720px;
  }

  [data-page-art="la-bai"] .museum-room-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  [data-page-art="la-bai"] .museum-room-nav a {
    min-height: 42px;
    padding-inline: 10px;
    font-size: 10px;
    text-align: center;
  }

  [data-page-art="la-bai"] .kirigami-stage {
    right: 12px;
    width: 62%;
    height: 36%;
    opacity: .52;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kirigami-frame,
  .kirigami-stage,
  .kirigami-piece,
  .kirigami-piece img,
  [data-page-art] :is(.v2-card, .price-tier, .news-grid article, .museum-exhibit) {
    animation: none !important;
    transition: none !important;
  }

  .kirigami-stage {
    transform: translate3d(0, 0, 46px) !important;
  }
}

@media print {
  .kirigami-hero-depth { display: none !important; }
}