/* svc-mobile-app.html — hero animation (prefix: ma-)
   Theme: Three phone frames — Day 1 onboard → Day 7 habit loop → Day 30 retained */
@keyframes maGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes maFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes maLoopSpin { to { transform: rotate(360deg); } }
@keyframes maBarRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ma-glow { animation: maGlow 3.5s ease-in-out infinite; }
.ma-phone { }
.ma-p1 { animation: maFade 0.5s var(--ease-spring) 0.4s both; }
.ma-p2 { animation: maFade 0.5s var(--ease-spring) 0.6s both; }
.ma-p3 { animation: maFade 0.5s var(--ease-spring) 0.8s both; }
.ma-loop { transform-box: fill-box; transform-origin: center; animation: maLoopSpin 6s linear 1.3s infinite; }
.ma-streak rect { transform-box: fill-box; transform-origin: bottom center; animation: maBarRise 0.5s var(--ease-spring) both; }
.ma-streak rect:nth-child(1){animation-delay:1.2s}.ma-streak rect:nth-child(2){animation-delay:1.3s}.ma-streak rect:nth-child(3){animation-delay:1.4s}.ma-streak rect:nth-child(4){animation-delay:1.5s}.ma-streak rect:nth-child(5){animation-delay:1.6s}.ma-streak rect:nth-child(6){animation-delay:1.7s}.ma-streak rect:nth-child(7){animation-delay:1.8s}.ma-streak rect:nth-child(8){animation-delay:1.9s}
.ma-metrics { animation: maFade 0.5s var(--ease-spring) 1.35s both; }