.language-nav { position: relative; z-index: 4; }
.language-menu { position: absolute; top: calc(100% + 1px); left: -12px; z-index: 30; width: min(260px, calc(100vw - 24px)); border: 1px solid rgb(var(--theme-fg)); background: rgb(var(--theme-bg)); color: rgb(var(--theme-fg)); box-shadow: 8px 8px 0 rgb(161 255 203 / .8); transform-origin: top left; }
.language-menu[hidden] { display: none; }
.language-menu.is-open { animation: language-panel-in 380ms cubic-bezier(.23,1,.32,1) both; }
.language-menu.is-closing { animation: language-panel-out 210ms ease-in both; pointer-events: none; }
.language-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: rgb(var(--theme-fg)); color: rgb(var(--theme-bg)); }
.language-menu-head strong { font-size: 16px; font-weight: 500; letter-spacing: .01em; }
.language-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.language-option { position: relative; display: flex; min-width: 0; min-height: 56px; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; padding: 11px 14px 13px; border-top: 1px solid rgb(var(--theme-fg) / .25); text-align: left; isolation: isolate; transition: color 250ms ease; }
.language-option::before { position: absolute; inset: 0; z-index: -1; background: #a1ffcb; content: ''; transform: scaleX(0); transform-origin: left; transition: transform 380ms cubic-bezier(.23,1,.32,1); }
.language-option:hover::before, .language-option:focus-visible::before { transform: scaleX(1); }
.language-option:hover, .language-option:focus-visible { color: #111; outline: none; }
.language-option[aria-checked="true"] { background: #a1ffcb; color: #111; }
.language-option-name { display: flex; width: 100%; align-items: end; justify-content: space-between; gap: 4px; font-size: 16px; line-height: 1.15; white-space: nowrap; }
.language-option-name::after { content: '↗'; opacity: 0; transform: translate(-4px,4px); transition: opacity 250ms, transform 250ms; }
.language-option:hover .language-option-name::after, .language-option:focus-visible .language-option-name::after { opacity: 1; transform: translate(0,0); }
.language-option[aria-checked="true"] .language-option-name::after { content: '●'; opacity: 1; transform: none; font-size: 9px; }
.language-menu.is-open .language-option { animation: language-option-in 440ms cubic-bezier(.23,1,.32,1) both; animation-delay: calc(var(--language-index) * 35ms); }
@keyframes language-panel-in { from { opacity: 0; transform: translateY(-12px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); } }
@keyframes language-panel-out { from { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); } to { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0); } }
@keyframes language-option-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .language-menu, .language-option { animation: none !important; transition: none !important; } }