svg.zoybox-mark { color: #144747; flex-shrink: 0; }
.dark svg.zoybox-mark { color: #9bd6ce; }

/* Login: the halves assemble once, then stay still while the user types. */
.zoybox-mark--welcome .zoybox-mark__half {
  animation: zoybox-welcome 900ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes zoybox-welcome {
  from { transform: translate(-24px, -24px); opacity: 0; }
  to { transform: translate(0, 0); opacity: 1; }
}

/* App startup: a slow breathing motion while the application prepares. */
.zoybox-mark--startup .zoybox-mark__half {
  animation: zoybox-breathe 2.8s ease-in-out infinite;
}
@keyframes zoybox-breathe {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-12px, -12px); }
}

/* Access checks: the two pieces approach and lock together, then repeat. */
.zoybox-mark--access .zoybox-mark__half {
  animation: zoybox-lock 1.8s ease-in-out infinite;
}
@keyframes zoybox-lock {
  0%, 100% { transform: translate(-16px, 0); opacity: .6; }
  35%, 70% { transform: translate(0, 0); opacity: 1; }
}

/* Submitted forms: a compact, continuous turn that remains legible in buttons. */
.zoybox-mark--submit { animation: zoybox-turn 1.6s linear infinite; }
@keyframes zoybox-turn { to { transform: rotate(360deg); } }

/* Documents: alternating strokes suggest pages being read in sequence. */
.zoybox-mark--document .zoybox-mark__half {
  animation: zoybox-pages 1.8s ease-in-out infinite;
}
.zoybox-mark--document .zoybox-mark__half--second { animation-delay: -.9s; }
@keyframes zoybox-pages {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-10px); opacity: .35; }
}

/* Shop workspace: a gentle whole-mark lift while the shop is prepared. */
.zoybox-mark--workspace { animation: zoybox-lift 2s ease-in-out infinite; }
@keyframes zoybox-lift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.zoybox-boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; font: 14px system-ui, sans-serif; color: #64716e; }
.zoybox-boot .zoybox-mark { width: 72px; height: 72px; }
@media (prefers-reduced-motion: reduce) {
  svg.zoybox-mark, .zoybox-mark .zoybox-mark__half { animation: none; }
}