/* =====================================================================
   icons.css (3.0.28): a gentle animation for every sidebar icon and for
   the three stat icons on the home screen. Each icon moves in a way that
   suits what it means. They speed up a little on hover.
   ===================================================================== */
.navbtn .i{transform-origin:50% 50%;will-change:transform}
.navbtn:hover .i{animation-play-state:running}
/* Home: the house lifts slightly */
.navbtn[data-route="home"] .i{animation:icHome 3.6s ease-in-out infinite}
@keyframes icHome{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
/* Pomodoro: the timer ticks */
.navbtn[data-route="focus"] .i{animation:icTick 2.6s ease-in-out infinite}
@keyframes icTick{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
/* Games: the controller pulses */
.navbtn[data-route="games"] .i,.grp-toggle .i{animation:icPulse 2.8s ease-in-out infinite}
@keyframes icPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
/* Breathe: slow expanding breath */
.navbtn[data-route="breathe"] .i{animation:icBreathe 4.4s ease-in-out infinite}
@keyframes icBreathe{0%,100%{transform:scale(.92)}50%{transform:scale(1.08)}}
/* Notes: the page slides a little */
.navbtn[data-route="notes"] .i{animation:icSlide 3.2s ease-in-out infinite}
@keyframes icSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(1.5px)}}
/* Tasks: the check pops */
.navbtn[data-route="tasks"] .i{animation:icPop 2.6s ease-in-out infinite}
@keyframes icPop{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.14)}90%{transform:scale(.96)}}
/* Podcasts: the mic pulses like a voice */
.navbtn[data-route="podcast"] .i{animation:icVoice 1.9s ease-in-out infinite}
@keyframes icVoice{0%,100%{transform:scale(1)}40%{transform:scale(1.12)}}
/* Hertz: the wave line flows */
.navbtn[data-route="hertz"] .i{stroke-dasharray:6 4;animation:icFlow 1.4s linear infinite}
@keyframes icFlow{to{stroke-dashoffset:-20}}
/* Statistics: bars rise and fall */
.navbtn[data-route="stats"] .i{animation:icBars 2.6s ease-in-out infinite}
@keyframes icBars{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.08)}}
/* Settings: the gear turns slowly */
.navbtn[data-route="settings"] .i{animation:icGear 9s linear infinite}
@keyframes icGear{to{transform:rotate(360deg)}}

/* ---------- Home stat icons ---------- */
/* Focus time: the clock hand turns */
article.stat:nth-of-type(1) .badge .i{transform-origin:12px 12px;animation:icTick 3s ease-in-out infinite}
/* Daily streak: the flame flickers */
article.stat:nth-of-type(2) .badge .i{transform-origin:50% 100%;animation:icFlicker 1.6s ease-in-out infinite}
@keyframes icFlicker{0%,100%{transform:scale(1,1) rotate(0)}30%{transform:scale(.96,1.06) rotate(-2deg)}60%{transform:scale(1.04,.97) rotate(2deg)}}
/* Tasks completed: the check draws itself */
article.stat:nth-of-type(3) .badge .i{stroke-dasharray:30;stroke-dashoffset:30;animation:icDraw 2.8s ease-in-out infinite}
@keyframes icDraw{0%{stroke-dashoffset:30}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-30}}
@media (prefers-reduced-motion:reduce){
  .navbtn .i,.navbtn .i *,article.stat .badge .i{animation:none!important;stroke-dasharray:none!important}
}
/* Brain games (under Games): each icon breathes softly, offset from its neighbour */
.navbtn[data-route="reaction"] .i,.navbtn[data-route="seq"] .i,.navbtn[data-route="aim"] .i,.navbtn[data-route="num"] .i,
.navbtn[data-route="verbal"] .i,.navbtn[data-route="chimp"] .i,.navbtn[data-route="visual"] .i,.navbtn[data-route="typing"] .i{animation:icGame 3.2s ease-in-out infinite}
.navbtn[data-route="seq"] .i{animation-delay:.4s}.navbtn[data-route="aim"] .i{animation-delay:.8s}.navbtn[data-route="num"] .i{animation-delay:1.2s}
.navbtn[data-route="verbal"] .i{animation-delay:1.6s}.navbtn[data-route="chimp"] .i{animation-delay:2s}.navbtn[data-route="visual"] .i{animation-delay:2.4s}
.navbtn[data-route="typing"] .i{animation-delay:2.8s}
@keyframes icGame{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(-4deg)}}

/* ---------- Sidebar logo: hourglass with a tea leaf, softly glowing ---------- */
.brand .logo{position:relative;animation:logoGlow 4.5s ease-in-out infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(255,255,255,.12),0 0 18px -2px rgba(160,189,210,.55)}
.brand .logo .logo-mark{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.brand .logo .leaf{fill:currentColor;fill-opacity:.85;stroke:none;animation:leafSway 4.5s ease-in-out infinite;transform-origin:12px 19px}
.brand .logo .stem{stroke-width:1.3}
@keyframes logoGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(255,255,255,.12),0 0 14px -3px rgba(160,189,210,.4)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(255,255,255,.2),0 0 26px 0 rgba(160,189,210,.7)}}
@keyframes leafSway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.brand .logo,.brand .logo .leaf{animation:none}}

/* ---------- Sidebar logo: minimal sharp cup with wavy steam ---------- */
.brand .logo .logo-mark .mk-cup{stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none}
.brand .logo .cup-steam{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:cupSteam 3.2s ease-in-out infinite}
@keyframes cupSteam{
  0%{opacity:0;transform:translate(0,1.5px) scaleY(.85)}
  20%{opacity:.95}
  45%{opacity:.8;transform:translate(-.7px,-.8px) scaleY(1)}
  70%{opacity:.5;transform:translate(.7px,-2px) scaleY(1.05)}
  100%{opacity:0;transform:translate(0,-3.4px) scaleY(1.1)}
}
@media (prefers-reduced-motion:reduce){.brand .logo .cup-steam{animation:none;opacity:.7}}