/* Animated icons for the expanded nav. Motion is transform and opacity, plus stroke drawing on a few very small paths. Each plays through once, even if the pointer leaves. */
.ni { --ni-bg: var(--tint); --ni-a: #E9C766; --ni-red: #E0604F; --e-out: cubic-bezier(0.23, 1, 0.32, 1); --d: 0ms; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--ni-bg); color: var(--accent); overflow: hidden; transition: background-color 180ms ease, color 180ms ease; }
.ni svg { display: block; width: 28px; height: 28px; overflow: visible; }
.ni svg [class] { transform-box: fill-box; }

/* layout in the desktop menu and the phone sheet */
.menu-link { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.menu-link .ni { display: grid; place-items: center; grid-row: 1 / span 2; margin: 2px 0 0; }
.menu-link strong { grid-column: 2; }
.menu-link > span:not(.ni) { grid-column: 2; }
.menu-col h3 { padding-inline: 12px; }
html[dir="rtl"] .menu-col h3 { padding-inline: 12px; }
.sheet-links a { gap: 12px; }
.sheet-links .ni { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; }
.sheet-links .ni svg { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) {
  .menu-link:hover .ni { --ni-bg: var(--accent); color: #fff; }
}
.menu-link:focus-visible .ni { --ni-bg: var(--accent); color: #fff; }

/* the moves: run on .is-play only, delayed by --d when a menu introduces itself */
.ni.is-play .a-drop { animation: ni-drop 640ms var(--e-out) var(--d) both; }
@keyframes ni-drop { 0% { transform: translateY(-11px); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(2px); } 100% { transform: none; opacity: 1; } }

.ni.is-play .draw { stroke-dasharray: 1; animation: ni-draw 520ms ease-out var(--d) both; }
.ni.is-play .draw.d2 { animation-delay: calc(var(--d) + 110ms); }
.ni.is-play .draw.d3 { animation-delay: calc(var(--d) + 220ms); }
.ni.is-play .draw.sig { animation-duration: 860ms; animation-timing-function: linear; }
@keyframes ni-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }

.ni.is-play .a-pop { transform-origin: center; animation: ni-pop 380ms var(--e-out) calc(var(--d) + 180ms) both; }
.ni.is-play .a-pop.p2 { animation-delay: calc(var(--d) + 290ms); }
.ni.is-play .a-pop.p3 { animation-delay: calc(var(--d) + 400ms); }
@keyframes ni-pop { 0% { transform: scale(0.5); opacity: 0; } 65% { transform: scale(1.14); opacity: 1; } 100% { transform: none; opacity: 1; } }

.ni.is-play .a-bub.b1 { transform-origin: 0% 100%; animation: ni-pop 380ms var(--e-out) var(--d) both; }
.ni.is-play .a-bub.b2 { transform-origin: 100% 100%; animation: ni-pop 380ms var(--e-out) calc(var(--d) + 240ms) both; }

.ni.is-play .a-spin { transform-origin: center; animation: ni-spin 800ms cubic-bezier(0.77, 0, 0.175, 1) var(--d) both; }
@keyframes ni-spin { from { transform: rotate(0); } to { transform: rotate(180deg); } }
.ni.is-play .a-pulse { transform-origin: center; animation: ni-pop 420ms var(--e-out) calc(var(--d) + 480ms) both; }

.ni.is-play .a-grow { transform-origin: 50% 100%; animation: ni-grow 520ms var(--e-out) var(--d) both; }
.ni.is-play .a-grow.g2 { animation-delay: calc(var(--d) + 90ms); }
.ni.is-play .a-grow.g3 { animation-delay: calc(var(--d) + 180ms); }
@keyframes ni-grow { from { transform: scaleY(0.12); } to { transform: none; } }

.ni.is-play .a-arc { animation: ni-arc 760ms cubic-bezier(0.77, 0, 0.175, 1) var(--d) both; }
@keyframes ni-arc { 0% { transform: translate(14.5px, -1px); opacity: 0; } 12% { opacity: 1; } 28% { transform: translate(11px, -8px); } 52% { transform: translate(7px, -10.5px); } 76% { transform: translate(3px, -7px); } 100% { transform: none; opacity: 1; } }

.ni.is-play .a-swing { transform-origin: 16.5% 16.5%; animation: ni-swing 820ms ease-out var(--d) both; }
@keyframes ni-swing { 0% { transform: rotate(0); } 25% { transform: rotate(-15deg); } 55% { transform: rotate(9deg); } 80% { transform: rotate(-4deg); } 100% { transform: none; } }

.ni.is-play .a-rise { transform-origin: center; animation: ni-rise 620ms var(--e-out) var(--d) both; }
@keyframes ni-rise { 0% { transform: translate(-7px, 9px) scale(0.7); } 70% { transform: translate(0, -1.5px); } 100% { transform: none; } }

.ni.is-play .a-stamp { transform-origin: center; animation: ni-stamp 460ms cubic-bezier(0.32, 0.72, 0, 1) calc(var(--d) + 80ms) both; }
@keyframes ni-stamp { 0% { transform: scale(1.8); opacity: 0; } 55% { transform: scale(0.9); opacity: 1; } 100% { transform: none; opacity: 1; } }

.a-page { opacity: 0; }
.ni.is-play .a-page { transform-origin: 0% 50%; animation: ni-page 760ms ease-in-out var(--d) both; }
@keyframes ni-page { 0% { transform: scaleX(1); opacity: 0.95; } 70% { opacity: 0.95; } 100% { transform: scaleX(0.04); opacity: 0; } }
.ni.is-play .a-tilt { transform-origin: 50% 100%; animation: ni-tilt 760ms ease-out var(--d) both; }
@keyframes ni-tilt { 0% { transform: rotate(-5deg); } 100% { transform: none; } }

.ni.is-play .a-hop { transform-origin: 50% 100%; animation: ni-hop 620ms ease-out var(--d) both; }
@keyframes ni-hop { 0% { transform: none; } 18% { transform: scale(1.06, 0.9); } 48% { transform: translateY(-4px) scale(0.97, 1.04); } 78% { transform: scale(1.03, 0.97); } 100% { transform: none; } }

.ni.is-play .a-fly { animation: ni-fly 900ms var(--e-out) var(--d) both; }
@keyframes ni-fly { 0% { transform: none; opacity: 1; } 42% { transform: translate(20px, -18px); opacity: 0; } 43% { transform: translate(-20px, 18px); opacity: 0; } 100% { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .ni svg * { animation: none !important; } .ni { transition: none; } }

/* the language switch, on the home page too */
.bar-lang { font-size: 15px; font-weight: 600; text-decoration: none; padding: 6px 2px; color: var(--strike, var(--accent)); }
@media (max-width: 767px) { .bar-lang { font-size: 14px; } }