/* Nền tảng dùng chung cho cả 3 concept.
   Chỉ chứa reset + tiện ích ảnh placeholder. Mọi thứ thuộc về "gu" nằm trong từng file concept. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---- Ô ảnh placeholder ----
   Đứng đúng tỷ lệ khung hình thật để đánh giá bố cục khi chưa có ảnh.
   Nhãn bên trong chính là yêu cầu gửi cho thợ chụp. */
.ph {
  position: relative;
  overflow: hidden;
  background: var(--ph-bg, linear-gradient(140deg, #d8d0c4, #b9ada0 55%, #cec5b8));
  display: grid;
  place-items: center;
}
.ph::after {
  /* vân nhiễu nhẹ để khối placeholder không bị phẳng như lỗi tải ảnh */
  content: "";
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}
.ph-label {
  position: relative;
  z-index: 1;
  padding: .7em 1em;
  max-width: 84%;
  text-align: center;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: clamp(9px, 1.05vw, 11px);
  line-height: 1.7;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ph-ink, #3a332b);
  border: 1px solid currentColor;
  opacity: .72;
}

/* Tỷ lệ khung hình — đặt tên theo cách thợ ảnh hay gọi */
.r-2x3   { aspect-ratio: 2 / 3; }   /* dọc, chân dung toàn thân */
.r-3x4   { aspect-ratio: 3 / 4; }   /* dọc, bán thân */
.r-1x1   { aspect-ratio: 1 / 1; }   /* vuông */
.r-3x2   { aspect-ratio: 3 / 2; }   /* ngang tiêu chuẩn */
.r-16x9  { aspect-ratio: 16 / 9; }  /* ngang rộng */

/* ---- Motion vào-màn-hình ---- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .10s; }
.rv-d2 { transition-delay: .20s; }
.rv-d3 { transition-delay: .30s; }
.rv-d4 { transition-delay: .40s; }

/* Ảnh lộ dần bằng mặt nạ, mượt hơn fade thường */
.mask { clip-path: inset(0 0 100% 0); transition: clip-path 1.25s cubic-bezier(.65,0,.35,1); }
.mask.in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .mask { transition: none; opacity: 1; transform: none; clip-path: none; }
}

/* ---- Thanh điều hướng giữa các concept (chỉ dùng khi xem thử) ---- */
.switcher {
  position: fixed; z-index: 999; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; gap: 2px; padding: 4px;
  background: rgba(20,18,16,.82); backdrop-filter: blur(12px);
  border-radius: 999px; font-family: ui-monospace, Consolas, monospace; font-size: 11px;
}
.switcher a {
  padding: 7px 14px; border-radius: 999px; text-decoration: none;
  color: rgba(255,255,255,.62); letter-spacing: .08em; transition: .25s;
}
.switcher a:hover { color: #fff; }
.switcher a[aria-current] { background: rgba(255,255,255,.14); color: #fff; }