/* Kep and the Kepler logo are GitKraken trademarks and are not covered by this repository's MIT license. See TRADEMARKS.md. */
/* Kep, refined */
.k2-wrap { --T: 16s; --tilt: -24deg; display: inline-block; position: relative; flex: none; }
.k2-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }
.k2-glow svg { filter: drop-shadow(0 0 18px var(--glow)); }
.k2 .k2-ot { transform: translate(50px, 50px) rotate(var(--tilt)); transition: transform 0.8s cubic-bezier(0.3, 1.45, 0.5, 1); }
.k2 .k2-wob { transition: scale 0.6s; }
.k2 .k2-band { fill: none; stroke-width: 4.2; }
.k2 .k2-band-hi { fill: none; stroke: var(--ring-hi); stroke-width: 0.7; opacity: 0.55; }
.k2 .k2-band-lo { fill: none; stroke: var(--brand-deep); stroke-width: 0.7; opacity: 0.85; }
.k2 .k2-rim { fill: none; stroke-width: 3.2; }
.k2 .k2-cloud { fill: var(--brand); opacity: 0.1; }
.k2 .k2-cloud.c2 { opacity: 0.06; }
.k2 .k2-ringshadow { fill: none; stroke: #000; stroke-width: 3.2; opacity: var(--ring-shade, 0.22); stroke-linecap: round; }
.k2 .k2-lean { transform-box: view-box; transform-origin: 50px 50px; transition: rotate 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
.k2 .k2-float { transform-box: view-box; transform-origin: 50px 76px; }
.k2 .k2-tilt { transition: transform 0.25s ease-out; }
.k2 .k2-eye-track { transition: transform 0.38s cubic-bezier(0.3, 1.35, 0.5, 1); }
.k2 .k2-iris { transform-box: fill-box; transform-origin: center; transition: opacity 0.4s, scale 0.5s; }
.k2 .k2-eye { transform-box: fill-box; transform-origin: center; transition: scale 0.5s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.2s; filter: drop-shadow(0 0 2.5px var(--brand)); }
.k2 .k2-mc { fill: var(--ring-hi); filter: drop-shadow(0 0 2.5px var(--ring-hi)); transition: fill 0.4s; }
.k2 .k2-ms { transform-box: fill-box; transform-origin: center; transition: scale 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
.k2 .k2-rip, .k2 .k2-dot, .k2 .k2-zz, .k2 .k2-spark { opacity: 0; }
.k2 .k2-rip { fill: none; stroke: var(--brand); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
.k2 .k2-dot { fill: var(--brand-text); }
.k2 .k2-zz { fill: var(--brand-text); font-family: var(--display, sans-serif); font-weight: 800; }
.k2 .k2-spark { fill: var(--ring-hi); }

.k2 .k2-mx { animation: k2mx calc(var(--T) / 2) cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; animation-delay: calc(var(--T) / -4); }
.k2 .k2-my { animation: k2my calc(var(--T) / 2) cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; }
.k2 .k2-mc { animation: k2md calc(var(--T) / 2) cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; }
.k2 .k2-moon-f { animation: k2vf var(--T) linear infinite; }
.k2 .k2-moon-b { animation: k2vb var(--T) linear infinite; }
@keyframes k2mx { from { translate: -42px 0; } to { translate: 42px 0; } }
@keyframes k2my { from { translate: 0 11.5px; } to { translate: 0 -11.5px; } }
@keyframes k2md { from { scale: 1.25; } to { scale: 0.7; } }
@keyframes k2vf { 0%, 25% { opacity: 1; } 25.01%, 74.99% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes k2vb { 0%, 25% { opacity: 0; } 25.01%, 74.99% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes k2bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.6px; } }
@keyframes k2sway { 0%, 100% { rotate: 2.2deg; } 50% { rotate: -2.2deg; } }
@keyframes k2blink { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(0.06); } 96% { transform: scaleY(1); } }
@keyframes k2breathe { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes k2glow { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes k2attend { 0%, 100% { rotate: -9deg; } 50% { rotate: 9deg; } }
@keyframes k2spin { to { rotate: 360deg; } }
@keyframes k2pulse { 0%, 100% { scale: 1.05; } 50% { scale: 1.38; } }
@keyframes k2wobble { 0%, 100% { rotate: -14deg; } 50% { rotate: 14deg; } }
@keyframes k2hop {
  0%, 62%, 100% { translate: 0 0; scale: 1 1; }
  10% { translate: 0 1px; scale: 1.08 0.9; }
  28% { translate: 0 -15px; scale: 0.94 1.08; }
  44% { translate: 0 0; scale: 1.07 0.93; }
  52% { translate: 0 -4px; scale: 1 1; }
}
/* A quarter turn leaves the four-point star where it started, so the loop has no seam. */
@keyframes k2pop { 0% { scale: 1; rotate: 0deg; } 10% { scale: 0.6; rotate: 0deg; } 22% { scale: 1.5; rotate: 90deg; } 36% { scale: 1.25; rotate: 90deg; } 85% { scale: 1.25; rotate: 90deg; } 100% { scale: 1; rotate: 90deg; } }
@keyframes k2burst {
  0%, 12% { transform: translate(0, 0) scale(0); opacity: 0; }
  22% { opacity: 1; }
  42% { transform: translate(var(--dx), var(--dy)) scale(1.2); opacity: 1; }
  62%, 100% { transform: translate(calc(var(--dx) * 1.25), calc(var(--dy) * 1.25)) scale(0); opacity: 0; }
}
@keyframes k2wiggle { 0%, 45%, 100% { rotate: 0deg; } 6% { rotate: -9deg; } 12% { rotate: 8deg; } 18% { rotate: -7deg; } 24% { rotate: 5deg; } 30% { rotate: -3deg; } 36% { rotate: 0deg; } }
@keyframes k2alert { 0%, 100% { scale: 1.35; } 50% { scale: 1.55; } }
@keyframes k2ripple { 0% { scale: 0.85; opacity: 0.6; } 100% { scale: 1.7; opacity: 0; } }
@keyframes k2dotp { 0%, 80%, 100% { opacity: 0.2; translate: 0 0; } 40% { opacity: 1; translate: 0 -2.6px; } }
@keyframes k2zzz { 0% { opacity: 0; translate: 0 4px; } 20% { opacity: 1; } 100% { opacity: 0; translate: -6px -12px; } }

/* idle: bob, and the ring follows a beat behind */
.k2-wrap[data-state="idle"] .k2-float { animation: k2bob 4.6s ease-in-out infinite; }
.k2-wrap[data-state="idle"] .k2-wob { animation: k2sway 4.6s ease-in-out infinite; animation-delay: -0.8s; }
.k2-wrap[data-state="idle"] .k2-eye { animation: k2blink 5.6s infinite, k2breathe 3.6s ease-in-out infinite; }
.k2-wrap[data-state="idle"] .k2-iris { animation: k2glow 3.6s ease-in-out infinite; }
/* listening */
.k2-wrap[data-state="listening"] { --tilt: -40deg; --T: 9s; }
.k2-wrap[data-state="listening"] .k2-lean { rotate: -7deg; }
.k2-wrap[data-state="listening"] .k2-float { animation: k2bob 3s ease-in-out infinite; }
.k2-wrap[data-state="listening"] .k2-wob { animation: k2sway 3s ease-in-out infinite; animation-delay: -0.5s; }
.k2-wrap[data-state="listening"] .k2-eye { scale: 1.28; animation: k2attend 2.4s ease-in-out infinite; }
.k2-wrap[data-state="listening"] .k2-iris { scale: 1.2; }
.k2-wrap[data-state="listening"] .k2-rip { animation: k2ripple 2.2s ease-out infinite; }
.k2-wrap[data-state="listening"] .k2-rip.r2 { animation-delay: 1.1s; }
/* thinking */
.k2-wrap[data-state="thinking"] { --T: 1.7s; }
.k2-wrap[data-state="thinking"] .k2-float { animation: k2bob 2s ease-in-out infinite; }
.k2-wrap[data-state="thinking"] .k2-eye { animation: k2spin 2.6s linear infinite, k2pulse 1.3s ease-in-out infinite; }
.k2-wrap[data-state="thinking"] .k2-wob { animation: k2wobble 2.4s ease-in-out infinite; }
.k2-wrap[data-state="thinking"] .k2-dot { animation: k2dotp 1.2s ease-in-out infinite; }
.k2-wrap[data-state="thinking"] .k2-dot.d2 { animation-delay: 0.2s; }
.k2-wrap[data-state="thinking"] .k2-dot.d3 { animation-delay: 0.4s; }
/* found: the star pops and turns */
.k2-wrap[data-state="found"] { --T: 5s; }
.k2-wrap[data-state="found"] .k2-float { animation: k2hop 2.8s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
.k2-wrap[data-state="found"] .k2-eye { animation: k2pop 2.8s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
.k2-wrap[data-state="found"] .k2-iris { scale: 1.25; }
.k2-wrap[data-state="found"] .k2-spark { animation: k2burst 2.8s ease-out infinite; }
/* attention */
.k2-wrap[data-state="attention"] { --tilt: -12deg; --T: 2.6s; }
.k2-wrap[data-state="attention"] .k2-lean { animation: k2wiggle 2.4s ease-in-out infinite; }
.k2-wrap[data-state="attention"] .k2-eye { animation: k2alert 1.2s ease-in-out infinite; }
.k2-wrap[data-state="attention"] .k2-mc { fill: var(--warm); filter: drop-shadow(0 0 3px var(--warm)); }
.k2-wrap[data-state="attention"] .k2-ms { scale: 1.7; }
.k2-wrap[data-state="attention"] .k2-rip { stroke: var(--warm); animation: k2ripple 1.3s ease-out infinite; }
.k2-wrap[data-state="attention"] .k2-rip.r2 { animation-delay: 0.65s; }
/* asleep: the star narrows to a slit */
.k2-wrap[data-state="asleep"] { --tilt: -6deg; --T: 40s; }
.k2-wrap[data-state="asleep"] svg { opacity: 0.72; }
.k2-wrap[data-state="asleep"] .k2-float { animation: k2bob 7s ease-in-out infinite; }
.k2-wrap[data-state="asleep"] .k2-eye { scale: 1.2 0.12; }
.k2-wrap[data-state="asleep"] .k2-iris { opacity: 0.25; }
.k2-wrap[data-state="asleep"] .k2-wob { scale: 1 0.55; }
.k2-wrap[data-state="asleep"] .k2-zz { animation: k2zzz 3.6s ease-out infinite; }
.k2-wrap[data-state="asleep"] .k2-zz.z2 { animation-delay: 1.2s; }
.k2-wrap[data-state="asleep"] .k2-zz.z3 { animation-delay: 2.4s; }

/* small sizes: the mark only, with heavier line work */
.k2-wrap.mini .k2-moon-f, .k2-wrap.mini .k2-moon-b, .k2-wrap.mini .k2-rip, .k2-wrap.mini .k2-spark, .k2-wrap.mini .k2-dot, .k2-wrap.mini .k2-zz,
.k2-wrap.mini .k2-cloud, .k2-wrap.mini .k2-ringshadow, .k2-wrap.mini .k2-band-hi, .k2-wrap.mini .k2-band-lo, .k2-wrap.mini .k2-iris { display: none; }
.k2-wrap.mini .k2-band { stroke-width: 7; }
.k2-wrap.mini .k2-rim { stroke-width: 5.6; }
.k2-wrap.mini .k2-eye-size { scale: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .k2 *, .k2-wrap * { animation: none !important; transition: none !important; }
  .k2 .k2-moon-b { opacity: 0; }
}