/* The home stage is an immersive entrance. All visual rules stay within it. */
body.home-mode { overflow: hidden; background: #070b14; }
body.home-mode :is(.giftbar, .site-header, .closing, .site-footer, .collection) { display: none; }
body.home-mode main { width: 100%; margin: 0; }
body.gallery-mode .cinema-home, body.manga-mode .cinema-home { display: none; }

.cinema-home {
  --home-cream: #ecd7d0;
  --home-white: #fffaf6;
  --home-muted: #e2e8f0ba;
  --home-hairline: #f3eced38;
  --home-inset: clamp(20px, 2.35vw, 40px);
  --home-chamfer: clamp(18px, 2vw, 30px);
  --home-ease: cubic-bezier(.16, 1, .3, 1);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* Keep the overscanned background from scrolling this stage on control focus. */
  overflow: clip;
  isolation: isolate;
  background: #070c17;
  color: var(--home-white);
  font-family: 'Be Vietnam Pro', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.cinema-home:focus { outline: none; }
.cinema-home :is(.cinema-nav, .cinema-enter, .cinema-menu-toggle, .cinema-rail, .cinema-kicker, .cinema-cta, .cinema-scene-meta, .cinema-dock),
#homeMenu :is(.home-menu-top, #surpriseOpen) { font-family: 'Chakra Petch', 'Be Vietnam Pro', sans-serif; }
.cinema-bg {
  position: absolute; inset: -3%; z-index: -3;
  background: #0c1220 url('assets/sakura.webp') center/cover;
  transform-origin: center;
  transform: translate3d(var(--home-pan-x, 0px), var(--home-pan-y, 0px), 0) scale(var(--home-zoom, 1));
}
.effects-running .cinema-bg { will-change: transform; }
.cinema-copy { transform: translate3d(var(--home-copy-x, 0px), var(--home-copy-y, 0px), 0); }
.effects-running .cinema-copy { will-change: transform; }
.cinema-layer {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--scene-position, center);
  opacity: 0;
  transition: opacity 1s ease;
  filter: saturate(.93);
}
.cinema-layer.is-active { opacity: 1; }
.cinema-layer.media-unavailable { visibility: hidden; }
.cinema-artwork-motion {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%; pointer-events: none;
  opacity: 0; filter: saturate(.93);
  transition: opacity .45s ease;
}
.cinema-artwork-motion.is-ready { opacity: 1; }
.is-motion-still .cinema-artwork-motion { opacity: 0; transition: none; }
.cinema-grade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, #070d1bc7 0%, #070d1b12 28%, #070d1b1a 43%, #070d1bac 71%, #070d1bef 100%),
    linear-gradient(90deg, #09101c89 0%, #09101c12 38%, #09101c08 68%, #09101c30 100%);
}
.cinema-grade::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 36%, transparent 30%, #060b1940 100%);
}
/* The portal reveals the picture, while a separate scrim protects the text. */
@supports (mask-image: radial-gradient(black, transparent)) {
  .effects-running .cinema-grade {
    mask-image: radial-gradient(ellipse 250px 210px at var(--home-light-x, 50%) var(--home-light-y, 35%),
      rgb(0 0 0 / calc(1 - var(--home-light-opacity, 0) * .8)) 0%, #000 85%);
  }
}
.cinema-legibility {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, #060b1938, transparent 22%, transparent 43%, #060b1924 66%, #060b1945 100%);
}
.cinema-light, .cinema-atmosphere {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
}
.cinema-light {
  opacity: var(--home-light-opacity, 0); mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 245px 210px at var(--home-light-x, 50%) var(--home-light-y, 35%), rgb(var(--home-light-color, 255 193 182) / .16), transparent 80%),
    radial-gradient(ellipse 360px 290px at var(--home-light-x, 50%) var(--home-light-y, 35%), rgb(var(--home-light-color, 255 193 182) / .035), transparent 75%);
}
.cinema-light::after {
  content: ''; position: absolute;
  left: var(--home-light-x, 50%); top: var(--home-light-y, 35%);
  width: 330px; height: 280px;
  transform: translate(-50%, -50%) rotate(-18deg);
  border: 1px solid rgb(var(--home-light-color, 255 193 182) / .18);
  border-radius: 47% 53% 56% 44% / 54% 43% 57% 46%;
  box-shadow: inset 0 0 35px rgb(var(--home-light-color, 255 193 182) / .035), 0 0 25px rgb(var(--home-light-color, 255 193 182) / .06);
  filter: blur(2px);
}
.cinema-atmosphere { opacity: 0; }
.effects-running .cinema-atmosphere { opacity: 1; }
.cinema-home.is-motion-still *, .cinema-home.is-motion-still *::before, .cinema-home.is-motion-still *::after { animation: none !important; transition: none !important; }
.is-motion-still :is(.cinema-bg, .cinema-copy) { transform: none; }
.is-motion-still .cinema-light { opacity: 0; }
.is-motion-still .cinema-cta:hover :is(.icon, svg) { transform: none; }
.cinema-frame { position: absolute; inset: var(--home-inset); }
.cinema-frame .frame-line, .cinema-frame .frame-corner { position: absolute; pointer-events: none; }
.cinema-frame .frame-line { background: var(--home-hairline); }
.cinema-frame .line-top, .cinema-frame .line-bottom { height: 1px; left: var(--home-chamfer); right: var(--home-chamfer); }
.cinema-frame .line-top { top: 0; }
.cinema-frame .line-bottom { bottom: 0; }
.cinema-frame .line-left, .cinema-frame .line-right { width: 1px; top: var(--home-chamfer); bottom: var(--home-chamfer); }
.cinema-frame .line-left { left: 0; }
.cinema-frame .line-right { right: 0; }
.cinema-frame .frame-corner { width: var(--home-chamfer); height: var(--home-chamfer); }
.cinema-frame .corner-tl, .cinema-frame .corner-br {
  background: linear-gradient(135deg, transparent calc(50% - .55px), var(--home-hairline) calc(50% - .55px), var(--home-hairline) calc(50% + .55px), transparent calc(50% + .55px));
}
.cinema-frame .corner-tr, .cinema-frame .corner-bl {
  background: linear-gradient(45deg, transparent calc(50% - .55px), var(--home-hairline) calc(50% - .55px), var(--home-hairline) calc(50% + .55px), transparent calc(50% + .55px));
}
.cinema-frame .corner-tl { top: 0; left: 0; }
.cinema-frame .corner-tr { top: 0; right: 0; }
.cinema-frame .corner-bl { bottom: 0; left: 0; }
.cinema-frame .corner-br { bottom: 0; right: 0; }

