/* rescue-framer.html — hero animation (prefix: fr-)
   Theme: Mobile FPS curve dipping (red) → flatlined 60fps (teal) after refactor */
@keyframes frGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes frFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes frDraw { from { stroke-dashoffset: 540; } to { stroke-dashoffset: 0; } }
@keyframes frPop  { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.fr-glow   { animation: frGlow 3.5s ease-in-out infinite; }
.fr-frame  { animation: frFade 0.5s var(--ease-spring) 0.4s both; }
.fr-before { stroke-dasharray: 540; animation: frDraw 1.4s ease-out 0.9s both; }
.fr-after  { stroke-dasharray: 540; animation: frDraw 1.4s ease-out 2.2s both; }
.fr-device { transform-box: fill-box; transform-origin: center; }
.fr-d1 { animation: frPop 0.5s var(--ease-spring) 2.4s both; }
.fr-d2 { animation: frPop 0.5s var(--ease-spring) 2.6s both; }