/* Trang chiến dịch "chốn riêng của bạn": thanh trên, cảnh 1 phòng tối, chân trang. Cảnh 2–6 ở campaign-scenes.css.
   Luôn chế độ đêm (khung quán). Mọi giá trị lấy từ shared/tokens.css. */

.camp { background: var(--cr-ink); }

/* ---------- Thanh trên ---------- */
.camp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-top: max(var(--sp-2), env(safe-area-inset-top, 0px)); padding-bottom: var(--sp-2);
  transition: transform var(--d-ui) var(--ease-out);
}
/* Nền đặc đúng chiều cao thanh (kể cả tai thỏ), rồi tan dần 24px bên dưới: tiêu đề lớn cuộn qua không đè lên logo. */
.camp-nav::before {
  content: ""; position: absolute; inset: 0 0 -24px; pointer-events: none;
  background: linear-gradient(var(--cr-ink) calc(100% - 24px), rgb(15 14 12 / 0));
  opacity: 0; transition: opacity var(--d-ui) var(--ease-out);
}
.camp-nav.is-past::before { opacity: 1; }
.camp-nav.is-hidden { transform: translateY(-110%); }
.camp-nav__home {
  position: relative; display: inline-flex; flex: none; align-items: baseline; gap: .5em; min-height: 44px; padding-top: 12px; white-space: nowrap;
  font: 800 1.25rem/1 var(--font-display); letter-spacing: -.02em; color: var(--cr-paper);
}
.camp-nav__home small { font: 450 var(--fs-label)/1 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cr-muted); }
.camp-nav__cta {
  position: relative; flex: none; min-height: 44px; padding: .6em 1.15em; font-size: .9375rem; white-space: nowrap; text-align: center;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--d-ui) var(--ease-out), transform var(--d-ui) var(--ease-out), background-color var(--d-fast) ease;
}
.camp-nav.is-past .camp-nav__cta { opacity: 1; transform: none; pointer-events: auto; }
/* Mỗi màn một lời mời chính: nút cùng tên của cảnh đang trong khung nhìn thì nút trên thanh lùi đi. */
.camp-nav.is-past.has-cta .camp-nav__cta { opacity: 0; transform: translateY(-6px); pointer-events: none; }
/* Nhấn: lún nhanh như nút chung (140ms), không theo nhịp hiện/ẩn 240ms của nút. */
.camp-nav.is-past .camp-nav__cta:active { transform: scale(.97); transition-duration: var(--d-ui), var(--d-press), var(--d-fast); }
/* Giảm chuyển động: thanh trên và nút của nó chỉ mờ đi/hiện lên, không trượt. */
@media (prefers-reduced-motion: reduce) {
  .camp-nav__cta, .camp-nav.is-past.has-cta .camp-nav__cta { transform: none; }
  .camp-nav { transition: opacity 200ms ease, visibility 0s; }
  .camp-nav.is-hidden { transform: none; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
}
[data-motion="reduce"] .camp-nav__cta, [data-motion="reduce"] .camp-nav.is-past.has-cta .camp-nav__cta { transform: none; }
[data-motion="reduce"] .camp-nav { transition: opacity 200ms ease, visibility 0s; }
[data-motion="reduce"] .camp-nav.is-hidden { transform: none; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
/* Logo và nút luôn một dòng. Nút lúc ẩn (trong suốt) vẫn giữ chỗ, nên dưới 375px bỏ chữ "Đà Nẵng" cho đủ chỗ cả hai (375px còn cách nút 19px). */
@media (max-width: 374px) { .camp-nav__home small { display: none; } }
/* Phía phải thanh: nút "Dựng góc" và link về trang chính "chốn riêng của bạn". Dưới 560px không đủ chỗ cho logo, nút và
   link trên một dòng, nên nút và link chung một ô: nút hiện thì link lùi đi; nút ẩn (đầu trang, hoặc nút của cảnh đang
   trên màn) thì link hiện. Từ 560px link đứng sau nút, sát mép phải. Link chỉ mờ đi/hiện lên nên giảm chuyển động giữ nguyên. */
.camp-nav__end { position: relative; flex: none; display: grid; align-items: center; justify-items: end; }
.camp-nav__end > a { grid-area: 1 / 1; }
.camp-nav__main {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--sp-1); white-space: nowrap;
  font: 450 var(--fs-label)/1.3 var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cr-paper);
  transition: opacity var(--d-ui) var(--ease-out), color var(--d-fast) ease;
}
@media (hover: hover) and (pointer: fine) { .camp-nav__main:hover { color: var(--cr-lamp); } }
@media (max-width: 559px) { .camp-nav.is-past:not(.has-cta) .camp-nav__main { opacity: 0; pointer-events: none; } }
@media (min-width: 560px) { .camp-nav__end { display: flex; gap: var(--sp-4); } }

