/* kf-icons.css — animations for tab icons injected by kf-icons.js
   Targets buttons inside .tab-bar and .kf-subtab-bar. */

.kf-icon {
  display: inline-flex;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -.18em;
  margin-right: .45em;
  color: currentColor;
}
.kf-icon svg { width: 100%; height: 100%; overflow: visible; }
.kf-icon svg * {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .35s ease, stroke-dashoffset .4s ease, opacity .25s ease;
}

/* Sub-tab bar inherits everything; just smaller + quieter motion (handled below) */
.kf-subtab-bar .kf-icon { width: 1em; height: 1em; margin-right: .35em; opacity: .8; }
.kf-subtab-bar button:hover .kf-icon,
.kf-subtab-bar button.active .kf-icon { opacity: 1; }

/* ── Per-icon animations (hover on the button) ───────────────────────────── */

/* bell — clapper swings */
.tab-bar .tab-btn:hover .kf-icon-bell .kf-i-a,
.kf-subtab-bar button:hover .kf-icon-bell .kf-i-a {
  animation: kf-bell-ring .6s ease;
  transform-origin: 50% 18%;
}
@keyframes kf-bell-ring {
  0%,100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  50% { transform: rotate(11deg); }
  80% { transform: rotate(-5deg); }
}

/* users-group — back person slides in */
.tab-bar .tab-btn:hover .kf-icon-users-group .kf-i-c {
  animation: kf-slide-in .35s ease;
}
@keyframes kf-slide-in {
  from { transform: translateX(-4px); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}

/* folder — lid lifts */
.tab-bar .tab-btn:hover .kf-icon-folder .kf-i-a {
  animation: kf-folder-lift .35s ease;
  transform-origin: 0 20%;
}
@keyframes kf-folder-lift {
  0%,100% { transform: rotate(0); }
  50% { transform: rotate(-4deg) translateY(-1px); }
}

/* shield-check — tick draws */
.kf-icon-shield-check .kf-i-b { stroke-dasharray: 14; stroke-dashoffset: 14; }
.tab-bar .tab-btn:hover .kf-icon-shield-check .kf-i-b,
.tab-bar .tab-btn.active .kf-icon-shield-check .kf-i-b,
.kf-subtab-bar button:hover .kf-icon-shield-check .kf-i-b,
.kf-subtab-bar button.active .kf-icon-shield-check .kf-i-b {
  stroke-dashoffset: 0;
}

/* key — turns */
.tab-bar .tab-btn:hover .kf-icon-key svg {
  animation: kf-key-turn .5s ease;
  transform-origin: 30% 70%;
}
@keyframes kf-key-turn {
  0%,100% { transform: rotate(0); }
  50% { transform: rotate(-25deg); }
}

/* send — flies up-right */
.kf-subtab-bar button:hover .kf-icon-send svg {
  animation: kf-send-fly .45s ease;
}
@keyframes kf-send-fly {
  0% { transform: translate(0,0); }
  60% { transform: translate(3px,-3px); opacity:.6; }
  61% { transform: translate(-4px,4px); opacity:0; }
  62% { transform: translate(-4px,4px); opacity:0; }
  100% { transform: translate(0,0); opacity:1; }
}

/* repeat — rotates */
.kf-subtab-bar button:hover .kf-icon-repeat svg {
  animation: kf-spin .55s ease;
}
@keyframes kf-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

/* user-list — list lines fade in left to right */
.kf-icon-user-list .kf-i-c { stroke-dasharray: 6; stroke-dashoffset: 6; }
.kf-subtab-bar button:hover .kf-icon-user-list .kf-i-c {
  stroke-dashoffset: 0;
  transition-duration: .45s;
}

/* history — clock hand sweeps */
.kf-subtab-bar button:hover .kf-icon-history .kf-i-b {
  animation: kf-clock .55s ease;
  transform-origin: 50% 60%;
}
@keyframes kf-clock {
  0%,100% { transform: rotate(0); }
  50% { transform: rotate(45deg); }
}

/* dashboard — tiles pop in sequence */
.tab-bar .tab-btn:hover .kf-icon-dashboard .kf-i-a { animation: kf-pop .35s ease     both; }
.tab-bar .tab-btn:hover .kf-icon-dashboard .kf-i-b { animation: kf-pop .35s ease .06s both; }
.tab-bar .tab-btn:hover .kf-icon-dashboard .kf-i-c { animation: kf-pop .35s ease .12s both; }
.tab-bar .tab-btn:hover .kf-icon-dashboard .kf-i-d { animation: kf-pop .35s ease .18s both; }
@keyframes kf-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* truck — wheels roll, body shifts right slightly */
.tab-bar .tab-btn:hover .kf-icon-truck .kf-i-b {
  animation: kf-spin .7s linear;
}
.tab-bar .tab-btn:hover .kf-icon-truck .kf-i-a {
  animation: kf-truck-bump .35s ease;
}
@keyframes kf-truck-bump {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(1.5px); }
}

