/* ───────────── Rolling text (Produx-style hover) ───────────── */
.roll { display: inline-block; position: relative; overflow: hidden; vertical-align: top; line-height: inherit; height: 1.18em; }
.roll__t { display: block; white-space: nowrap; transition: transform .6s var(--ease-io); }
.roll__t--2 { position: absolute; left: 0; top: 100%; }
.roll__c { display: inline-block; transition: transform .6s var(--ease-io); transition-delay: calc(var(--i, 0) * 16ms); white-space: pre; }
[data-rollhost]:hover .roll__t, [data-rollhost]:focus-visible .roll__t { transform: translateY(-100%); }
[data-rollhost]:hover .roll__c, [data-rollhost]:focus-visible .roll__c { transform: translateY(-100%); }
.roll--letters .roll__t { transition: none; }
[data-rollhost]:hover .roll--letters .roll__t, [data-rollhost]:focus-visible .roll--letters .roll__t { transform: none; }
@media (prefers-reduced-motion: reduce) { .roll__t, .roll__c { transition: none !important; } }

/* ───────────── Buttons & pills ───────────── */
.btn {
  --bg: var(--gold-300); --fg: var(--ink-900); --bd: var(--gold-300);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 54px; padding: 0 12px 0 26px; border-radius: 999px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--fg); color: var(--bg); transition: transform .5s var(--ease), background .35s, color .35s; }
.btn__ic svg { width: 14px; height: 14px; }
.btn:hover .btn__ic { transform: rotate(45deg); }
.btn:hover { --bg: var(--white); --bd: var(--white); }
.btn--ghost { --bg: transparent; --fg: var(--white); --bd: rgba(255, 255, 255, .28); }
.btn--ghost .btn__ic { background: var(--gold-300); color: var(--ink-900); }
.btn--ghost:hover { --bg: var(--gold-300); --fg: var(--ink-900); --bd: var(--gold-300); }
.btn--ghost:hover .btn__ic { background: var(--ink-900); color: var(--gold-300); }
.btn--dark { --bg: var(--ink-900); --fg: var(--cream); --bd: var(--ink-900); }
.btn--dark .btn__ic { background: var(--gold-300); color: var(--ink-900); }
.btn--dark:hover { --bg: var(--gold-500); --fg: var(--ink-900); --bd: var(--gold-500); }
.btn--line { --bg: transparent; --fg: var(--ink-900); --bd: rgba(36, 34, 31, .45); }
.btn--line .btn__ic { background: var(--ink-900); color: var(--cream); }
.btn--line:hover { --bg: var(--ink-900); --fg: var(--cream); --bd: var(--ink-900); }
.btn--line:hover .btn__ic { background: var(--gold-300); color: var(--ink-900); }
.btn--sm { height: 44px; padding: 0 8px 0 20px; font-size: 11.5px; }
.btn--sm .btn__ic { width: 28px; height: 28px; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border-radius: 999px;
  background: rgba(36, 34, 31, .55); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .13); color: var(--white);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pill:hover, .pill.is-active { background: var(--gold-300); color: var(--ink-900); border-color: var(--gold-300); }
.pill--gold { background: var(--gold-300); color: var(--ink-900); border-color: var(--gold-300); }
.pill--gold:hover { background: var(--white); border-color: var(--white); }

/* ───────────── Loader (Cipher-style percentage) ───────────── */
.loader { position: fixed; inset: 0; z-index: 2000; background: var(--ink-900); display: grid; place-items: center; color: var(--cream); }
.loader__icon { position: relative; width: clamp(92px, 12vw, 150px); aspect-ratio: 1; }
.loader__icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.loader__ghost { opacity: .16; filter: grayscale(1) brightness(1.4); }
.loader__fill { clip-path: inset(calc(100% - var(--p, 0%)) 0 0 0); }
.loader__count { position: absolute; right: var(--gutter); bottom: calc(var(--gutter) * .7); font-family: var(--f-wide); font-weight: 300; font-size: clamp(3.4rem, 11vw, 10rem); line-height: .9; color: var(--gold-300); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.loader__count sup { font-size: .32em; vertical-align: top; margin-inline-start: .1em; opacity: .7; letter-spacing: 0; }
.loader__label { position: absolute; left: var(--gutter); bottom: calc(var(--gutter) * .7 + 8px); color: var(--stone); }
.loader__brand { position: absolute; left: var(--gutter); top: 22px; color: var(--stone); }
.loader__brand b { color: var(--gold-300); font-weight: 500; }

/* ───────────── Header ───────────── */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 900; padding: 14px var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; pointer-events: none; transition: transform .6s var(--ease); }
.hdr > * { pointer-events: auto; }
.hdr.is-hidden { transform: translateY(-110%); }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px 0 8px; border-radius: 999px; background: rgba(36, 34, 31, .55); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .13); }
.brand img { width: 24px; height: 24px; object-fit: contain; }
.brand span { font-family: var(--f-wide); font-weight: 500; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--white); white-space: nowrap; }
.nav { display: flex; gap: 8px; }
.hdr__right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.lang { display: inline-flex; padding: 3px; height: 38px; border-radius: 999px; gap: 2px; background: rgba(36, 34, 31, .55); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255, 255, 255, .13); }
.lang button { min-width: 38px; padding: 0 10px; white-space: nowrap; border-radius: 999px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .05em; color: var(--stone); transition: background .3s, color .3s; }
.lang button:hover { color: var(--white); }
.lang button[aria-pressed="true"] { background: var(--gold-300); color: var(--ink-900); }
.menu-btn { display: none; }

