/* Preloader-only styles */
html, body { height: 100%; margin: 0; background: var(--background-color, #111111); }

.loading-dark-mode { 
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 16px; color: var(--same-text, #f8f9fa);
}

.logo-homepage { position: relative; width: clamp(90px, 30vw, 180px); aspect-ratio: 3 / 2; margin-bottom: 12px; }
.logo-homepage .leaf-green, .logo-homepage .leaf-blue { position: absolute; width: 76%; height: auto; opacity: 0; will-change: transform, opacity; }
.logo-homepage .leaf-green { top: -8%; left: 42%; transform: translateY(-60vh); animation: leafFromTop 800ms cubic-bezier(0.22,1,0.36,1) 50ms forwards; }
.logo-homepage .leaf-blue  { bottom: -8%; left: -2%; transform: translateY(60vh) rotate(180deg); animation: leafFromBottom 800ms cubic-bezier(0.22,1,0.36,1) 50ms forwards; }

.Flow-pesa { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: clamp(28px,8vw,48px); font-weight: 400; opacity: 0; transform: translateY(24px); animation: titleRise 560ms cubic-bezier(0.22,1,0.36,1) 700ms forwards; }
.Flow-pesa-span  { color: var(--foundation-primary-blue-500, #1682f9); }
.Flow-pesa-span2 { color: var(--same-text, #f8f9fa); }
.Flow-pesa-span3 { color: var(--success-500, #34c759); }

@keyframes leafFromTop   { 0% { transform: translateY(-60vh); opacity: 0;} 100% { transform: translateY(0); opacity: 1;} }
@keyframes leafFromBottom{ 0% { transform: translateY(60vh) rotate(180deg); opacity: 0;} 100% { transform: translateY(0) rotate(180deg); opacity: 1;} }
@keyframes titleRise     { 0% { transform: translateY(24px); opacity: 0;} 100% { transform: translateY(0); opacity: 1;} }

@media (prefers-reduced-motion: reduce) {
  .logo-homepage .leaf-green, .logo-homepage .leaf-blue, .Flow-pesa { animation: none !important; transform: none !important; opacity: 1 !important; }
}

