/* تأثير التبديل بين العربية والإنجليزية: دائرة تتّسع من العلم + بطاقة اللغة + دخول الصفحة الجديدة بحركة (مع احترام «تقليل الحركة») */
.sound-btn { border: 0; background: transparent; padding: 3px 6px; line-height: 0; color: #475569; border-radius: 99px; cursor: pointer; font-size: 14px; }
.sound-btn:hover, .sound-btn:focus-visible { color: var(--brand, #1677ff); background: #fff; }
.sound-btn.off { opacity: .55; }

.lang-veil { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; color: #fff;
  background: radial-gradient(circle at var(--vx, 50%) var(--vy, 0), rgba(255, 255, 255, .22), transparent 55%), var(--brand, #1677ff);
  clip-path: circle(0 at var(--vx, 50%) var(--vy, 0)); transition: clip-path .55s cubic-bezier(.65, 0, .35, 1); font-family: inherit; }
.lang-veil.on { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 0)); }
.lang-veil__card { display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; }
.lang-veil.on .lang-veil__card { animation: langPop .5s .2s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.lang-veil__flag svg { width: 104px; height: 69px; border-radius: 9px; display: block; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.lang-veil__name { font-size: 30px; font-weight: 700; letter-spacing: .4px; text-shadow: 0 2px 10px rgba(0, 0, 0, .2); }

@keyframes langPop { 0% { opacity: 0; transform: scale(.55) rotate(-7deg); } 60% { opacity: 1; transform: scale(1.08) rotate(1.5deg); } 100% { opacity: 1; transform: none; } }
@keyframes flagPop { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-6deg); } 70% { transform: scale(.94) rotate(3deg); } 100% { transform: scale(1); } }
@keyframes flagNudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes contentOut { to { opacity: .15; transform: translateX(calc(var(--enter, 40px) * -1)) scale(.985); filter: blur(2px); } }
@keyframes contentIn { from { opacity: 0; transform: translateX(var(--enter, 40px)) scale(.985); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sideIn { from { opacity: .2; transform: translateX(calc(var(--enter, 40px) * 5)); } to { opacity: 1; transform: none; } }
@keyframes veilOut { from { clip-path: circle(150vmax at var(--lx, 50%) var(--ly, 0)); } to { clip-path: circle(0 at var(--lx, 50%) var(--ly, 0)); } }

@media (prefers-reduced-motion: no-preference) {
  .flag-btn.flag-pop svg, .lang-switch a.flag-pop svg { animation: flagPop .5s ease; }
  .flag-btn.flag-nudge, .lang-switch a.flag-nudge { animation: flagNudge .35s ease; }
  html.lang-leaving .content, html.lang-leaving .auth, html.lang-leaving .sec-center { animation: contentOut .45s ease-in forwards; }

  html[dir="rtl"] { --enter: 40px; }          /* العربي بيبدأ من اليمين */
  html[dir="ltr"] { --enter: -40px; }         /* والإنجليزي من الشمال */
  html.lang-arriving body::before { content: ""; position: fixed; inset: 0; z-index: 99999; pointer-events: none; background: var(--brand, #1677ff);
    clip-path: circle(150vmax at var(--lx, 50%) var(--ly, 0)); animation: veilOut .8s .05s cubic-bezier(.65, 0, .35, 1) forwards; }
  html.lang-arriving .content, html.lang-arriving .auth, html.lang-arriving .sec-center { animation: contentIn .75s .2s cubic-bezier(.2, .8, .2, 1) both; }
  html.lang-arriving .sidebar { animation: sideIn .7s .2s cubic-bezier(.2, .8, .2, 1) both; }
}
@media (prefers-reduced-motion: reduce) { .lang-veil { display: none; } }