@property --heat{syntax:"<number>";inherits:true;initial-value:0}@property --scare{syntax:"<number>";inherits:true;initial-value:0}.logo .band{--heat:calc((var(--row) - 1) * (var(--row) - 1) / 2)}.logo .band rect{fill:color-mix(in srgb,var(--fg) calc(78% + var(--heat, 0) * .28% + var(--scare, 0) * 14%),var(--bg))}.logo{--scare:0;transition:--scare .2s ease-out}.logo.scared{--scare:1}.logo .spark{fill:var(--fg);opacity:0}.logo .sparks{transform-box:fill-box;transform-origin:50% 100%;transition:transform .18s ease-out}.logo.scared .sparks{transform:scale(1.4)}.logo .spark.extra{visibility:hidden}.logo.scared .spark.extra{visibility:visible}