/* user — head nods */
.tab-bar .tab-btn:hover .kf-icon-user .kf-i-a {
  animation: kf-nod .4s ease;
  transform-origin: 50% 60%;
}
@keyframes kf-nod {
  0%,100% { transform: rotate(0); }
  50% { transform: rotate(8deg); }
}

/* check-circle — tick draws, circle gently scales */
.kf-icon-check-circle .kf-i-b { stroke-dasharray: 14; stroke-dashoffset: 14; }
.tab-bar .tab-btn:hover .kf-icon-check-circle .kf-i-b,
.tab-bar .tab-btn.active .kf-icon-check-circle .kf-i-b {
  stroke-dashoffset: 0;
}
.tab-bar .tab-btn:hover .kf-icon-check-circle .kf-i-a {
  animation: kf-soft-pulse .4s ease;
}
@keyframes kf-soft-pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* paperclip — wiggles */
.tab-bar .tab-btn:hover .kf-icon-paperclip svg {
  animation: kf-wiggle .5s ease;
}
@keyframes kf-wiggle {
  0%,100% { transform: rotate(0); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

/* link — two halves pull apart then snap back */
.tab-bar .tab-btn:hover .kf-icon-link .kf-i-a { animation: kf-link-a .45s ease; }
.tab-bar .tab-btn:hover .kf-icon-link .kf-i-b { animation: kf-link-b .45s ease; }
@keyframes kf-link-a {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(1.5px,-1.5px); }
}
@keyframes kf-link-b {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(-1.5px,1.5px); }
}

/* ─────────────────────────────────────────────────────────────────────────
   index.html bottom-tab-bar — stroke icons injected by kf-icons.js
   Override .kf-icon defaults so the span behaves like the old inline <svg>.
   ───────────────────────────────────────────────────────────────────────── */

.bottom-tab-bar .kf-icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: 0;
  vertical-align: baseline;
}
.bottom-tab-bar .kf-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.85;
}
.bottom-tab-bar .kf-icon svg * {
  transform-box: fill-box;
  transform-origin: center;
}

/* Trigger animations on hover AND when tab becomes active (mobile users
   never hover, so .active gives them a cue when they tap a new tab). */

/* sun — rays shimmer, core gently pulses */
.bottom-tab-bar .tab-btn:hover .kf-icon-sun .kf-i-a,
.bottom-tab-bar .tab-btn.active .kf-icon-sun .kf-i-a { animation: kf-soft-pulse .55s ease; }
.bottom-tab-bar .tab-btn:hover .kf-icon-sun .kf-i-b > *,
.bottom-tab-bar .tab-btn.active .kf-icon-sun .kf-i-b > * { animation: kf-ray-shimmer .5s ease; }
@keyframes kf-ray-shimmer {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.9); }
}

