/* Desktop menu bar (views/layouts/_kz-bar.php, assets/js/kz-bar.js): the phone bar's language on a wide
   screen. The K hangs in a round pendant in the middle; the links mirror each other around it. */
.kb { max-width: 1237px; margin: 0 auto; padding: 0 0 74px; }
@media (max-width: 1350px) { .kb { padding-left: 40px; padding-right: 40px; } }
.kb__bar {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 62px;
    padding: 9px 12px;
    border-radius: 0 0 28px 28px;
    background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 16px 16px, linear-gradient(180deg, #16123A, #0F0C2A);
    box-shadow: 0 24px 44px -26px rgba(11, 9, 32, .9);
}
/* the pendant under the middle of the bar */
.kb__bar::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -50px;
    width: 112px;
    height: 112px;
    margin-left: -56px;
    border-radius: 50%;
    background: #0F0C2A;
    box-shadow: 0 22px 34px -18px rgba(11, 9, 32, .9);
    z-index: 0;
}
.kb__pattern { position: absolute; inset: 0; z-index: 0; height: 100%; margin: 0 auto; opacity: .55; pointer-events: none; }
.kb__wires { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: calc(100% + 40px); overflow: visible; pointer-events: none; }
.kb__wire { fill: none; stroke: rgba(255, 154, 107, .3); stroke-width: 1.2; stroke-dasharray: 3 6; transition: stroke .3s ease; }
.kb__wire.is-on { stroke: rgba(255, 154, 107, .95); stroke-dasharray: none; filter: drop-shadow(0 0 4px #EE5D38); }
.kb__wire.is-hover { stroke: rgba(255, 154, 107, .75); }
.kb__bead { fill: #FFD9C7; }
.kb__spark { fill: #FFF1E8; opacity: 0; filter: drop-shadow(0 0 6px #EE5D38) drop-shadow(0 0 12px #EE5D38); }
.kb__spark.is-flying { opacity: 1; }

/* the groups stay static so the services menu (.mm-drop) is placed against the whole bar, centred as before */
.kb__side { position: static; display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: 600; }
.kb__side--start { justify-content: flex-end; }
.kb__side--end { justify-content: flex-start; }
.kb__side > li { position: relative; z-index: 2; }
.kb__side > li.mm { position: static; }
.kb__side > li.mm > div:first-child { z-index: 2; }
.kb__link { position: relative; display: inline-block; padding: 8px 2px; color: rgba(255, 255, 255, .82); transition: color .25s ease; }
.kb__link::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #EE5D38; transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.kb__link:hover, .kb__link.is-on { color: #fff; }
.kb__link:hover::after, .kb__link.is-on::after { transform: scale(1); }
.kb__link.is-on::after { box-shadow: 0 0 10px #EE5D38; }
.kb__link.is-hit { animation: kbHit .5s ease-out; }
@keyframes kbHit { 40% { color: #FFB199; text-shadow: 0 0 14px rgba(238, 93, 56, .9); } }
/* the services item keeps its own markup (_mega-menu.php) and gets the same dot */
.kb__side .mm > div:first-child { position: relative; padding: 8px 2px; }
.kb__side .mm > div:first-child::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #EE5D38; transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.kb__side .mm:hover > div:first-child::after, .kb.is-services .kb__side .mm > div:first-child::after { transform: scale(1); }

/* the K: the Karzaan emblem on a white disc inside a turning ring of the brand's colours */
.kb__k {
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    justify-self: center;
    width: 88px;
    height: 88px;
    margin-bottom: -54px;
    border-radius: 50%;
    transition: transform .4s cubic-bezier(.3, 1.5, .5, 1);
}
.kb__k-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #EE5D38, #FFB199, #9B7BFF, #110E2D, #EE5D38);
    box-shadow: 0 0 28px rgba(238, 93, 56, .55), 0 14px 30px -12px rgba(11, 9, 32, .9);
    animation: kbSpin 7s linear infinite;
}
@keyframes kbSpin { to { transform: rotate(360deg); } }
.kb__k-disc {
    position: relative;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFFFFF, #F2EFFA 70%);
    box-shadow: inset 0 -4px 10px rgba(17, 14, 45, .12), 0 0 0 3px #0F0C2A;
}
.kb__k-disc img { width: 60px; height: 60px; border-radius: 50%; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.kb__k:hover { transform: translateY(3px); }
.kb__k:hover .kb__k-ring { animation-duration: 1.6s; }
.kb__k:hover .kb__k-disc img { transform: rotate(-12deg) scale(1.06); }
.kb__k-pulse { position: absolute; inset: -4px; border-radius: 50%; animation: kbPulse 2.8s ease-out infinite; }
@keyframes kbPulse { 0% { box-shadow: 0 0 0 0 rgba(238, 93, 56, .55); } 100% { box-shadow: 0 0 0 18px rgba(238, 93, 56, 0); } }
.kb__k.is-fire .kb__k-pulse { animation: kbFire .45s ease-out; }
@keyframes kbFire { 0% { box-shadow: 0 0 0 0 rgba(255, 154, 107, .95); } 100% { box-shadow: 0 0 0 22px rgba(255, 154, 107, 0); } }

/* LMS and LXP: two tags hanging from the ends of the bar, in their home-page colours (coral and deep
   green), swaying a little; pointing at one swings it and sends the K's spark to it */
.kb__tag { position: relative; z-index: 2; display: block; align-self: stretch; width: 118px; }
/* the hooks on the bar */
.kb__tag::before, .kb__tag::after { content: ""; position: absolute; bottom: -2px; width: 7px; height: 7px; border-radius: 50%; background: #2A2552; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.kb__tag::before { left: 26px; }
.kb__tag::after { right: 26px; }
.kb__tag-card {
    position: absolute;
    top: calc(100% + 19px);
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ico name" "ico sub";
    align-items: center;
    column-gap: 9px;
    padding: 9px 12px;
    border-radius: 16px;
    color: #fff;
    transform-origin: 50% -19px;
    animation: kbSway 5s ease-in-out infinite;
    transition: box-shadow .3s ease;
    overflow: visible;
}
/* the two strings */
.kb__tag-card::before {
    content: "";
    position: absolute;
    top: -19px;
    left: 29px;
    right: 29px;
    height: 19px;
    border-left: 1.5px solid rgba(255, 255, 255, .45);
    border-right: 1.5px solid rgba(255, 255, 255, .45);
}
/* a sheen that passes over the tag now and then */
.kb__tag-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat;
    animation: kbSheen 6s ease-in-out infinite;
    pointer-events: none;
}
.kb__tag--lms .kb__tag-card { background: radial-gradient(90% 120% at 15% 10%, #FF9A6B, transparent 70%), linear-gradient(150deg, #EE5D38, #B93A18); box-shadow: 0 14px 26px -12px rgba(185, 58, 24, .9); }
.kb__tag--lxp .kb__tag-card { background: radial-gradient(90% 120% at 85% 90%, #1F7A78, transparent 70%), linear-gradient(150deg, #0E3B40, #06262E); box-shadow: 0 14px 26px -12px rgba(6, 38, 46, .9), inset 0 0 0 1px rgba(46, 196, 180, .35); animation-delay: -2.5s; }
.kb__tag--lxp .kb__tag-card::after { animation-delay: -3s; }
.kb__tag-ico { grid-area: ico; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, .18); }
.kb__tag b { grid-area: name; font-size: 16px; line-height: 1.1; letter-spacing: .06em; }
.kb__tag small { grid-area: sub; color: rgba(255, 255, 255, .82); font-size: 10px; line-height: 1.4; white-space: nowrap; }
.kb__tag:hover .kb__tag-card, .kb__tag:focus-visible .kb__tag-card { animation: kbSwing .9s cubic-bezier(.3, 1.5, .5, 1); }
.kb__tag--lms:hover .kb__tag-card, .kb__tag--lms.is-on .kb__tag-card { box-shadow: 0 0 0 3px rgba(255, 177, 153, .45), 0 0 30px rgba(238, 93, 56, .6); }
.kb__tag--lxp:hover .kb__tag-card, .kb__tag--lxp.is-on .kb__tag-card { box-shadow: 0 0 0 3px rgba(46, 196, 180, .35), 0 0 30px rgba(31, 122, 120, .7); }
.kb__tag:focus-visible { outline: none; }
@keyframes kbSway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes kbSwing { 0% { transform: rotate(0); } 25% { transform: rotate(9deg); } 50% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
@keyframes kbSheen { 0%, 70% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

@media (max-width: 1199px) {
    .kb__bar { gap: 12px; grid-template-columns: auto minmax(0, 1fr) 88px minmax(0, 1fr) auto; }
    .kb__side { gap: 16px; font-size: 12px; }
    .kb__tag { width: 104px; }
}
@media (max-width: 991px) {
    .kb__tag-ico { display: none; }
    .kb__tag-card { grid-template-columns: 1fr; grid-template-areas: "name" "sub"; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .kb *, .kb *::after { animation: none !important; transition: none !important; }
}
/* the services menu opens below the K's pendant (the transparent top keeps the pointer's path to it) */
.kb .mm-drop { padding-top: 52px; }