/* Logo XIXI xuất hiện lặp lại nhẹ nhàng khắp trang để khách nhớ thương hiệu:
   màn chào, thanh menu, đầu mỗi mục, hình chìm xoay theo cuộn, khung ảnh đang tải,
   popup, nút nhắn shop, chân trang. */

/* Màn chào (1 lần mỗi phiên) */
.intro { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; background: var(--greige); transition: opacity .8s ease, visibility .8s; }
.intro img { width: min(220px, 50vw); height: auto; animation: introMark 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.intro p { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: .3em; color: var(--ink); animation: introText .9s .45s ease both; }
.intro p span { font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--rose); }
.intro.out { opacity: 0; visibility: hidden; }
@keyframes introMark { from { opacity: 0; transform: scale(.82) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes introText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Thanh menu: logo cạnh chữ, xoay 90 độ khi di chuột (logo đối xứng nên xoay xong vẫn y hệt) */
.logo { display: inline-flex; align-items: center; gap: .6rem; }
.logo-mark { width: 34px; height: 34px; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.logo:hover .logo-mark, .logo:focus-visible .logo-mark { transform: rotate(90deg); }

/* Logo nhỏ trước dòng tiêu đề nhỏ của mỗi mục */
.eyebrow::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: .55rem; vertical-align: -2px; background: url("../assets/brand/logo-ink.png") center / contain no-repeat; opacity: .8; }

/* Hình chìm lớn, xoay chậm theo cuộn trang */
.collection, .order { position: relative; overflow: hidden; }
.collection > :not(.watermark), .order > :not(.watermark) { position: relative; z-index: 1; }
.watermark { position: absolute; z-index: 0; top: 50%; left: 50%; width: min(620px, 95vw); height: auto; opacity: .07; pointer-events: none; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); will-change: transform; }
.order .watermark { left: auto; right: -160px; width: min(520px, 80vw); transform: translateY(-50%) rotate(var(--rot, 0deg)); }

/* Khung ảnh đang tải: logo kem chìm trên nền greige, giống logo dập nổi gốc */
.card-media, .moment { background: #b8b1a0 url("../assets/brand/logo-cream.png") center / 34% no-repeat; }

/* Popup */
.modal-info { position: relative; }
.modal-mark { position: absolute; right: 1.5rem; bottom: 1.5rem; width: 110px; height: auto; opacity: .08; pointer-events: none; }

/* Nút nhắn shop nổi */
.float-ig { display: inline-flex; align-items: center; gap: .5rem; }
.float-ig img { width: 20px; height: 20px; }

/* Chân trang */
.footer-brand { display: inline-flex; align-items: center; gap: .9rem; }
.footer-brand img { width: 64px; height: 64px; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.footer-brand:hover img { transform: rotate(90deg); }

@media (max-width: 720px) {
  .logo-mark { width: 28px; height: 28px; }
  .order .watermark { right: -120px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .logo-mark, .footer-brand img { transition: none; }
}