/* ---------- Cảnh 1: phòng tối ----------
   .hero__room có đúng tỉ lệ của ảnh nên các mảnh đèn (phần trăm) khớp ảnh. Điện thoại: ảnh dọc cao đủ màn để căn
   phòng bao lấy khối chữ; hai bên bị cắt, tâm cắt lệch trái (41% bề ngang ảnh) để vẫn thấy ba đèn bàn, lồng đèn và
   các màn hình laptop. Máy tính: ảnh ngang phủ kín, dãy đèn ở 2/5 trên. */
.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: var(--cr-ink); touch-action: manipulation; } /* chạm nhanh hai lần vào đèn không phóng trang trên iPhone; vẫn cuộn và chụm hai ngón được */
.hero__room {
  --rh: max(100svh, 100vw * 4 / 3); --rw: calc(var(--rh) * 3 / 4);
  position: absolute; z-index: 0; left: min(0px, calc(50% - var(--rw) * .41)); top: 0; width: var(--rw); height: var(--rh);
}
@media (orientation: landscape) {
  .hero__room { --rw: max(100vw, 100svh * 4 / 3); --rh: calc(var(--rw) * .75); left: calc(50% - var(--rw) / 2); top: calc(38% - var(--rh) * .4); }
}
.hero__photo, .hero__ambient { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero__photo { filter: brightness(.3) saturate(.82); }   /* phòng tối: ảnh vẫn đọc được khi chưa có JS */
.hero__ambient { opacity: .32; pointer-events: none; }
.hero__lamps { position: absolute; inset: 0; pointer-events: none; }
.lamp {
  position: absolute; overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, #000 24%, rgb(0 0 0 / .62) 56%, transparent);
  mask-image: radial-gradient(closest-side, #000 24%, rgb(0 0 0 / .62) 56%, transparent);
}
.lamp > img { position: absolute; max-width: none; height: auto; filter: brightness(1.14) saturate(1.06); }
.lamp--s > img { filter: brightness(1.06); }
.lamp__core {
  position: absolute; left: 50%; top: 29%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgb(255 244 220 / .9), rgb(242 193 78 / .32) 40%, rgb(242 193 78 / 0) 70%);
  mix-blend-mode: screen;
}
.lamp--l .lamp__core { top: 50%; width: 46%; background: radial-gradient(circle, rgb(255 244 220 / .55), rgb(242 193 78 / .16) 45%, rgb(242 193 78 / 0) 70%); }
.lamp--s .lamp__core { top: 50%; width: 50%; background: radial-gradient(circle, rgb(184 219 255 / .32), rgb(184 219 255 / 0) 70%); }
.hero__pool { display: none; left: 22%; top: 12%; right: auto; bottom: auto; width: 56%; height: 56%; mix-blend-mode: screen; opacity: .8; }
@media (hover: hover) and (pointer: fine) { .hero__pool { display: block; } }
/* Bản WebGL (hero-webgl-room.js): khung vẽ nằm trên ảnh, dưới lớp tối dần của sàn; hiện dần khi phòng còn tối hẳn.
   Đèn CSS, ánh chung và quầng theo chuột chỉ dùng cho bản dự phòng nên ẩn đi. */
.lamp-room__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity var(--d-reveal) var(--ease-out);
}
.hero.is-gl .lamp-room__canvas { opacity: 1; }
.hero.is-gl .hero__lamps, .hero.is-gl .hero__ambient, .hero.is-gl .hero__pool { display: none; }
.hero__room.is-lamp-hover { cursor: pointer; }
.hero__fade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Điện thoại: phòng phủ cả màn, khối chữ nằm trên phần dưới đã tối dần (vẫn thấy người ngồi phía sau chữ). */
  background: linear-gradient(rgb(15 14 12 / .6), rgb(15 14 12 / 0) 16%, rgb(15 14 12 / 0) 38%, rgb(15 14 12 / .62) 54%, rgb(15 14 12 / .84) 74%, var(--cr-ink) 99%);
}
@media (orientation: landscape) {
  .hero__fade {
    background:
      linear-gradient(rgb(15 14 12 / .55), rgb(15 14 12 / 0) 18%, rgb(15 14 12 / 0) 46%, rgb(15 14 12 / .9) 88%, var(--cr-ink)),
      linear-gradient(90deg, rgb(15 14 12 / .5), rgb(15 14 12 / 0) 55%);
  }
}