.cinema-header {
  position: absolute; top: 13px; left: 25px; right: 13px;
  display: flex; align-items: center; gap: 22px; min-height: 48px;
  z-index: 3;
}
.cinema-brand {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  min-height: 44px; font-size: 2.65rem; font-weight: 800;
  line-height: 1; letter-spacing: -.075em;
}
.cinema-brand > span { font-size: 2.15rem; color: var(--home-cream); font-weight: 400; }
.cinema-brand small { margin-left: 6px; font-size: .625rem; line-height: 1.5; letter-spacing: .09em; font-weight: 400; }
.cinema-header-actions { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.cinema-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 36px); margin-left: auto; }
.cinema-nav :is(a, button) {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 5px 0; border: 0; background: transparent;
  color: #fffaf6d1; font-size: .6875rem; line-height: 1.5;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.cinema-nav :is(a, button):hover { color: var(--home-cream); }
.cinema-nav .active::after { display: none; }
.cinema-enter, .cinema-menu-toggle {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  min-height: 46px; padding: 10px 19px; flex-shrink: 0;
  border: 0; border-radius: 0;
  font-size: .6875rem; font-weight: 700; line-height: 1.5;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.cinema-enter { margin-left: 2px; color: var(--home-white); background: #f3e8e30e; backdrop-filter: blur(16px); }
.cinema-enter:hover { background: #f3e8e31c; }
.cinema-menu-toggle {
  margin-left: -22px; background: var(--home-cream); color: #29212a;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.cinema-menu-toggle:hover { background: #f8e8e1; }
.cinema-header .icon { width: 14px; height: 14px; }
.cinema-menu-toggle .icon { width: 13px; height: 13px; }

.cinema-rail {
  position: absolute; top: 44%; left: 22px; transform: translateY(-50%);
  width: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  margin: 0; padding: 0; z-index: 2;
}
.cinema-rail button {
  position: relative; display: flex; align-items: center; justify-content: flex-start;
  gap: 12px; min-height: 44px; padding: 9px 9px 9px 0;
  border: 0; border-radius: 0; background: transparent;
  color: #e6edf199; font-size: .6875rem; font-weight: 700; line-height: 1.5;
  letter-spacing: .12em; text-transform: uppercase;
}
.cinema-rail button::before {
  content: ''; position: absolute; left: -23px; top: 50%; width: 6px; height: 8px;
  transform: translateY(-50%) scaleX(0); transform-origin: left;
  background: var(--home-cream); transition: transform .3s var(--home-ease);
}
.cinema-rail button:hover { color: var(--home-white); }
.cinema-rail button:is(.is-active, [aria-pressed="true"], [aria-current="true"]) { color: var(--home-white); }
.cinema-rail button:is(.is-active, [aria-pressed="true"], [aria-current="true"])::before { transform: translateY(-50%) scaleX(1); }
.cinema-rail .scene-num { font-size: .625rem; opacity: .65; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.cinema-rail .scene-name { font-size: inherit; }

.cinema-copy {
  position: absolute; left: 195px; right: 195px; bottom: clamp(115px, 15.5vh, 178px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  z-index: 1;
}
.cinema-kicker {
  margin: 0 0 17px; color: var(--home-cream);
  font-size: .625rem; font-weight: 700; line-height: 1.6; letter-spacing: .22em; text-transform: uppercase;
}
.cinema-copy h1 {
  margin: 0; color: var(--home-white); font-family: 'Be Vietnam Pro', sans-serif;
  font-size: clamp(2rem, 3.2vw, 3.8rem); font-weight: 700; line-height: 1.25;
  letter-spacing: .015em; text-transform: uppercase; text-wrap: balance;
  text-shadow: 0 3px 30px #06102450;
}
.home-title-row { display: block; overflow: hidden; padding-bottom: .06em; }
.home-title-row > span { display: block; transition: transform .5s var(--home-ease), opacity .4s ease; }
.home-title-row + .home-title-row { margin-top: -.025em; }
.cinema-description {
  width: min(100%, 490px); margin: 18px 0 0;
  color: #eff0f1c4; font-size: .75rem; line-height: 1.9; font-weight: 400;
  text-wrap: pretty; transition: opacity .4s ease, transform .4s ease;
}
.cinema-cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 194px; min-height: 48px; margin-top: 23px; padding: 12px 23px;
  border: 1px solid #f4e6e329; border-radius: 0;
  background: #eee3df0c; backdrop-filter: blur(14px);
  color: var(--home-white); font-size: .6875rem; font-weight: 700;
  line-height: 1.5; letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.cinema-cta:hover { background: #eee3df20; border-color: #f4e6e365; }
.cinema-cta .icon, .cinema-cta > svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .25s ease; }
.cinema-cta:hover .icon, .cinema-cta:hover > svg { transform: translateX(3px); }
.cinema-copy.is-swapping .home-title-row > span, .cinema-home.is-swapping .home-title-row > span { transform: translateY(115%); opacity: 0; }
.cinema-copy.is-swapping .cinema-description, .cinema-home.is-swapping .cinema-description { opacity: 0; transform: translateY(7px); }
.cinema-home.is-switching .home-title-row > span { animation: home-mask .65s var(--home-ease) both; }
.cinema-home.is-switching .cinema-description { animation: home-lift .65s var(--home-ease) .08s both; }

.cinema-scene-meta {
  position: absolute; left: 24px; right: 24px; bottom: 75px;
  display: flex; align-items: center; gap: 13px;
  color: #f6f1eea1; font-size: .5625rem; line-height: 1.5; letter-spacing: .13em; text-transform: uppercase;
}
.scene-progress { width: 50px; height: 2px; overflow: hidden; background: #faf3ec2e; }
.scene-progress > span { display: block; height: 100%; width: 16.667%; background: var(--home-cream); transition: width .55s var(--home-ease); }
#homeSceneCount { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.cinema-dock {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch;
  min-height: 57px; border-top: 1px solid var(--home-hairline);
}
.cinema-dock :is(a, button) {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 8px 22px; border: 0; border-radius: 0; background: transparent;
  color: #f4f0ecc2; font-size: .6875rem; font-weight: 700; line-height: 1.5;
  letter-spacing: .11em; text-transform: uppercase;
}
.cinema-dock :is(a, button):hover { color: var(--home-white); background: #fffaf605; }
.cinema-dock > :first-child { justify-content: flex-start; }
.cinema-dock > :last-child { justify-content: flex-end; }
.cinema-dock > :not(:first-child) { border-left: 1px solid #f3eced1c; }
.cinema-dock .icon { width: 16px; height: 16px; }
.cinema-dock #homeMotionToggle[aria-pressed="false"] { color: #d8d5d29e; }
.cinema-dock #homeMotionToggle:disabled { cursor: default; opacity: .65; }
.cinema-home :is(a, button):focus-visible { outline: 2px solid var(--home-cream); outline-offset: 5px; }
.cinema-home :is(.cinema-cta, .cinema-menu-toggle):focus-visible { outline-offset: -5px; }

/* The native dialog keeps the menu keyboard accessible and above the stage. */
#homeMenu {
  width: min(590px, calc(100% - 40px)); max-height: calc(100dvh - 40px);
  margin: auto; padding: 0; overflow: auto; border: 1px solid #ecd7d047;
  border-radius: 0; background: #101624f2; color: #fffaf6;
  font-family: 'Be Vietnam Pro', sans-serif; box-shadow: 0 30px 150px #020610aa;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
#homeMenu::backdrop { background: #040812b0; backdrop-filter: blur(12px); }
.home-menu-panel { padding: 28px 32px 32px; }
.home-menu-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid #ecd7d026; }
.home-menu-top :is(p, h2) { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.home-menu-top > span { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.home-menu-eyebrow { margin: 27px 0 0; font: 700 .5625rem/1.5 'Chakra Petch', sans-serif; letter-spacing: .19em; color: #ecd7d095; }
.home-menu-note { margin: 22px 0 0; font-size: .6875rem; color: #e2e8f08c; }
.home-menu-top button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 8px 13px; border: 0; border-radius: 0; background: #ecd7d0; color: #29212a;
  font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.home-menu-top button .icon { width: 16px; height: 16px; }
.home-menu-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 18px; }
.home-menu-links :is(a, button) {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; min-height: 77px; padding: 18px 0;
  border: 0; border-bottom: 1px solid #ecd7d026; border-radius: 0;
  background: transparent; color: #fffaf6; text-align: left;
  font-size: clamp(1.25rem, 4vw, 1.75rem); font-weight: 400; line-height: 1.5; letter-spacing: -.02em;
}
.home-menu-links :is(a, button):hover { color: var(--pink, #ecd7d0); }
.home-menu-links .icon { width: 21px; height: 21px; }
.home-menu-links small { color: #ecd7d07d; font: 700 .625rem/1 'Chakra Petch', sans-serif; letter-spacing: .1em; }
.home-menu-links :is(a, button) > span { flex: 1; }
.home-menu-panel > #surpriseOpen {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; min-height: 48px; margin-top: 26px; padding: 10px 16px;
  border: 1px solid #ecd7d037; border-radius: 0; background: #ecd7d00a; color: #ecd7d0;
  font-size: .6875rem; font-weight: 700; line-height: 1.6;
}
.home-menu-panel > #surpriseOpen .icon { width: 18px; height: 18px; }
#homeMenu :is(a, button):focus-visible { outline: 2px solid #ecd7d0; outline-offset: 4px; }

@keyframes home-line-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes home-line-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes home-lift { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes home-mask { from { transform: translateY(115%); } to { transform: translateY(0); } }
.home-entering .line-top, .home-entering .line-bottom { transform-origin: left; animation: home-line-x .65s ease .06s both; }
.home-entering .line-left, .home-entering .line-right { transform-origin: top; animation: home-line-y .65s ease .06s both; }
.home-entering .cinema-header { animation: home-lift .7s var(--home-ease) .2s both; }
.home-entering .home-title-row > span { animation: home-mask .9s var(--home-ease) .3s both; }
.home-entering .home-title-row + .home-title-row > span { animation-delay: .4s; }
.home-entering :is(.cinema-kicker, .cinema-description) { animation: home-lift .8s var(--home-ease) .5s both; }
.home-entering .cinema-cta { animation: home-lift .7s var(--home-ease) .7s both; }
.home-entering :is(.cinema-dock, .cinema-scene-meta) { animation: home-lift .7s var(--home-ease) .85s both; }

@media (min-width: 1600px) {
  .cinema-header { left: 34px; right: 20px; top: 19px; }
  .cinema-rail { left: 33px; }
  .cinema-rail button::before { left: -34px; }
  .cinema-nav :is(a, button), .cinema-enter, .cinema-menu-toggle, .cinema-rail button, .cinema-dock :is(a, button) { font-size: .6875rem; }
  .cinema-description { font-size: .8125rem; width: min(100%, 560px); }
}
@media (max-width: 1100px) {
  .cinema-header-actions { gap: 16px; }
  .cinema-header { gap: 16px; left: 22px; }
  .cinema-nav { gap: 17px; }
  .cinema-nav :is(a, button) { font-size: .625rem; letter-spacing: .07em; }
  .cinema-enter, .cinema-menu-toggle { padding-inline: 15px; }
  .cinema-menu-toggle { margin-left: -16px; }
  .cinema-copy { left: 170px; right: 120px; }
  .cinema-copy h1 { font-size: clamp(1.875rem, 3.7vw, 2.65rem); }
}
@media (max-width: 900px) {
  .cinema-header { left: 22px; right: 14px; }
  .cinema-nav { display: none; }
  .cinema-enter { margin-left: auto; }
  .cinema-menu-toggle { margin-left: -16px; }
  .cinema-rail { left: 20px; }
  .cinema-rail button { letter-spacing: .07em; font-size: .625rem; gap: 8px; }
  .cinema-rail button::before { left: -21px; }
  .cinema-copy { left: 155px; right: 70px; bottom: 135px; }
  .cinema-copy h1 { font-size: clamp(1.75rem, 3.7vw, 2.375rem); }
}
@media (max-width: 900px) and (max-aspect-ratio: 1/1) {
  .cinema-copy { left: 35px; right: 35px; bottom: 164px; }
  .cinema-copy h1 { font-size: clamp(2rem, 5.4vw, 3rem); }
  .cinema-rail { left: 24px; right: 24px; bottom: 59px; top: auto; transform: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
  .cinema-rail button { justify-content: center; min-height: 45px; padding: 9px 0; border-top: 1px solid #fffaf624; }
  .cinema-rail .scene-num { font-size: .6875rem; }
  .cinema-rail .scene-name { display: none; }
  .cinema-rail button::before { width: auto; height: 2px; top: -1px; left: 0; right: 0; transform: scaleX(0); }
  .cinema-rail button:is(.is-active, [aria-pressed="true"], [aria-current="true"])::before { transform: scaleX(1); }
  .cinema-scene-meta { bottom: 120px; left: 24px; right: 24px; }
}
@media (max-width: 560px) {
  .cinema-layer { object-position: var(--scene-mobile-position, var(--scene-position, center)); }
  .cinema-home { --home-inset: 14px; --home-chamfer: 18px; }
  .cinema-bg { inset: -3%; }
  .cinema-grade { background: linear-gradient(180deg, #070d1bb5, #070d1b10 25%, #070d1b22 42%, #070d1bbb 68%, #070d1bf0 100%); }
  .cinema-header { top: 12px; left: 16px; right: 11px; gap: 14px; }
  .cinema-brand { font-size: 2.5rem; gap: 5px; }
  .cinema-brand > span { font-size: 1.8rem; }
  .cinema-brand small { font-size: .5625rem; letter-spacing: .035em; margin-left: 5px; }
  .cinema-enter { display: none; }
  .cinema-menu-toggle { margin-left: auto; padding: 10px 15px; min-height: 44px; font-size: .625rem; }
  .cinema-copy { left: 20px; right: 20px; bottom: 161px; }
  .cinema-copy h1 { font-size: clamp(1.65rem, 7.1vw, 2.25rem); line-height: 1.33; letter-spacing: -.015em; }
  .cinema-kicker { font-size: .5625rem; margin-bottom: 13px; letter-spacing: .13em; }
  .cinema-description { margin-top: 15px; font-size: .6875rem; line-height: 1.85; max-width: 345px; }
  .cinema-cta { min-height: 46px; min-width: 186px; margin-top: 21px; font-size: .625rem; }
  .cinema-rail { left: 16px; right: 16px; bottom: 54px; }
  .cinema-rail button { min-height: 44px; }
  .cinema-scene-meta { left: 16px; right: 16px; bottom: 113px; font-size: .5rem; gap: 9px; letter-spacing: .08em; }
  .scene-progress { width: 32px; }
  .cinema-dock { min-height: 50px; grid-template-columns: 1fr 1.1fr 1fr; }
  .cinema-dock :is(a, button) { min-height: 50px; padding: 7px 11px; gap: 6px; font-size: .625rem; letter-spacing: .03em; line-height: 1.6; }
  .cinema-dock > :first-child, .cinema-dock > :last-child { justify-content: center; }
  .cinema-dock .icon { width: 14px; height: 14px; }
  #homeMenu { width: calc(100% - 28px); max-height: calc(100dvh - 28px); }
  .home-menu-panel { padding: 20px 22px 28px; }
  .home-menu-top { gap: 12px; padding-bottom: 17px; }
  .home-menu-top :is(p, h2) { font-size: .5625rem; letter-spacing: .09em; }
  .home-menu-links :is(a, button) { min-height: 71px; font-size: 1.375rem; }
}
@media (max-width: 360px) {
  .cinema-home { --home-inset: 10px; }
  .cinema-header { left: 12px; right: 9px; }
  .cinema-brand { font-size: 2.25rem; }
  .cinema-brand > span { font-size: 1.65rem; }
  .cinema-brand small { font-size: .5rem; }
  .cinema-menu-toggle { padding-inline: 12px; }
  .cinema-copy { left: 16px; right: 16px; }
  .cinema-copy h1 { font-size: 1.6rem; }
  .cinema-description { font-size: .625rem; }
  .cinema-dock :is(a, button) { padding-inline: 6px; gap: 4px; font-size: .5625rem; letter-spacing: 0; }
  .cinema-dock .icon { width: 13px; height: 13px; }
  .cinema-scene-meta { font-size: .5rem; letter-spacing: .045em; }
  .home-menu-panel { padding-inline: 18px; }
}
@media (max-height: 620px) and (max-aspect-ratio: 1/1) {
  .cinema-kicker { display: none; }
  .cinema-description { display: none; }
  .cinema-copy { bottom: 151px; }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .cinema-home { --home-inset: 12px; --home-chamfer: 16px; }
  .cinema-header { top: 8px; left: 18px; right: 10px; gap: 14px; }
  .cinema-brand { font-size: 2.2rem; }
  .cinema-brand > span { font-size: 1.7rem; }
  .cinema-brand small { font-size: .5rem; }
  .cinema-nav { display: none; }
  .cinema-enter { margin-left: auto; min-height: 44px; }
  .cinema-menu-toggle { min-height: 44px; margin-left: -14px; }
  .cinema-rail { left: 18px; right: auto; top: 88px; bottom: auto; transform: none; width: 156px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .cinema-rail button { min-height: 44px; justify-content: center; border-top: 1px solid #fffaf62e; padding: 8px 0; }
  .cinema-rail .scene-num { font-size: .6875rem; }
  .cinema-rail .scene-name { display: none; }
  .cinema-rail button::before { top: -1px; left: 0; right: 0; width: auto; height: 2px; transform: scaleX(0); }
  .cinema-rail button:is(.is-active, [aria-pressed="true"], [aria-current="true"])::before { transform: scaleX(1); }
  .cinema-copy { left: 208px; right: 35px; bottom: 68px; }
  .cinema-copy h1 { font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.3; letter-spacing: 0; }
  .cinema-kicker, .cinema-description { display: none; }
  .cinema-cta { min-height: 44px; margin-top: 12px; padding-block: 10px; }
  .cinema-scene-meta { left: 19px; right: auto; bottom: 70px; width: 155px; gap: 8px; font-size: .5rem; flex-wrap: wrap; }
  .cinema-scene-meta .scene-progress { width: 30px; }
  .cinema-scene-meta #homeSceneCount { margin-left: 0; }
  .cinema-dock { min-height: 47px; }
  .cinema-dock :is(a, button) { min-height: 46px; font-size: .5625rem; }
  .home-menu-panel { padding-block: 15px; }
  .home-menu-top { padding-bottom: 12px; }
  .home-menu-links { padding-top: 3px; }
  .home-menu-links :is(a, button) { min-height: 52px; padding-block: 9px; font-size: 1.125rem; }
  .home-menu-panel > #surpriseOpen { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-home *, .cinema-home *::before, .cinema-home *::after, #homeMenu * { animation: none !important; transition: none !important; }
  .cinema-copy.is-swapping .home-title-row > span, .cinema-home.is-swapping .home-title-row > span { transform: none; opacity: 1; }
  .cinema-copy.is-swapping .cinema-description, .cinema-home.is-swapping .cinema-description { transform: none; opacity: 1; }
  .cinema-bg, .cinema-copy { transform: none !important; }
  .cinema-light, .cinema-atmosphere { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .cinema-light { display: none; }
}

/* Postcards and small windows turn the cinema into a place to explore. */
.cinema-home { --home-cream: #f0d5bf; }
.cinema-bg {
  transform: perspective(1600px) translate3d(var(--home-pan-x, 0px), var(--home-pan-y, 0px), 0)
    rotateX(var(--camera-rotate-x, 0deg)) rotateY(var(--camera-rotate-y, 0deg)) scale(var(--home-zoom, 1));
}
.cinema-grade {
  background: linear-gradient(180deg, #070d1ba8, #070d1b08 25%, #070d1b05 40%, #070d1b85 72%, #070d1bf2),
    linear-gradient(90deg, #09101c70, #09101c18 45%, #09101c10 75%, #09101c50);
}
.cinema-copy {
  left: clamp(40px, 5vw, 90px); right: auto; bottom: 223px;
  width: min(57%, 790px); align-items: flex-start; text-align: left;
}
.cinema-copy h1 {
  font-size: clamp(2rem, 3.4vw, 4rem); font-weight: 500; line-height: 1.18;
  text-transform: none; letter-spacing: -.045em;
}
.home-title-row + .home-title-row {
  margin-top: 2px; color: #ffe2cd;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-weight: 500; letter-spacing: -.025em;
}
.home-title-row { padding-bottom: .14em; }
.cinema-kicker { margin-bottom: 17px; letter-spacing: .19em; font-size: .5625rem; }
.cinema-kicker > span { margin-right: 6px; }
.cinema-description { width: min(100%, 450px); margin-top: 15px; font-size: .75rem; color: #f7f1e4d1; }
.cinema-cta { margin-top: 21px; border-color: #f4e6e345; background: #eee3df12; }
.cinema-rail {
  left: clamp(40px, 5vw, 90px); right: clamp(40px, 5vw, 90px); top: auto; bottom: 78px;
  width: auto; transform: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start; gap: 18px; perspective: 1000px;
}
.cinema-rail button {
  width: 100%; min-height: 96px; padding: 0; gap: 0;
  display: flex; flex-direction: column; align-items: stretch;
  color: #f8ede2b8; text-align: left; letter-spacing: .075em;
}
.cinema-rail button::before { display: none; }
.scene-window {
  display: block; height: clamp(55px, 6vw, 82px); width: 100%; overflow: hidden;
  border: 1px solid #e7d4bb42; padding: 3px; background: #e7d4bb0a;
  box-shadow: 0 8px 20px #02091340; transform-origin: 50% 80%;
  transform: rotateX(5deg); transition: transform .55s var(--home-ease), border-color .4s, box-shadow .4s;
}
.scene-window img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .6; transition: opacity .4s; }
.cinema-rail .scene-name { margin-top: 9px; padding-right: 20px; font-size: .5625rem; line-height: 1.5; }
.cinema-rail .scene-num { position: absolute; right: 0; bottom: 0; font-size: .5625rem; opacity: .5; }
.cinema-rail button:is(.is-active, [aria-pressed="true"]) .scene-window {
  border-color: #ffe6cbb3; transform: translateY(-7px) rotateX(0deg);
  box-shadow: 0 12px 25px #02091365, 0 0 18px #ffe0b41c;
}
.cinema-rail button:is(.is-active, [aria-pressed="true"]) img { opacity: 1; }
.cinema-scene-meta {
  left: clamp(40px, 5vw, 90px); right: clamp(40px, 5vw, 90px); bottom: 202px;
  font-size: .5rem; letter-spacing: .13em;
}
.scene-progress { width: 36px; }
.cinema-next {
  position: absolute; right: clamp(55px, 7vw, 130px); bottom: 255px;
  width: clamp(220px, 24vw, 360px); padding: 0; border: 0; border-radius: 0;
  background: transparent; text-align: left; color: #fff3e6; z-index: 1;
  transform: translate3d(calc(var(--depth-x, 0px) * -1.2), calc(var(--depth-y, 0px) * -1.2), 0);
}
.next-eyebrow { display: block; margin-bottom: 18px; font: 600 .5rem/1.6 'Chakra Petch', sans-serif; letter-spacing: .21em; color: #fff2ddd1; }
.postcard-stack { display: block; position: relative; width: 100%; aspect-ratio: 1.5; perspective: 1100px; }
.postcard {
  position: absolute; inset: 0; display: block; padding: 8px 8px 22px; background: #f1e4ce;
  border: 1px solid #fff5e2; box-shadow: 0 14px 40px #02081480;
  transform-origin: 50% 80%; transition: transform .7s var(--home-ease);
  backface-visibility: hidden;
}
.postcard img { display: block; width: 100%; height: 100%; object-fit: cover; }
.postcard-far { transform: translate3d(9px, -5px, -58px) rotateZ(11deg) rotateY(-8deg); background: #c5b59e; filter: brightness(.85); }
.postcard-back { transform: translate3d(-14px, 4px, -25px) rotateZ(-9deg) rotateY(-8deg); background: #e0d2be; filter: brightness(.93); }
.postcard-front {
  transform: translate3d(0, calc(var(--travel-lift, 0px) * -.35), 0) rotateZ(3deg) rotateY(-9deg) rotateX(4deg);
}
.postcard-front::after {
  content: ''; position: absolute; inset: 8px 8px 22px; pointer-events: none;
  background: linear-gradient(125deg, #ffffff20, transparent 40%, #14233108 90%);
}
.postcard-stamp {
  position: absolute; bottom: 5px; left: 11px; right: 11px; display: flex; align-items: center;
  justify-content: space-between; color: #564b3f; font: 600 5px/1.15 'Chakra Petch', sans-serif; letter-spacing: .15em;
}
.postcard-stamp > span { font-size: 15px; color: #9c795b; }
.next-caption { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 25px; }
.next-caption small { display: block; font: 600 .4375rem/1.6 'Chakra Petch', sans-serif; letter-spacing: .15em; color: #f9ecdbb3; }
.next-caption strong { display: block; margin-top: 3px; font: italic 400 1.45rem/1.5 'Playfair Display', Georgia, serif; }
.next-arrow { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #f1e4ce45; border-radius: 50%; transition: background .3s; }
.next-arrow .icon { width: 15px; height: 15px; }
.cinema-next:focus-visible { outline-offset: 14px; }
.home-entering .cinema-next { animation: home-lift 1s var(--home-ease) .6s both; }
.home-entering .cinema-rail { animation: home-lift .8s var(--home-ease) .75s both; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cinema-home:not(.is-motion-still) .cinema-next:hover .postcard-front { transform: translate3d(2px, -9px, 18px) rotateZ(0deg) rotateY(-2deg) rotateX(2deg); }
  .cinema-home:not(.is-motion-still) .cinema-next:hover .postcard-back { transform: translate3d(-28px, 1px, -25px) rotateZ(-12deg) rotateY(-8deg); }
  .cinema-home:not(.is-motion-still) .cinema-next:hover .postcard-far { transform: translate3d(22px, -10px, -58px) rotateZ(15deg) rotateY(-8deg); }
  .cinema-home:not(.is-motion-still) .cinema-rail button:hover .scene-window { transform: translateY(-7px) rotateX(-4deg); border-color: #fff0daaa; }
  .cinema-rail button:hover img { opacity: 1; }
  .cinema-next:hover .next-arrow { background: #fff0da12; }
}
@media (min-width: 1600px) {
  .cinema-copy { bottom: 260px; }
  .cinema-scene-meta { bottom: 220px; }
  .cinema-rail { bottom: 85px; }
  .cinema-next { bottom: 310px; }
}
@media (max-width: 1100px) {
  .cinema-copy { left: 40px; width: 59%; bottom: 210px; }
  .cinema-copy h1 { font-size: clamp(1.9rem, 3.4vw, 2.65rem); }
  .cinema-next { width: 210px; right: 45px; bottom: 248px; }
  .cinema-rail { left: 40px; right: 40px; gap: 13px; bottom: 73px; }
  .cinema-scene-meta { left: 40px; right: 40px; bottom: 191px; }
}
@media (max-width: 900px) and (min-aspect-ratio: 1/1) {
  .cinema-next { width: 185px; right: 40px; bottom: 233px; }
  .cinema-copy { width: 63%; bottom: 201px; }
  .cinema-description { font-size: .6875rem; }
  .cinema-rail { gap: 11px; }
}
@media (max-width: 900px) and (max-aspect-ratio: 1/1) {
  .cinema-next { display: none; }
  .cinema-copy { left: 35px; right: 35px; width: auto; bottom: 230px; align-items: center; text-align: center; }
  .cinema-copy h1 { font-size: clamp(2rem, 5.5vw, 3rem); }
  .cinema-rail { left: 25px; right: 25px; bottom: 83px; gap: 8px; }
  .cinema-scene-meta { left: 25px; right: 25px; bottom: 199px; }
  .scene-window { height: 58px; }
  .cinema-rail button { min-height: 82px; }
  .cinema-rail .scene-name { display: block; padding-right: 0; font-size: .5rem; text-align: center; margin-top: 10px; }
  .cinema-rail .scene-num { display: none; }
}
@media (max-width: 600px) {
  .cinema-copy { left: 22px; right: 22px; bottom: 202px; }
  .cinema-copy h1 { font-size: clamp(1.75rem, 7.1vw, 2.6rem); line-height: 1.24; }
  .cinema-kicker { font-size: .5rem; letter-spacing: .12em; margin-bottom: 14px; }
  .cinema-description { margin-top: 13px; font-size: .6875rem; width: min(100%, 340px); }
  .cinema-cta { margin-top: 18px; }
  .cinema-rail { left: 16px; right: 16px; bottom: 66px; gap: 6px; }
  .cinema-rail button { min-height: 73px; border: 0; }
  .scene-window { height: 48px; padding: 2px; }
  .cinema-rail .scene-name { font-size: .4375rem; letter-spacing: 0; margin-top: 8px; }
  .cinema-scene-meta { left: 16px; right: 16px; bottom: 161px; }
}
@media (max-width: 360px) {
  .cinema-copy { left: 15px; right: 15px; bottom: 190px; }
  .cinema-copy h1 { font-size: 1.75rem; }
  .cinema-rail { gap: 4px; }
  .scene-window { height: 40px; }
  .cinema-rail .scene-name { font-size: .4rem; }
  .cinema-scene-meta { bottom: 149px; }
}
@media (max-height: 680px) and (min-aspect-ratio: 1/1) {
  .cinema-next { width: 210px; bottom: 215px; }
  .cinema-copy { bottom: 199px; }
  .cinema-copy h1 { font-size: clamp(1.75rem, 3.2vw, 2.9rem); }
  .cinema-kicker { margin-bottom: 12px; }
  .cinema-description { margin-top: 10px; }
  .cinema-cta { margin-top: 15px; }
  .cinema-scene-meta { bottom: 177px; }
  .cinema-rail { bottom: 68px; }
  .cinema-rail button { min-height: 82px; }
  .scene-window { height: 56px; }
}
@media (max-height: 620px) and (max-aspect-ratio: 1/1) {
  .cinema-copy { bottom: 183px; }
  .cinema-kicker { display: none; }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .cinema-next { display: none; }
  .cinema-copy { left: 35px; right: 35px; width: auto; bottom: 167px; }
  .cinema-copy h1 { font-size: clamp(1.4rem, 3.3vw, 2rem); }
  .cinema-description, .cinema-kicker { display: none; }
  .cinema-rail { left: 35px; right: 35px; top: auto; bottom: 64px; width: auto; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cinema-rail button { min-height: 71px; }
  .scene-window { height: 42px; }
  .cinema-rail .scene-name { display: block; font-size: .5rem; }
  .cinema-scene-meta { display: none; }
  .cinema-cta { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-next, .scene-window { transition: none !important; }
}

/* The growing journey keeps comfortable windows and a visible next edge. */
.cinema-rail {
  --realm-gap: 18px;
  --realm-size: max(128px, calc((100% - 90px) / 6));
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--realm-gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 1px 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #f0d5bf66 transparent;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}
.cinema-rail button {
  flex: 0 0 var(--realm-size);
  scroll-snap-align: start;
  min-width: 0;
}
.cinema-rail button:focus-visible { outline-offset: -2px; }
.scene-window { position: relative; }
.is-new-scene .scene-window::after {
  content: 'Mới'; position: absolute; top: 5px; right: 5px;
  padding: 2px 5px; background: #f0d5bf; color: #382f32;
  font: 600 .4375rem/1.5 'Be Vietnam Pro', sans-serif; letter-spacing: .01em;
}
.cinema-new-scene {
  position: absolute; top: 88px; right: clamp(40px, 5vw, 90px); z-index: 2;
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  max-width: calc(100% - 60px); padding: 8px 13px;
  border: 1px solid #f0d5bf45; border-radius: 2px;
  background: #0b152880; color: #fff4e9; backdrop-filter: blur(14px);
  font: 500 .625rem/1.6 'Be Vietnam Pro', sans-serif; text-align: left;
}
.cinema-new-scene[hidden] { display: none !important; }
.cinema-new-scene:hover { border-color: #f0d5bf8c; background: #0b1528c2; }
.new-scene-badge { color: #f0d5bf; font-size: .5rem; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
#homeLatestLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) {
  .cinema-rail { --realm-gap: 13px; --realm-size: max(116px, calc((100% - 65px) / 6)); }
}
@media (max-width: 900px) {
  .cinema-rail { --realm-gap: 10px; --realm-size: 108px; }
  .cinema-new-scene { right: 25px; }
}
@media (max-width: 600px) {
  .cinema-rail { --realm-gap: 8px; --realm-size: 78px; padding-top: 9px; padding-bottom: 6px; }
  .cinema-rail .scene-name { font-size: .5rem; line-height: 1.6; }
  .scene-window { height: 48px; }
  .cinema-new-scene { top: 78px; right: 16px; max-width: calc(100% - 32px); min-height: 44px; padding: 7px 10px; gap: 8px; font-size: .5625rem; }
}
@media (max-width: 360px) {
  .cinema-rail { --realm-size: 76px; }
  .cinema-rail .scene-name { font-size: .5rem; }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .cinema-rail { --realm-size: 104px; }
  .cinema-new-scene { top: 66px; right: 35px; min-height: 40px; padding-block: 5px; }
}