diff --git a/src/components/SplashIntro.vue b/src/components/SplashIntro.vue index 111b77b..fcd6568 100644 --- a/src/components/SplashIntro.vue +++ b/src/components/SplashIntro.vue @@ -12,7 +12,7 @@ > { height: 400px; } -/* Stroke Drawing Animation */ +/* Stroke Drawing Animation - Staggered timing */ .logo-stroke { stroke-dasharray: 2000; stroke-dashoffset: 2000; fill: transparent; - animation: drawStroke 1.5s ease-out forwards, undrawStroke 1.5s ease-in 3s forwards; } -/* Circle stroke draws slower */ +/* Top blocks draw first */ +.logo-block-1 { + animation: drawStroke 1.5s ease-out 0s forwards, undrawStroke 1.5s ease-in 3.4s forwards; +} + +.logo-block-2 { + animation: drawStroke 1.5s ease-out 0.2s forwards, undrawStroke 1.5s ease-in 3.2s forwards; +} + +/* Center circle draws after top blocks */ .logo-circle { - animation: drawStroke 2s ease-out forwards, undrawStroke 2s ease-in 3s forwards; + animation: drawStroke 2s ease-out 0.4s forwards, undrawStroke 2s ease-in 2.5s forwards; } -/* Diagonal strokes draw with slight delay */ -.logo-diagonal { - animation: drawStroke 1.5s ease-out 0.3s forwards, undrawStroke 1.5s ease-in 2.7s forwards; +/* Diagonals draw in sequence */ +.logo-diagonal-1 { + animation: drawStroke 1.5s ease-out 0.6s forwards, undrawStroke 1.5s ease-in 2.8s forwards; +} + +.logo-diagonal-2 { + animation: drawStroke 1.5s ease-out 0.8s forwards, undrawStroke 1.5s ease-in 2.6s forwards; +} + +.logo-diagonal-3 { + animation: drawStroke 1.5s ease-out 1.0s forwards, undrawStroke 1.5s ease-in 2.4s forwards; +} + +.logo-diagonal-4 { + animation: drawStroke 1.5s ease-out 1.2s forwards, undrawStroke 1.5s ease-in 2.2s forwards; +} + +/* Bottom blocks draw last */ +.logo-block-3 { + animation: drawStroke 1.5s ease-out 1.4s forwards, undrawStroke 1.5s ease-in 2.0s forwards; +} + +.logo-block-4 { + animation: drawStroke 1.5s ease-out 1.6s forwards, undrawStroke 1.5s ease-in 1.8s forwards; +} + +.logo-block-5 { + animation: drawStroke 1.5s ease-out 1.8s forwards, undrawStroke 1.5s ease-in 1.6s forwards; } @keyframes drawStroke {