/* Static splash shown before the app's JavaScript runs; React replaces #root's content when it starts.
   Mirrors AppSplash in src/components/brand.tsx (colours = the --logo-* tokens). */
.sena-splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fcfeff;
  font-family: system-ui, sans-serif;
}
.sena-splash-mark { width: 72px; height: 72px; }
/* Same logo motion as the app (globals.css): halves slide in and meet, the name and product name rise in,
   then the halves keep meeting and parting. */
.sena-splash-mark path:first-child { animation: sena-splash-in-top 700ms cubic-bezier(0.22, 1, 0.36, 1) both, sena-splash-top 1600ms cubic-bezier(0.65, 0, 0.35, 1) 900ms infinite; }
.sena-splash-mark path:last-child { animation: sena-splash-in-bottom 700ms cubic-bezier(0.22, 1, 0.36, 1) both, sena-splash-bottom 1600ms cubic-bezier(0.65, 0, 0.35, 1) 900ms infinite; }
.sena-splash-name { height: 24px; width: auto; margin-top: 20px; animation: sena-splash-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) 280ms both; }
.sena-splash-descriptor { margin-top: 12px; font-size: 16px; font-weight: 500; line-height: 1; color: #5f6b7a; animation: sena-splash-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) 400ms both; }
.sena-splash-bar { position: relative; overflow: hidden; width: 112px; height: 3px; margin-top: 32px; border-radius: 9999px; background: #e1e8eb; }
.sena-splash-bar::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: #012f42; animation: sena-splash-bar 1200ms ease-in-out infinite; }
@keyframes sena-splash-in-top { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes sena-splash-in-bottom { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes sena-splash-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sena-splash-top { 0%, 100% { transform: translateX(0); } 45%, 55% { transform: translateX(4px); } }
@keyframes sena-splash-bottom { 0%, 100% { transform: translateX(0); } 45%, 55% { transform: translateX(-4px); } }
@keyframes sena-splash-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  .sena-splash-mark path, .sena-splash-name, .sena-splash-descriptor, .sena-splash-bar::after { animation: none; }
}