.hero__copy {
  position: relative; z-index: 2; min-height: 100svh; max-width: var(--max); margin-inline: auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 96px; padding-bottom: max(var(--sp-7), calc(env(safe-area-inset-bottom, 0px) + var(--sp-6)));
  pointer-events: none;
}
.hero__copy a { pointer-events: auto; }
.hero__label { color: var(--cr-muted); margin-bottom: var(--sp-1); }
.hero__title { color: var(--cr-paper); margin-bottom: var(--sp-3); font-size: min(var(--fs-hero), 17vw); } /* chữ hệ thống đặt rất to: "chốn riêng" vẫn vừa một dòng */
.hero__title [data-word] { display: block; white-space: nowrap; }
.hero__title [data-word="ban"] { color: var(--cr-lamp); }
.camp-wait .hero__title [data-word] { color: var(--cr-dim); }
.hero__whisper { color: var(--cr-warm); max-width: 24ch; margin-bottom: var(--sp-6); }
.hero__act { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--sp-3); }
.hero__cta { min-height: 56px; max-width: 100%; padding: 1em 1.9em; font-size: 1.0625rem; white-space: normal; text-align: center; }
.hero__note { color: var(--cr-muted); }
.camp-wait .hero__label, .camp-wait .hero__whisper, .camp-wait .hero__act { opacity: 0; }
@media (orientation: landscape) and (min-width: 768px) {
  .hero__title { font-size: clamp(3.5rem, 7.4vw, 7.25rem); }
  .hero__title [data-word] { display: inline; }
  .hero__whisper { margin-bottom: var(--sp-5); }
  .hero__act { grid-template-columns: none; grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--sp-5); }
}
/* Điện thoại xoay ngang: màn thấp, chữ nhỏ lại cho vừa. */
@media (orientation: landscape) and (max-height: 520px) {
  .hero__title { font-size: min(var(--fs-1), 15svh); }
  .hero__copy { padding-top: 64px; padding-bottom: var(--sp-5); }
  .hero__whisper { margin-bottom: var(--sp-3); }
}

/* ---------- Chân trang ---------- */
.camp-foot { padding-block: var(--sp-9) var(--sp-7); border-top: 1px solid var(--cr-line); }
.camp-foot__inner { display: grid; justify-items: start; gap: var(--sp-4); }
.camp-foot__line { margin-bottom: var(--sp-3); }
.camp-foot__home {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--cr-paper);
  text-decoration: underline; text-decoration-color: var(--cr-line-strong); text-underline-offset: 5px;
}
.camp-foot__motion { display: inline-flex; align-items: center; gap: var(--sp-4); min-height: 48px; padding-left: 8px; cursor: pointer; color: var(--cr-paper); }
.camp-foot__credit { max-width: 62ch; }
@media (hover: hover) and (pointer: fine) { .camp-foot__home:hover { text-decoration-color: var(--cr-paper); } }