/* Activity icon animations. The wrapper sets --v (0..1) and data-level (0..3); nothing else drives them. */
.icon { display: block; width: 100%; height: 100%; overflow: visible; }
.icon * { transform-box: fill-box; transform-origin: center; }

/* Parts that appear as the value climbs */
[data-level="0"] :is(.l1, .l2, .l3),
[data-level="1"] :is(.l2, .l3),
[data-level="2"] .l3 { display: none; }

/* Stagger repeated parts */
.icon .l2, .icon .b2 { animation-delay: -0.6s; }
.icon .l3, .icon .b3 { animation-delay: -1.2s; }
.icon .b4 { animation-delay: -1.8s; }

/* Zero hours: calm and greyed */
[data-level="0"] .icon { filter: saturate(.35); opacity: .7; }
[data-level="0"] .icon * { animation: none !important; }

/* Durations shrink as --v grows: calc(slow - (slow - fast) * v) */
.icon-sleep .z { animation: ic-float calc(3.4s - 2s * var(--v, 0)) ease-in infinite; }
.icon-eating .steam { animation: ic-rise calc(3s - 1.8s * var(--v, 0)) ease-in-out infinite; }
.icon-care .brush { animation: ic-scrub calc(1.2s - .85s * var(--v, 0)) ease-in-out infinite; }
.icon-care .bubble { animation: ic-pop calc(2.4s - 1.4s * var(--v, 0)) ease-out infinite; }
.icon-chores .broom { transform-box: view-box; transform-origin: 42px 6px; animation: ic-sweep calc(1.6s - 1.1s * var(--v, 0)) ease-in-out infinite; }
.icon-chores .dust { animation: ic-puff calc(2s - 1.2s * var(--v, 0)) ease-out infinite; }
.icon-work .lines { transform-box: view-box; animation: ic-scroll calc(2.4s - 1.9s * var(--v, 0)) linear infinite; }
.icon-commute .car { animation: ic-bob calc(.9s - .5s * var(--v, 0)) ease-in-out infinite; }
.icon-commute .road { animation: ic-dash calc(1.3s - 1.05s * var(--v, 0)) linear infinite; }
.icon-commute .speed { animation: ic-streak calc(1s - .6s * var(--v, 0)) linear infinite; }
.icon-social .heart { animation: ic-heart calc(2.4s - 1.4s * var(--v, 0)) ease-out infinite; }
.icon-tv .glow { animation: ic-flicker calc(1.6s - 1.25s * var(--v, 0)) steps(4) infinite; }
.icon-tv .play { animation: ic-throb calc(2s - 1.2s * var(--v, 0)) ease-in-out infinite; }
.icon-games .btn { animation: ic-blink calc(1.6s - 1.1s * var(--v, 0)) ease-in-out infinite; }
.icon-phone .feed { transform-box: view-box; animation: ic-scroll calc(2s - 1.7s * var(--v, 0)) linear infinite; }
.icon-family .beat { animation: ic-beat calc(1.6s - .8s * var(--v, 0)) ease-in-out infinite; }
.icon-friends .chat { animation: ic-bob calc(2.4s - 1.3s * var(--v, 0)) ease-in-out infinite; }
.icon-exercise .pulse { animation: ic-trace calc(2.4s - 1.7s * var(--v, 0)) linear infinite; }
.icon-selfdev .halo { opacity: calc(.06 + .4 * var(--v, 0)); animation: ic-glow calc(3s - 1.6s * var(--v, 0)) ease-in-out infinite; }
.icon-spiritual .halo { opacity: calc(.06 + .4 * var(--v, 0)); animation: ic-glow 3s ease-in-out infinite; }
/* The flame grows calmer (slower) as more time is given to it */
.icon-spiritual .flame { transform-origin: 50% 100%; animation: ic-flame calc(.7s + 1.3s * var(--v, 0)) ease-in-out infinite; }

/* Drag reaction: brief squash each time the snapped value changes */
.icon-wrap.squash .icon { animation: ic-squash .12s ease-out; }

@keyframes ic-float { 0% { transform: translate(0, 4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(4px, -10px); opacity: 0; } }
@keyframes ic-rise { 0% { transform: translateY(4px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
@keyframes ic-scrub { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes ic-pop { 0% { transform: scale(0); opacity: 0; } 40% { transform: scale(1); opacity: 1; } 100% { transform: translateY(-6px) scale(1.3); opacity: 0; } }
@keyframes ic-sweep { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(12deg); } }
@keyframes ic-puff { 0% { transform: scale(.3); opacity: 0; } 50% { opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes ic-scroll { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes ic-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes ic-dash { to { stroke-dashoffset: 12; } }
@keyframes ic-streak { 0% { transform: translateX(4px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(-4px); opacity: 0; } }
@keyframes ic-heart { 0% { transform: translateY(2px) scale(.4); opacity: 0; } 35% { transform: translateY(-2px) scale(1.3); opacity: 1; } 100% { transform: translateY(-10px) scale(1); opacity: 0; } }
@keyframes ic-flicker { 0%, 100% { opacity: .15; } 30% { opacity: .4; } 60% { opacity: .22; } 80% { opacity: .35; } }
@keyframes ic-throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes ic-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes ic-beat { 0%, 45%, 100% { transform: scale(1); } 15% { transform: scale(calc(1 + .35 * var(--v, 0))); } 30% { transform: scale(calc(1 + .15 * var(--v, 0))); } }
@keyframes ic-trace { 0% { stroke-dashoffset: 100; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@keyframes ic-glow { 0%, 100% { transform: scale(.85); } 50% { transform: scale(1.1); } }
@keyframes ic-flame { 0%, 100% { transform: scaleY(1) rotate(0); } 25% { transform: scaleY(.9) rotate(-3deg); } 60% { transform: scaleY(1.06) rotate(2deg); } }
@keyframes ic-squash { 50% { transform: scale(1.06, .94); } }

@media (prefers-reduced-motion: reduce) {
  .icon *, .icon-wrap.squash .icon { animation: none !important; }
}