/* hard-hat — lifts then settles */
.bottom-tab-bar .tab-btn:hover .kf-icon-hard-hat svg,
.bottom-tab-bar .tab-btn.active .kf-icon-hard-hat svg {
  animation: kf-hat-lift .45s ease;
}
@keyframes kf-hat-lift {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* map-pin — drops with overshoot, dot scales */
.bottom-tab-bar .tab-btn:hover .kf-icon-map-pin .kf-i-a,
.bottom-tab-bar .tab-btn.active .kf-icon-map-pin .kf-i-a {
  animation: kf-pin-drop .55s cubic-bezier(.36,.07,.19,1.5);
  transform-origin: 50% 100%;
}
.bottom-tab-bar .tab-btn:hover .kf-icon-map-pin .kf-i-b,
.bottom-tab-bar .tab-btn.active .kf-icon-map-pin .kf-i-b {
  animation: kf-soft-pulse .55s ease .1s;
}
@keyframes kf-pin-drop {
  0%   { transform: translateY(-4px); }
  60%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

/* life-buoy — full rotation */
.bottom-tab-bar .tab-btn:hover .kf-icon-life-buoy svg,
.bottom-tab-bar .tab-btn.active .kf-icon-life-buoy svg {
  animation: kf-spin .9s ease;
}

/* id-card — card tilts; info lines draw */
.bottom-tab-bar .tab-btn:hover .kf-icon-id-card svg,
.bottom-tab-bar .tab-btn.active .kf-icon-id-card svg {
  animation: kf-badge-tilt .55s ease;
  transform-origin: 50% 0%;
}
.kf-icon-id-card .kf-i-c { stroke-dasharray: 6; stroke-dashoffset: 6; }
.bottom-tab-bar .tab-btn:hover .kf-icon-id-card .kf-i-c,
.bottom-tab-bar .tab-btn.active .kf-icon-id-card .kf-i-c {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .4s ease .15s;
}
@keyframes kf-badge-tilt {
  0%,100% { transform: rotate(0); }
  35% { transform: rotate(-4deg); }
  70% { transform: rotate(3deg); }
}

/* shield-check (reused) — already animates tick on .active via existing rule.
   Add a shield-body pulse here too for the bottom nav. */
.bottom-tab-bar .tab-btn:hover .kf-icon-shield-check .kf-i-a,
.bottom-tab-bar .tab-btn.active .kf-icon-shield-check .kf-i-a {
  animation: kf-soft-pulse .5s ease;
}

/* sprout — stem pulses, leaves grow from base */
.bottom-tab-bar .tab-btn:hover .kf-icon-sprout .kf-i-a,
.bottom-tab-bar .tab-btn.active .kf-icon-sprout .kf-i-a {
  animation: kf-soft-pulse .55s ease;
}
.bottom-tab-bar .tab-btn:hover .kf-icon-sprout .kf-i-b,
.bottom-tab-bar .tab-btn.active .kf-icon-sprout .kf-i-b {
  animation: kf-leaf-grow .55s ease;
  transform-origin: 50% 100%;
}
@keyframes kf-leaf-grow {
  from { transform: scale(.3); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────
   index.html footer-side-btn — floating corner buttons (profile / signOut /
   pushBell). 40px circle, svg 18px. Match the existing inline-SVG geometry.
   ───────────────────────────────────────────────────────────────────────── */

.footer-side-btn .kf-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: baseline;
}
.footer-side-btn .kf-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}
.footer-side-btn .kf-icon svg * {
  transform-box: fill-box;
  transform-origin: center;
}

/* profile (user) — head nods on hover */
.footer-side-btn#profileBtn:hover .kf-icon-user .kf-i-a {
  animation: kf-nod .4s ease;
  transform-origin: 50% 80%;
}

/* signOut — arrow slides right then comes back */
.footer-side-btn#signOutBtn:hover .kf-icon-log-out .kf-i-b {
  animation: kf-logout-slide .55s ease;
}
@keyframes kf-logout-slide {
  0%   { transform: translateX(0);   opacity: 1; }
  45%  { transform: translateX(3px); opacity: .4; }
  46%  { transform: translateX(-3px); opacity: 0; }
  60%  { transform: translateX(-3px); opacity: 0; }
  100% { transform: translateX(0);   opacity: 1; }
}

/* pushBell on — rings */
.footer-side-btn#pushBellBtn:hover .kf-icon-bell .kf-i-a {
  animation: kf-bell-ring .6s ease;
  transform-origin: 50% 18%;
}

/* footer-trigger (drawer-open arrow, left:24px) — arrow leaps upward */
.footer-trigger .kf-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: baseline;
}
.footer-trigger .kf-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}
.footer-trigger .kf-icon svg * {
  transform-box: fill-box;
  transform-origin: center;
}
.footer-trigger:hover .kf-icon-arrow-big-up-dash .kf-i-a {
  animation: kf-arrow-leap .5s ease;
}
.footer-trigger:hover .kf-icon-arrow-big-up-dash .kf-i-b {
  animation: kf-soft-pulse .5s ease;
}
@keyframes kf-arrow-leap {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* pushBell off — shakes (no, you can't ring me) */
.footer-side-btn#pushBellBtn:hover .kf-icon-bell-off svg {
  animation: kf-shake .45s ease;
}
@keyframes kf-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-1.5px); }
  40% { transform: translateX(1.5px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

/* ─────────────────────────────────────────────────────────────────────────
   index.html .kf-submenu popups (bottom-nav submenus) and .footer-section
   (drawer that slides up from bottom).
   ───────────────────────────────────────────────────────────────────────── */

.kf-submenu .kf-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  vertical-align: baseline;
}
.kf-submenu .kf-nested .kf-icon { width: 18px; height: 18px; }
.kf-submenu .kf-icon svg,
.footer-section .kf-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.85;
}
.kf-submenu .kf-icon svg *,
.footer-section .kf-icon svg * {
  transform-box: fill-box;
  transform-origin: center;
}

