/* Language toggle, sheet and switch transition. Shared by every page.
   Relies on the brand tokens (--ink, --rose-*, --line, --ease); falls back if a page lacks them. */
:root {
  --l-ink: var(--ink, #141214);
  --l-ink-2: var(--ink-2, #1c191c);
  --l-rose: var(--rose-2, #e8b9a0);
  --l-rose-deep: var(--rose-3, #b8775a);
  --l-line: var(--line, rgb(232 185 160 / .16));
  --l-text: var(--text, #efe7e2);
  --l-ease: var(--ease, cubic-bezier(.22, 1, .36, 1));
}

/* Script-specific type: keep the brand feel, use fonts that carry the glyphs */
:lang(ar) { --serif: "Noto Kufi Arabic", "Tajawal", serif; --sans: "Tajawal", system-ui, sans-serif; }
:lang(ko) { --serif: "Noto Serif KR", "Bodoni Moda", serif; --sans: "Noto Sans KR", "Jost", system-ui, sans-serif; }
html:lang(ar) body, html:lang(ko) body { word-break: keep-all; }
html:lang(ar) body { letter-spacing: 0 !important; }
html:lang(ar) :is(h1, h2, h3, .h2, .h3, .tab, .btn) { letter-spacing: 0 !important; }
html:lang(ko) :is(h1, h2, h3, .h2, .h3) { letter-spacing: -.01em; word-break: keep-all; }
.i18n-loading body { opacity: 0; }
body { transition: opacity .25s; }

/* ---------- button ---------- */
[data-lang-toggle] { display: inline-flex; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; min-width: 44px; padding: 0 .75rem;
  border-radius: 999px;
  border: 1px solid var(--l-line);
  background: rgb(255 255 255 / .03);
  color: var(--l-text);
  font: 500 .85rem/1 var(--sans, system-ui);
  letter-spacing: .06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--l-ease), border-color .3s, background-color .3s;
}
.lang-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--l-rose); stroke-width: 1.4; transition: transform .8s var(--l-ease); }
.lang-btn:active { transform: scale(.92); }
.lang-btn:focus-visible { outline: 2px solid var(--l-rose); outline-offset: 3px; }
.lang-btn:hover svg, .lang-open .lang-btn svg { transform: rotate(180deg); }
@media (hover: hover) { .lang-btn:hover { border-color: rgb(232 185 160 / .45); background: rgb(232 185 160 / .08); } }

/* ---------- sheet: bottom sheet on phones, popover card on wide screens ---------- */
.lang-sheet { position: fixed; inset: 0; z-index: 300; }
.lang-sheet__scrim {
  position: absolute; inset: 0;
  background: rgb(10 9 10 / .6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .4s var(--l-ease);
}
.lang-sheet__panel {
  position: absolute; inset-inline: 0; bottom: 0;
  max-height: 85vh; overflow: auto;
  padding: .6rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #221d20, var(--l-ink-2));
  border-top: 1px solid rgb(232 185 160 / .28);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -30px 60px -20px rgb(0 0 0 / .6);
  transform: translateY(105%);
  transition: transform .45s var(--l-ease);
  touch-action: pan-y;
}
.lang-sheet.is-open .lang-sheet__scrim { opacity: 1; }
.lang-sheet.is-open .lang-sheet__panel { transform: none; }
.lang-sheet__grip { display: block; width: 44px; height: 4px; margin: .2rem auto .9rem; border-radius: 4px; background: rgb(232 185 160 / .35); }
.lang-sheet__title {
  margin: 0 .25rem .75rem;
  font: 500 .75rem/1 var(--sans, system-ui);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--l-rose);
}
.lang-sheet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lang-sheet__list li { opacity: 0; transform: translateY(14px); transition: opacity .4s var(--l-ease), transform .5s var(--l-ease); transition-delay: calc(var(--i) * 45ms + 80ms); }
.lang-sheet.is-open .lang-sheet__list li { opacity: 1; transform: none; }
.lang-sheet__list button {
  position: relative; overflow: hidden;
  width: 100%; min-height: 60px;
  display: grid; grid-template-columns: 44px 1fr auto 24px; align-items: center; gap: .75rem;
  padding: .5rem .9rem;
  border-radius: 16px;
  border: 1px solid var(--l-line);
  background: rgb(255 255 255 / .02);
  color: var(--l-text);
  font: 400 1.05rem/1.2 var(--sans, system-ui);
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--l-ease), border-color .3s, background-color .3s;
}
.lang-sheet__list button:active { transform: scale(.97); background: rgb(232 185 160 / .1); }
.lang-sheet__list button:focus-visible { outline: 2px solid var(--l-rose); outline-offset: 2px; }
.lang-opt__short {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgb(232 185 160 / .3);
  color: var(--l-rose); font-size: .85rem; font-weight: 600; letter-spacing: .04em;
}
.lang-opt__hello { font-size: .8rem; color: rgb(239 231 226 / .5); }
.lang-opt__check { width: 22px; height: 22px; fill: none; stroke: var(--l-rose); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s var(--l-ease) .1s; }
.lang-sheet__list button[aria-current="true"] { border-color: rgb(232 185 160 / .55); background: rgb(232 185 160 / .08); }
.lang-sheet__list button[aria-current="true"] .lang-opt__short { background: linear-gradient(135deg, #f6d8c6, #b8775a); color: #1a1416; border-color: transparent; }
.lang-sheet__list button[aria-current="true"] .lang-opt__check { stroke-dashoffset: 0; }
@media (hover: hover) { .lang-sheet__list button:hover { border-color: rgb(232 185 160 / .4); } }

@media (min-width: 700px) {
  .lang-sheet__panel {
    inset: auto; top: 76px; inset-inline-end: max(1rem, calc((100vw - 1240px) / 2));
    width: 360px; max-height: calc(100vh - 100px);
    padding: 1rem;
    border: 1px solid rgb(232 185 160 / .28);
    border-radius: 20px;
    transform: translateY(-10px) scale(.97); opacity: 0;
    transform-origin: top right;
    transition: transform .35s var(--l-ease), opacity .3s;
  }
  [dir="rtl"] .lang-sheet__panel { transform-origin: top left; }
  .lang-sheet.is-open .lang-sheet__panel { opacity: 1; }
  .lang-sheet__grip { display: none; }
  .lang-sheet__scrim { background: rgb(10 9 10 / .35); }
}

/* ---------- switch transition: rose-gold circle grows from the tap, greets, recedes ---------- */
.lang-veil {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: radial-gradient(circle at var(--x) var(--y), #2a2125, var(--l-ink) 70%);
  clip-path: circle(0 at var(--x) var(--y));
  animation: veilIn .55s var(--l-ease) forwards;
  pointer-events: none;
}
.lang-veil::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--x) var(--y), rgb(232 185 160 / .22), transparent 45%);
}
.lang-veil__word {
  position: relative;
  font: 400 clamp(2.2rem, 9vw, 4.5rem)/1.1 var(--serif, serif);
  background: linear-gradient(100deg, #f6d8c6, #e8b9a0 40%, #b8775a 70%, #f6d8c6);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(12px);
  animation: veilWord .9s .15s var(--l-ease) forwards, veilShine 1.4s .2s linear forwards;
}
.lang-veil.is-out { animation: veilOut .6s var(--l-ease) forwards; }
@keyframes veilIn { to { clip-path: circle(150vmax at var(--x) var(--y)); } }
@keyframes veilOut { from { clip-path: circle(150vmax at var(--x) var(--y)); opacity: 1; } to { clip-path: circle(150vmax at var(--x) var(--y)); opacity: 0; } }
@keyframes veilWord { to { opacity: 1; transform: none; } }
@keyframes veilShine { from { background-position: 100% 0; } to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .lang-sheet__panel, .lang-sheet__scrim, .lang-sheet__list li { transition: none; }
  .lang-veil { display: none; }
}