/* migration-codeigniter-to-laravel.html — hero animation (prefix: ci-)
   Theme: Flat CI controller mixing everything → Laravel layered stack cascading in */
@keyframes ciGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes ciFade { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ciFadeR{ from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ciLayer{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ciArrow{ 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.ci-glow   { animation: ciGlow 3.5s ease-in-out infinite; }
.ci-before { animation: ciFade 0.55s var(--ease-spring) 0.4s both; }
.ci-arrow  { transform-box: fill-box; transform-origin: center; animation: ciFade 0.5s ease-out 1.0s both, ciArrow 1.8s ease-in-out 1.5s infinite; }
.ci-after  { animation: ciFadeR 0.55s var(--ease-spring) 1.2s both; }
.ci-layer  { }
.ci-l1 { animation: ciLayer 0.4s ease-out 1.5s both; }
.ci-l2 { animation: ciLayer 0.4s ease-out 1.65s both; }
.ci-l3 { animation: ciLayer 0.4s ease-out 1.8s both; }
.ci-l4 { animation: ciLayer 0.4s ease-out 1.95s both; }
.ci-l5 { animation: ciLayer 0.4s ease-out 2.1s both; }
.ci-l6 { animation: ciLayer 0.4s ease-out 2.25s both; }