@media (max-width: 1240px) {
  .hdr { grid-template-columns: 1fr auto; }
  .nav, .hdr__right .lang, .hdr__right .pill--quote { display: none; }
  .menu-btn { display: inline-flex; }
}
.menu-btn { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.menu-btn b { font-weight: 400; color: var(--gold-300); }

/* Menu overlay */
.menu { position: fixed; inset: 0; z-index: 890; background: var(--ink-900); display: flex; flex-direction: column; justify-content: space-between; padding: 96px var(--gutter) 28px; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .8s var(--ease-io), visibility 0s .8s; overflow-y: auto; }
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .8s var(--ease-io), visibility 0s; }
.menu__links { display: grid; gap: 4px; }
.menu__links a { font-family: var(--f-cond); font-weight: 500; text-transform: uppercase; font-size: clamp(2.8rem, 13vw, 6.4rem); line-height: 1.02; color: var(--white); display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--ink-600); padding: 6px 0; }
.menu__links a small { font-family: var(--f-mono); font-size: 12px; color: var(--gold-300); letter-spacing: .08em; }
html[lang^="zh"] .menu__links a { text-transform: none; font-size: clamp(2.2rem, 10vw, 4.6rem); }
.menu__foot { display: grid; gap: 18px; margin-top: 28px; }
.menu__foot .lang { justify-self: start; height: 44px; }
.menu__foot .lang button { min-width: 48px; font-size: 12.5px; }

/* ───────────── Floating WhatsApp tab (White Desert side-tab) ───────────── */
.watab { position: fixed; right: 0; top: 50%; z-index: 850; transform: translate(110%, -50%); writing-mode: vertical-rl; text-orientation: mixed; padding: 20px 11px; background: var(--gold-300); color: var(--ink-900); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; border-radius: 10px 0 0 10px; transition: transform .7s var(--ease), background .3s; display: flex; align-items: center; gap: 10px; }
.watab.is-in { transform: translate(0, -50%); }
.watab:hover { background: var(--white); }
.watab svg { width: 14px; height: 14px; }
.watab__ar { transform: rotate(90deg); }
.watab__ic { display: none; }
@media (max-width: 860px) {
  .watab { writing-mode: horizontal-tb; top: auto; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; padding: 0; border-radius: 50%; justify-content: center; transform: translateY(170%); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6); }
  .watab.is-in { transform: none; }
  .watab span, .watab__ar { display: none; }
  .watab__ic { display: block; width: 24px; height: 24px; }
}

/* ───────────── Fog (White Desert section transitions) ───────────── */
.fog { position: absolute; left: 0; width: 100%; height: clamp(180px, 24vw, 380px); pointer-events: none; z-index: 3; overflow-x: clip; overflow-y: visible; }
.fog i { position: absolute; border-radius: 50%; filter: blur(clamp(26px, 4vw, 64px)); background: var(--fog, var(--cream)); animation: fogdrift var(--t, 22s) ease-in-out infinite alternate; }
.fog--top { top: calc(clamp(180px, 24vw, 380px) * -.58); --fog: var(--cream); }
.fog--bottom { bottom: calc(clamp(180px, 24vw, 380px) * -.58); --fog: var(--cream); }
.fog--dark { --fog: var(--ink-900); }
.fog i:nth-child(1) { left: -2%; top: 38%; width: 38%; height: 62%; --t: 24s; }
.fog i:nth-child(2) { left: 26%; top: 22%; width: 34%; height: 72%; --t: 19s; animation-delay: -6s; }
.fog i:nth-child(3) { left: 52%; top: 40%; width: 36%; height: 58%; --t: 27s; animation-delay: -11s; }
.fog i:nth-child(4) { left: 70%; top: 26%; width: 34%; height: 70%; --t: 21s; animation-delay: -3s; }
.fog i:nth-child(5) { left: 12%; top: 58%; width: 80%; height: 42%; --t: 30s; animation-delay: -9s; }
@keyframes fogdrift { from { transform: translate3d(-3%, 0, 0) scale(1); } to { transform: translate3d(4%, -4%, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .fog i { animation: none; } }

/* ───────────── Lightbox ───────────── */
.lb { position: fixed; inset: 0; z-index: 1500; background: rgba(28, 26, 23, .96); display: grid; grid-template-rows: auto 1fr auto; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
.lb__bar { display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gutter); color: var(--stone); }
.lb__stage { position: relative; display: grid; place-items: center; padding: 0 clamp(52px, 8vw, 120px); min-height: 0; }
.lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px -30px #000; transition: opacity .35s; }
.lb__img.is-loading { opacity: .25; }
.lb__cap { padding: 18px var(--gutter) 26px; text-align: center; color: var(--cream); font-size: 1rem; }
.lb__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); display: grid; place-items: center; color: var(--white); transition: background .3s, color .3s; }
.lb__btn:hover { background: var(--gold-300); color: var(--ink-900); border-color: var(--gold-300); }
.lb__btn svg { width: 18px; height: 18px; }
.lb__btn--prev { left: clamp(8px, 2vw, 28px); }
.lb__btn--next { right: clamp(8px, 2vw, 28px); }
@media (max-width: 700px) { .lb__stage { padding: 0 8px; } .lb__btn { top: auto; bottom: 8px; transform: none; } .lb__btn--prev { left: 14px; } .lb__btn--next { right: 14px; } }