/* Subtle hover lift on submenu items */
.kf-submenu a:hover .kf-icon,
.kf-submenu .kf-expander:hover .kf-icon {
  animation: kf-icon-bob .35s ease;
}
@keyframes kf-icon-bob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* Specific icon flourishes inside submenus */
.kf-submenu a:hover .kf-icon-clipboard-list .kf-i-c { stroke-dasharray: 8; animation: kf-draw .35s ease forwards; }
@keyframes kf-draw { from { stroke-dashoffset: 8; } to { stroke-dashoffset: 0; } }

.kf-submenu a:hover .kf-icon-bar-chart .kf-i-a { animation: kf-pop .3s ease both; }
.kf-submenu a:hover .kf-icon-bar-chart .kf-i-b { animation: kf-pop .3s ease .07s both; }
.kf-submenu a:hover .kf-icon-bar-chart .kf-i-c { animation: kf-pop .3s ease .14s both; }

.kf-submenu a:hover .kf-icon-clock .kf-i-b { animation: kf-clock .55s ease; transform-origin: 50% 60%; }

.kf-submenu a:hover .kf-icon-calendar-check .kf-i-b { stroke-dasharray: 12; animation: kf-tick-draw .45s ease forwards; }
@keyframes kf-tick-draw { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }

.kf-submenu .kf-expander:hover .kf-icon-user-x .kf-i-b { animation: kf-shake .4s ease; }

.kf-submenu a:hover .kf-icon-apple svg { animation: kf-soft-pulse .45s ease; }
.kf-submenu a:hover .kf-icon-cherry .kf-i-a { animation: kf-pop .35s ease both; }

.kf-submenu a:hover .kf-icon-map svg { animation: kf-soft-pulse .45s ease; }

.kf-submenu a:hover .kf-icon-user-check .kf-i-b { stroke-dasharray: 10; animation: kf-tick-draw .4s ease forwards; }

.kf-submenu a:hover .kf-icon-headphones svg { animation: kf-soft-pulse .45s ease; }

.kf-submenu a:hover .kf-icon-graduation-cap .kf-i-a { animation: kf-hat-lift .4s ease; }

.kf-submenu a:hover .kf-icon-settings .kf-i-b { animation: kf-spin 1.2s linear; }

.kf-submenu a:hover .kf-icon-external-link .kf-i-b { animation: kf-logout-slide .5s ease; }

.kf-submenu a:hover .kf-icon-file-plus .kf-i-b { animation: kf-pop .35s ease both; }

/* Footer-drawer items */
.footer-section .kf-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  opacity: .7;
}
.footer-section a:hover .kf-icon { opacity: 1; }
.footer-section a:hover .kf-icon svg { animation: kf-soft-pulse .4s ease; }

/* Per-icon flourishes inside footer-drawer */
.footer-section a:hover .kf-icon-info svg { animation: kf-soft-pulse .4s ease; }
.footer-section a:hover .kf-icon-book-open svg { animation: kf-icon-bob .4s ease; }
.footer-section a:hover .kf-icon-briefcase svg { animation: kf-soft-pulse .4s ease; }
.footer-section a:hover .kf-icon-mail .kf-i-b { animation: kf-tick-draw .4s ease forwards; stroke-dasharray: 22; }
.footer-section a:hover .kf-icon-lock .kf-i-b { animation: kf-icon-bob .35s ease; }
.footer-section a:hover .kf-icon-file-text .kf-i-b { animation: kf-draw .35s ease forwards; }
.footer-section a:hover .kf-icon-life-buoy svg { animation: kf-spin .9s ease; }
.footer-section a:hover .kf-icon-shield-check .kf-i-b { stroke-dasharray: 14; animation: kf-tick-draw .4s ease forwards; }
.footer-section a:hover .kf-icon-check-circle .kf-i-b { stroke-dasharray: 14; animation: kf-tick-draw .4s ease forwards; }

/* Reduced-motion respect (covers tab-bar, bottom-tab-bar, footer-side-btn,
   kf-submenu, footer-section) */
@media (prefers-reduced-motion: reduce) {
  .kf-icon svg *,
  .kf-icon svg,
  .bottom-tab-bar .tab-btn svg,
  .bottom-tab-bar .tab-btn svg *,
  .kf-submenu .kf-icon svg *,
  .footer-section .kf-icon svg * {
    animation: none !important;
    transition: none !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
}