/* Almas Ara · Rev7 · footer language preview (assets/js/lang-fx.js).
   A fixed layer above the page; it never takes pointer events or focus. The frame inside has the
   window's size so the previewed page is laid out exactly as it would be; the layer shows half. */
.lp { position: fixed; inset: 0; z-index: 150; pointer-events: none; visibility: hidden; transition: visibility 0s 320ms; contain: strict; }
.lp.lp-open { visibility: visible; transition: none; }
.lp-pane { position: absolute; inset: 0; overflow: hidden; background:
  radial-gradient(60% 50% at 50% 60%, rgb(207 174 116 / .07), transparent 70%), #0b0d12;
  clip-path: inset(0 100% 0 0); transition: clip-path 320ms cubic-bezier(.22, .8, .24, 1); }
.lp[data-side="right"] .lp-pane { clip-path: inset(0 0 0 100%); }
.lp.lp-open .lp-pane { clip-path: inset(0 50% 0 0); }
.lp.lp-open[data-side="right"] .lp-pane { clip-path: inset(0 0 0 50%); }
.lp-frame { position: absolute; inset-block-start: 0; left: 0; inline-size: var(--lp-w, 100vw); block-size: var(--lp-h, 100vh); border: 0; display: none; opacity: 0; transition: opacity 180ms ease-out; background: #0b0d12; }
.lp-frame.on { display: block; }
.lp.lp-ready .lp-frame.on { opacity: 1; }
/* the split line: a thin champagne edge with a soft shadow on the preview side */
.lp-seam { position: absolute; inset-block: 0; left: 50%; inline-size: 1px; margin-left: -.5px; opacity: 0; transition: opacity 200ms 120ms;
  background: linear-gradient(to bottom, transparent, rgb(227 201 147 / .9) 18%, rgb(227 201 147 / .9) 82%, transparent); }
.lp[data-side="left"] .lp-seam { box-shadow: -18px 0 36px rgb(0 0 0 / .45); }
.lp[data-side="right"] .lp-seam { box-shadow: 18px 0 36px rgb(0 0 0 / .45); }
.lp.lp-open .lp-seam { opacity: 1; }
/* label beside the split line, inside the preview half */
.lp-tag { position: absolute; inset-block-start: 92px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgb(11 13 18 / .9); box-shadow: 0 0 0 1px rgb(227 201 147 / .45), 0 8px 24px rgb(0 0 0 / .3); color: #f3f4f6; font: 600 .82rem/1.4 "Vazirmatn", "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity 200ms 160ms, transform 200ms 160ms; }
.lp-tag span { color: #e3c993; font-weight: 500; }
.lp[data-side="left"] .lp-tag { right: calc(50% + 16px); }
.lp[data-side="right"] .lp-tag { left: calc(50% + 16px); }
.lp.lp-open .lp-tag { opacity: 1; transform: none; }
/* while the preview is open the language row stays on top and readable (no layout change) */
.lp-row-on .langs { position: relative; z-index: 151; }
.lp-row-on .langs::after { content: ""; position: absolute; z-index: -1; inset: -13px -24px; border-radius: 999px; background: rgb(7 8 11 / .97); box-shadow: 0 0 0 1px rgb(227 201 147 / .35), 0 10px 30px rgb(0 0 0 / .35); pointer-events: none; }
.lp-row-on .langs a:focus-visible { color: #f3f4f6; }
@media (hover: hover) { .lp-row-on .langs a:hover { color: #f3f4f6; } }
/* reduced motion and instant closing (click, Escape, scroll-away): no animation */
.lp.lp-instant, .lp.lp-instant * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .lp, .lp * { transition: none !important; } }
@media (hover: none), (max-width: 899px) { .lp { display: none; } }